Tech

【Flutter】ボタンタップ時に展開するアニメーションがしたい!

投稿日:2022年1月24日 更新日:

はじめに

Flutterでボタンなどを設置するのはとても簡単ですが、タップした時に展開するようなアニメーションをつけたいと思い今回は記事にしました。

完成イメージは以下の様な形です。

Flowウィジェット

今回Flowウィジェットを使用し実装したいと思います。Flowウィジェットは以下の様にして使用します。

delegateにはFlowDelegateを継承したクラス、childrenには他のウィジェット同様に子となるウィジェットを配置します。FlowDelegateを継承したクラスMyFlowDelegateを作成すると以下のようになります。

paintChildrenではcontext.paintChildを使用します。第一引数には子ウィジェットのindexを指定し、第二引数で位置の調整を行います。

なので、以下の様に設定すると相対的に位置を設定し、今回作成したいボタンの展開など、同じ動きのアニメーションを複数のウィジェットに指定することができます。

Animation

Flutterのアニメーションの基本となるクラスです。現在の値とアニメーションの状態(終了したかアニメーション中かなど)だけを持ちます。Listenableを継承しているので値の変更を監視することはできますが、このクラスは値を保持するだけなので、 時間経過に合わせて値を変更したり外から値を変更するためにはAnimationControllerを使う必要があります。

AnimationController

自分の値を動的に変更できるAnimationのサブクラスです。外から現在の値を渡す方法と、 指定されたDurationで自動的にアニメーションを動かす方法の二種類でアニメーションを管理することができます。
自動でアニメーションする場合はforwardで0.0~1.0で値が変化し、reverseで1.0~0.0で値が変化します。今回のサンプルでは以下の様に実装しています。

vsyncはTickerProviderです、AnimationControllerを保持しているStateクラスにSingleTickerProviderStateMixinをmixinすると、 そのStateクラスがTickerProviderになるので、AnimationControllerにはthisを渡すだけで済みます。

これであとはボタンタップ時にAnimationの状態を確認して、forwardかreverseを渡してあげます。

 

実装

それではFlowウィジェットを使用したサンプルを作成します。コードは以下になります。

これでボタンタップで展開する以下の様なアニメーションが実装できました。

 

さいごに

FABをタップした時に展開するアニメーションなど、それ以外にも相対的に位置を判定して、同じ動きをするアニメーションが作成できるので、要所要所で使っていきたいです。

おすすめ書籍

現場で使える Flutter開発入門 (Compass Booksシリーズ) はじめてのFlutter入門: iOS/Androidアプリ開発の⼀歩を踏み出そう!

blog-page_footer_336




blog-page_footer_336




-Tech
-

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

Go言語

GoでSMF(MIDI)ファイルを読み込んでみた

1 はじめに2 MIDIとは?2.1 SMFファイルについて2.1.1 Tickと分解能2.1.2 トラックチャンク3 gomidiを使ってSMFファイルを読み込む3.1 gomidiの導入3.2 実 ...

[React]MUIのコンポーネントを使用したUI作成(Button、Alert編)

1 はじめに2 MUI3 Button3.1 Buttonの実装3.2 Buttonの使い分け3.2.1 不可逆な操作など、より強調したい時の使い方4 Alert4.1 Alertの実装4.2 Ale ...

react-icon

[React初心者]カスタムフックについて学ぶ

1 はじめに2 Ract Hook(フック)とは3 カスタムフックの実装3.1 フックのルール3.2 カスタムフック3.3 カスタムフックの実装4 さいごに5 おすすめ書籍 はじめに 今回はReact ...

Flutterで写真撮影しよう!

1 はじめに2 準備3 実装3.1 プレビューの表示3.2 写真を撮る4 さいごに5 おすすめ書籍 はじめに 今回はFlutterでカメラを使用して、プレビューの表示と写真の撮影を行いたいと思います。 ...

Xcode11のデバッグ機能

1 はじめに2 Device Conditions2.1 Thermal state condition2.2 Network link condition3 Environment Override ...

フォロー

blog-page_side_responsive

2022年1月
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。