[Package] flutter_animate

목표

flutter_animate 패지키를 활용해보고 추후 활용도가 무엇이 있는지 고민해본다.

---

Flutter 공식 유튜브를 보다가 해당 영상을 확인하였다. flutter_animate (Package of the Week)은 주 마다 Popularity가 높은 패키지를 제공해주는 것처럼 보였는데 워낙 신기해서 기록을 해볼 겸 들고 와보았다.

 

flutter_animate는 쉽게 말하자면 글자 등에 다양한 시각적 효과를 줌으로써 UI적인 측면에서 화려하거나 혹은 정갈한 느낌을 줄 수 있는 Style들을 제작할 수 있는 것으로 보인다. 뭔가 포트폴리오 앱을 만들거나 혹은 디자인 관련 앱을 만들때 좋을 듯 한다. 실제 홈페이지에서도 보여주는 예시들이 다음과 같다.

flutter_animate package 사이트 참조

그 외에도 이러한 기능들을 제공한다고 한다.

1. Pre-built effects, like fade, scale, slide, flip, blur, shake, shimmer, shadows, crossfades, and color effects (saturation, color, and tint)
2. Easy custom effects and simplified animated builders
3. Synchronize animations to scroll, notifiers, or anything
4. Integrated events

여기 서술되어 있는 것 처럼 해볼 수 있는 기능들은 다음과 같다.

• Delay, duration, curve 등의 조정
• Other Effect Parameters의 조정
• Sequencing with Then Effect
• Animating lists
• Shared Effects
• Custom Effects
• Toggle Effects
• Swap Effects
• Callback Effects
• Listen Effects

추가 사항에 대해서는 flutter_animate package document 참고 (https://pub.dev/documentation/flutter_animate/4.1.1/).

 

설치

dependencies를 추가하는 것으로 쉽게 설치가 가능하다.

dependencies:
  flutter_animate: ^4.1.1

 

사용예제

직접 써보니 provider, set state() 등을 사용해서 해결하곤 했었던 숫자 카운팅을 쉽게 몇줄로 만들 수 있었다 (그렇다고 이런 패키지에 너무 의존하면 안되니 어느 정도 기본적인 것들로 기능을 구현할 수 있는 연습은 해본다음 패키지등을 이용하여 쉽게 구현하는 개발자의 공부법을 해보기를 권장한다.). 해당 예제는 Animate() 내에서 duration과 begin, end 등을 적는 것만으로도 카운팅을 할 수 있는 코드이다.

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'animate',
      home: MyPage(),
    );
  }
}

class MyPage extends StatelessWidget {
  const MyPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
          child: Animate()
              .custom(
                duration: 100.seconds,
                begin: 100,
                end: 0,
                builder: (_, value, __) => Text(
                  value.round().toString(),
                  style: TextStyle(fontSize: 50),
                ),
              )
              .fadeOut()),
    );
  }
}

실제 구동화면

사용예제

이번에는 Hello가 fadeIn과 slide로 나타났다가 스윽 내려가는 애니메이션을 만들어 보았다. 어떻게 이런 패키지를 만들었을까 가끔식 너무 놀랍다.

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'animate',
      home: MyPage(),
    );
  }
}

class MyPage extends StatelessWidget {
  const MyPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Center(
            child: Text(
          'hello',
          style: TextStyle(fontSize: 50, fontWeight: FontWeight.bold),
        ).animate().fadeIn(duration: 600.ms).then(delay: 300.ms).slide()
            ));
  }
}

실제 구동화면

오늘은 간단하게 flutter에서 공식 추천한 패키지를 보여드렸다. 이외에도 다양한 패키지들이 존재하니까 가끔 유튜브 채널을 참고하면서 다른 패키지들은 무엇이 있는지 확인해보는 것도 공부하는데 큰 도움이 될 듯 하다.