【 Flutter 】おしゃれなフェードアウトアニメーションを実装しよう！

おしゃれなフェードアウトアニメーションを実装したい！

本記事ではそんな要望にお答えします。

Flutter にておしゃれなフェードアウトアニメーションを実装できるパッケージ、
fade_out_particle パッケージを紹介します。

このパッケージを使用すると、アイコンやテキストのWidgetに対し、
以下のようなアニメーションを付けることが可能です。

このパッケージ、海外の技術情報等が集まる掲示板サイト、Redditにて、
投稿されて１日足らずで70以上のUpvoteを集めています！

Fade out Particle is now available for Flutter from FlutterDev

簡単におしゃれなフェードアウトアニメーションを実装できるので、
ぜひ読んでみて下さい！

使い方
まとめ
編集後記（2022/6/15）

使い方

基本的な使い方について解説します。

今回紹介するパッケージのリンクはこちらです。

fade_out_particle | Flutter package

Fade out particle effect for disappearing views like Text and Icon

パッケージのインストール

ターミナル (コマンドプロンプト)を立ち上げ、プロジェクトのルートに移動し、
以下のコマンドを打ちます。

flutter pub add fade_out_particle

もしくは、pubspec.yaml ファイルのdependenciesに以下のコードを追加します。

dependencies:
  fade_out_particle: ^1.0.0 #追加

パッケージのインポート

フェードインアニメーションを追加したいWidgetの記述のあるファイルの上の方に、
以下のインポート文を追加します。

import 'package:fade_out_particle/fade_out_particle.dart';

Widgetの追加

フェードインアニメーションを追加したいWidgetを以下のように、
FadeOutParticle Widget で囲います。

            FadeOutParticle(
              disappear: true,
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Icon(
                    Icons.check_circle_sharp,
                    size: 52,
                    color: Theme.of(context).primaryColorDark,
                  ),
                  const SizedBox(height: 16),
                  Text(
                    'Fade out Particle',
                    style: Theme.of(context).textTheme.headline2,
                  ),
                ],
              ),
            ),

disappearプロパティにはbool型の値を設定でき、
trueの際は、Widgetの生成と同時に消失アニメーションが開始されます。

実際に使用する際にはここにtrue - false のフラグを用意し、
切り替えることでアニメーションのオンオフを実装すると良いです（下記のサンプルコード参照）

その他設定できるプロパティは以下となります。

duration : 完全に消えるまでの秒数を管理
curve: アニメーションの仕方（だんだん遅くなる、等）を管理

サンプルコード

最後にサンプルコードを紹介します。
（大部分をパッケージのexampleから引用しております。）

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FadeOutParticle Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool _disappear = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            FadeOutParticle(
              disappear: _disappear,
              duration: const Duration(milliseconds: 3000),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Icon(
                    Icons.check_circle_sharp,
                    size: 52,
                    color: Theme.of(context).primaryColorDark,
                  ),
                  const SizedBox(height: 16),
                  Text(
                    'Fade out Particle',
                    style: Theme.of(context).textTheme.headline2,
                  ),
                ],
              ),
            ),
            const SizedBox(
              height: 16,
            ),
            OutlinedButton(
              onPressed: () => setState(() => _disappear = !_disappear),
              child: Text(
                _disappear ? 'Reset' : 'Start',
                style: const TextStyle(fontSize: 30),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

こちらのサンプルコードはFlutter 3.0.2での記載となります。