[flutter] 확대 및 축소 애니메이션 구현하기

11 Dec 2023

flutter

Flutter를 사용하여 화면 요소에 확대 및 축소 효과를 적용하는 애니메이션을 구현하는 방법을 살펴보겠습니다.

1. 확대 및 축소 애니메이션을 위한 준비 작업

먼저 pubspec.yaml 파일에 flutter_gesture_detector 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_gesture_detector: ^2.1.0

그런 다음 패키지를 가져와 적용합니다.

import 'package:flutter_gesture_detector/flutter_gesture_detector.dart';

2. 애니메이션 구현

2.1. 확대 및 축소 애니메이션을 위한 함수 작성

void _onScaleStart(ScaleStartDetails details) {
  // 애니메이션 시작 시 수행할 작업
}

void _onScaleUpdate(ScaleUpdateDetails details) {
  // 애니메이션 진행 중 수행할 작업
}

void _onScaleEnd(ScaleEndDetails details) {
  // 애니메이션 종료 시 수행할 작업
}

2.2. 확대 및 축소 애니메이션을 적용할 화면 요소에 GestureDetector 및 Transform 적용

GestureDetector(
  onScaleStart: _onScaleStart,
  onScaleUpdate: _onScaleUpdate,
  onScaleEnd: _onScaleEnd,
  child: Transform.scale(
    scale: _currentScale,
    child: YourWidget(),
  ),
)

위 코드에서 YourWidget은 확대 및 축소 애니메이션을 적용할 대상 위젯을 나타냅니다.

위 방법을 사용하여 화면 요소에 확대 및 축소 효과를 적용하는 방법을 알아보았습니다. 만약 관련하여 추가 질문이 있다면 아래 댓글로 알려주세요!

References:

Flutter Gesture Detector Package