[flutter] velocity_x를 사용하여 어떻게 크로스페이드 애니메이션을 만들 수 있는가?

05 Dec 2023

flutter

크로스페이드 애니메이션은 두 가지 다른 위젯 사이의 부드러운 전환 효과를 제공합니다. Flutter에서 velocity_x 패키지는 이러한 애니메이션을 손쉽게 구현할 수 있도록 도와줍니다. velocity_x를 사용하여 어떻게 크로스페이드 애니메이션을 만들 수 있는지 알아보겠습니다.

1. velocity_x 패키지 추가하기

먼저, 프로젝트에 velocity_x 패키지를 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter

  velocity_x: ^1.0.0

패키지를 추가한 후에는 flutter pub get 명령어를 사용하여 패키지를 설치합니다.

2. 애니메이션 구현하기

import 'package:flutter/material.dart';
import 'package:velocity_x/velocity_x.dart';

class CrossFadeAnimationScreen extends StatefulWidget {
  @override
  _CrossFadeAnimationScreenState createState() =>
      _CrossFadeAnimationScreenState();
}

class _CrossFadeAnimationScreenState extends State<CrossFadeAnimationScreen> {
  bool _showFirstWidget = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cross Fade Animation'),
      ),
      body: VStack(
        [
          _showFirstWidget ? _buildFirstWidget() : _buildSecondWidget(),
          16.heightBox,
          ElevatedButton(
            onPressed: () {
              setState(() {
                _showFirstWidget = !_showFirstWidget;
              });
            },
            child: 'Toggle Animation'.text.make(),
          ),
        ],
      ).p16(),
    );
  }

  Widget _buildFirstWidget() {
    return 'First Widget'.text.xl4.makeCentered();
  }

  Widget _buildSecondWidget() {
    return 'Second Widget'.text.xl4.makeCentered();
  }
}

위의 코드에서는 CrossFadeAnimationScreen이라는 StatefulWidget을 만들고 _showFirstWidget이라는 boolean 변수를 사용하여 현재 어떤 위젯을 보여줄지 결정합니다. VStack 위젯을 사용하여 애니메이션을 실행할 위젯과 토글 버튼을 배치하였습니다.

_buildFirstWidget 메서드는 첫 번째 위젯을, _buildSecondWidget 메서드는 두 번째 위젯을 생성합니다.

Toggle 버튼을 누르면 _showFirstWidget 변수의 값을 변경하여 애니메이션을 전환합니다.

3. screen에 등록하기

마지막으로, 위에서 작성한 CrossFadeAnimationScreen을 앱의 메인 라우터에 등록합니다.

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Cross Fade Animation',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CrossFadeAnimationScreen(),
    );
  }
}

결론

velocity_x 패키지를 사용하여 Flutter 앱에서 크로스페이드 애니메이션을 만들어보았습니다. velocity_x 패키지는 많은 유용한 애니메이션 효과와 위젯 구성을 제공하기 때문에 애니메이션을 구현할 때 유용하게 사용할 수 있습니다.

더 자세한 정보와 예제 코드는 velocity_x GitHub 페이지를 참조하시기 바랍니다.