Flutterで画像で作るボタンアイコンを動かしたりして目立たせたい！

この記事の目的

三日三晩、「Flutterでボタンやアイコンや画像をよりボタンっぽく見えるためになんか動かしたりエフェクトつけてみてええええ」」という想いが絶えなかったので、ついに重い腰を上げて勉強し始めた。色々ChatgptとQiitaなどを読んだので備忘録的にまとめる。メモなので、わかりにくさはご容赦いただきたい。随時更新していく。

アニメーションのポイント

• 結構クラス分けが重要

• 似ているクラスがたくさんあるがむず

• qiitaとyoutubeがあまりないのがちょっと心配ではある

  • まとまってるyoutubeplaylist英語だけど:Flutter Animation Tutorial
  • まとまってるqiita,ソースコードあり。クラス分けの仕方が説明させている。：Flutterのアニメーションのチュートリアル
    -ImplicitlyAnimatedWidgetとAnimatedWidgetの違いが説明されてる。ズバリanimated controllerが内蔵されているか否か。他にも、そのアニメーション作る前に考えた方がいい点など（どれくらい複雑か）:【Flutter】Animationの基礎から応用まで ~④アニメーションのわかりづらい所~

• flutter公式のアニメーションライブラリ（英語だけど辞書みたいなやつ）:animation library

• カーブクラスのライブラリー。どんな動きができるのか視覚的に見れている：Curves class

• 一度に複数のアニメーション(Tween)を生成できる

• 一層クラスが複雑になりそうだけどまあできそう

ある程度複雑なアニメーションの手順

1. 必要なインポートを行う。
2. Stateクラスでアニメーションコントローラとアニメーションを定義し、アニメーションの詳細な制御を行う。stateクラスでAnimationControllerとAnimationを定義
3. AnimatedBuilderを使用して、アニメーションのUIを構築する。
4. 複数のアニメーションを組み合わせる場合は、複数のAnimationオブジェクトやTweenSequenceを使用して、異なるプロパティをアニメーション化する。

タップすることで動くアニメーション

• AnimatedContainerとAnimationControllerがある

  • AnimatedContainer←普通にボタン動くくらいだったらこっちでOK
    • 概要: AnimatedContainerは、特定のプロパティが変更されたときに、自動的にアニメーションを実行するウィジェットです。例えば、サイズ、色、境界、配置などのプロパティが変更されたときにアニメーションが実行されます。
    • 使用方法: シンプルなアニメーションを実装する場合に便利です。アニメーションの開始や停止、アニメーションの進行度を細かく制御する必要がない場合に適しています。
    • 【Flutter】AnimatedContainerの使い方
    • ピロピロ背景色が変わるとか
    • 色変わりながら大きくなるとか
    • 大きくなる速さとかも変えられる
    • 丸から四角に変わるとかもなめらかにできる
    • 公式のyoutubeもある

• AnimationController←こっちが良さそう

  • 概要: AnimationControllerは、アニメーションの開始、停止、逆再生、速度調整、進行度の取得など、アニメーションの詳細な制御が可能なウィジェットです。通常、他のアニメーションウィジェット（例えば、FadeTransitionやScaleTransition）と一緒に使用されます。
  • 使用方法: 複雑なアニメーションや、アニメーションの進行を細かく制御する必要がある場合に使用されます。アニメーションの状態を監視し、カスタムのアニメーション効果を作成するのに適しています。
  • 【Flutter】AnimatedContainerの使い方
  • 【Flutter】Animationの基礎から応用まで ~④アニメーションのわかりづらい所~
  • アニメーションをちょっと本格的に実装する
    • 実装する流れがわかりやすく書いてある

ボタン

• [Flutter]コピペで使える！ボタンのデザイン16種類をまとめました

影をつける

• Boxshadowでできる
  • [Flutter]立体的なCardを作ってみよう(BoxShadowクラス)
    • BoxShadowを画像に適用することもできます。これを実現するためには、画像をコンテナ（Container）でラップし、そのコンテナにBoxDecorationとBoxShadowを適用します。

タップした時

• タップした時に色とか影が広がる挙動
• [Flutter] InkResponse と InkWell と Ink、違いを説明できますか？
• inkWellは、タップ、ダブルタップ、長押しなどのジェスチャを検出するウィジェットで、タップ時に「水面に波紋が広がる」ような視覚効果（リップルエフェクト）を表示。
• inkResponseはまたちょっと違う挙動を示す

カーソルとかタップ・クリックを検知する

• [Flutter] GestureDetectorとListener
• listenerの情報はあまりない
• GestureDetector
• GestureDetectorは、ユーザーのさまざまなジェスチャー（タップ、ダブルタップ、長押し、スワイプ、ドラッグなど）を検出するための汎用的なウィジェットです。視覚的なフィードバックを提供しませんが、幅広いジェスチャーを検出できます。

動いてる系アニメーション

• 以下とボタン押した時のアニメーションを組み合わせたらいけそう
• 左右にゆらゆら揺れるアニメーション:
  1. AnimationControllerを設定し、repeatメソッドを使ってアニメーションを繰り返します。
  2. Tweenを使って、アニメーションの範囲を-10から10の間に設定しCurvedAnimationでカーブを設定します。
  3. Transform.translateを使用して、アニメーションの値に基づいて画像を左右に揺らします。
• モニョモニョと大小に動くアニメーション:
  1. AnimationControllerを設定し、同様にrepeatメソッドを使ってアニメーションを繰り返します。
  2. Tweenを使って、アニメーションの範囲を0.8から1.2の間に設定し、CurvedAnimationでカーブを設定します。
  3. Transform.scaleを使用して、アニメーションの値に基づいて画像のサイズを変更します。