【日本語版】【Flutter】Widget of the Week – #37 AnimatedIcon【要約】

動画

要約

  • Flutterはアニメーションが組み込まれたアイコンも提供している
  • 使い方は簡単でforward関数(再生)かreverse関数(逆再生)を呼び出すだけ

内容

Flutterはアニメーション付きのアイコンも提供しています。
 

AnimatedIconの例(play_pause)

AnimatedIcon 一覧 (動きまでわかるページがまだないです。。追って作ります。)

使い方は、まずAnimatedIcon widgetに表示したいアニメーション付きアイコンを指定します。
 

iconにAnimatedIcon.play_pauseを指定

次にprogressプロパティにAnimationオブジェクトを指定します。
 

あとは、Animationオブジェクトのforward()を呼び出すだけでアニメーションを実行することができます。

また、forward()のかわりに、reverse()を呼び出すことで逆再生もできます。
 

あとは、forward()を呼び出すだけ
reverse()で逆再生もできる

まとめ

Widget of the Weekの#37 AnimatedIconの日本語翻訳版でした。

ビデオの再生/一時停止など、同じボタンの意味が変わることは少なくありません。

アニメーションアイコンを使えば、意味の変化をわかりやすくユーザーに伝えることができます。

AnimatedIconを使うことで最低限のコーディングでスマートなアニメーション付きのアイコンを作ることができます。

■ 次の記事はこちら
#38 – AspectRatio

■Widget of the Week まとめ
Widget of the Week 一覧