🙆
Flutterで使えるアイコンボタンにアニメーションをつけるライブラリを作成しました
Flutterで利用できるアイコンボタンにアニメーションをつけるライブラリを作成しました。
標準的なFlutterアイコンを利用して簡単にアニメーションをつけられるようにしていますので、ぜひご利用してみてください。
また、リポジトリへの貢献、issueへのフィードバックもお待ちしています。
経緯
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;
void initState() {
controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 300),
lowerBound: 0.0,
upperBound: 1.0,
);
controller.addListener(() {
if (mounted) {
setState(() {});
}
});
}
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,
),
),
Discussion