Zenn
🙆

Flutterで使えるアイコンボタンにアニメーションをつけるライブラリを作成しました

2024/04/05に公開
Flutter
#
OSS
tech

Flutterで利用できるアイコンボタンにアニメーションをつけるライブラリを作成しました。
標準的なFlutterアイコンを利用して簡単にアニメーションをつけられるようにしていますので、ぜひご利用してみてください。

https://pub.dev/packages/flutter_animated_icon_button

また、リポジトリへの貢献、issueへのフィードバックもお待ちしています。
https://github.com/RikitoNoto/flutter_animated_icon_button

経緯

FlutterではAnimatedIconというウィジェットが用意されていますが、このウィジェットは少数用途に限定したアイコンしか用意されていません。
たとえば、PlayボタンからPauseボタンへのアニメーションはありますが、PlayからStopのアニメーションは用意されていません。
そのようなアニメーションが用意されていないアイコンについても、簡単なアニメーションが作成できるようにする目的でこのライブラリを作成しました。

使い方

アニメーションに利用できるアイコンはIconDataクラスを継承しているアイコンデータになります。
以下ではFlutter標準アイコンを利用して説明します。

アイコンに色がつく表現(TapFillIcon)

SNSのお気に入りボタンなどでよく利用されるような、枠線だけのアイコンに色がつく表現のアニメーションです。
Flutterで用意されている〇〇_border系のアイコンを利用することで作成できます。

ソースコード
TapFillIcon(
    // ボーダーのアイコン
    borderIcon: const Icon(
      Icons.favorite_border,
      color: Colors.grey,
    ),
    // 色付きのアイコン
    fillIcon: const Icon(
      Icons.favorite,
      color: Colors.red,
    ),
),

パーティクルがでる表現(TapParticle)

アイコンボタンなどを押下時にパーティクルが出るようなアニメーションです。
パーティクル単体のウィジェットと、上で紹介したTapFillIconを組み合わせて表現します。
アニメーションはAnimationControllerを使用する必要があり、TapFillIconと同期してアニメーションが実行させることもできます。

ソースコード
  late AnimationController controller;
  @override
  void initState() {
    controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 300),
      lowerBound: 0.0,
      upperBound: 1.0,
    );
    controller.addListener(() {
      if (mounted) {
        setState(() {});
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return TapParticle(
      size: 50,
      particleCount: 5,
      particleLength: 10,
      color: Colors.orange,
      syncAnimation: controller,
      duration: const Duration(milliseconds: 300),
      child: TapFillIcon(
        animationController: controller,
        borderIcon: const Icon(
          Icons.star_border,
          color: Colors.grey,
          size: 50,
        ),
        fillIcon: const Icon(
          Icons.star,
          color: Colors.yellow,
          size: 50,
        ),
      ),
    ),
  }

アイコンが切り替わる表現(AnimateChangeIcon)

アイコンから別のアイコンに切り替わる表現です。

ソースコード
AnimateChangeIcon(
  firstIcon: Icon(
    Icons.play_arrow_rounded,
  ),
  secondIcon: Icon(
    Icons.stop_rounded,
  ),
),
GitHubで編集を提案

Discussion