【Flutter】Widget of the Week #4 AnimatedContainer

【Flutter】Widget of the Week #4 AnimatedContainer

Googleさん公式Youtube「Widget of the Week」で紹介されている、
ウィジェットのサンプル集第4回目はAnimatedContainerです!

AnimatedContainerってなに?

指定した二つの値間を自動的にアニメーションで変化させてくれるウィジェットです\_(・ω・`)ココ重要!

公式からの説明は以下の通り。

アニメーションの変化をコーディングするのに明示的なアニメーションを使うこともできますが、Flutterを使えば自動でできます。AnimatedContainerウィジェットを使えば、特定の属性(色など)で一度ビルドして、別の値で再びビルドすることができます。Flutterが二つの値から自動的にアニメーションの変化を作ってくれます。さらに、お好みに合わせてアニメーションの長さやcurveも指定できます。

公式Youtubeより引用

Widget of the Week #4 AnimatedContainer

まずは1分程度の公式の動画「Widget of the Week」を見て概要を把握しましょう!

 

概要をなんとなく把握できたところで、
早速サンプルコードを見ていきましょう(∩’-‘⊂)シュッ

Sample Code

AnimatedContainer Widgetのシンプルなサンプルコードです!

構造としてはAnimated Containerウィジェット内で、
アニメーション前後の値や、変化の仕方を指定しています。

Containerをタップするとアニメーションしながら形や色が変化します!

主要なProperties

使えそうなプロパティを抜粋して紹介していきます( *˙ω˙*)و グッ!

width:

横幅の指定

height:

高さの指定

color:

色の指定

alignment:

child配下にある「FlutterLogo」の位置の指定

duration:

アニメーションの開始から終了までの時間を指定します。
今回のコードを例にするとmilliseconds: 1500
1.5秒でアニメーションが完了するという意味です。

Memo

アニメーションの時間は以下の指定方法があります。
・int days = 0,
・int hours = 0,
・int minutes = 0,
・int seconds = 0,
・int milliseconds = 0,
・int microseconds = 0

Sample Code 2 – 上記以外のプロパティ追加ver –

上記で使っていないプロパティを追加したverのサンプルコードです!
構造やタップしたらアニメーションするという仕様は
一つ目のサンプルコードと基本的に一緒です。

アニメーションの仕方、Containerの位置や影の色なども変更してみました!

curve:

これはアニメーションのカーブの種類の指定です。
全部で30種類以上ある中から、
curve: Curves.bounceOut,を指定してみました!(↓gifの上から3つ目)

transform:

Matrix4.translationValuesでContainer自身の位置の指定をしており、
カッコの中身は3次元直交座標系(x軸, y軸, z軸)になっています。

漢字で表現するとむずかしそうですが、
つまり(x軸=横、y軸=縦、z軸=奥行き)を表しています!

CGWORLD Entry.jpより

今回のコードを例にすると、
初期値はMatrix4.translationValues(0, 0, 0)で画面左上が始点になっており、
Matrix4.translationValues(右に100, 下に150, 0),に移動するという意味です!
※これz軸(奥行き)って意味あるのでしょうか?わかる方いたら教えてください(っ ̯- )

decoration: BoxDecoration()

BoxDecorationの中で引数を指定することで、
以下の指定などが可能になります。

color::Containerの色
border::Containerの枠線
borderRadius::Containerの角丸
boxShadow::Containerの影

Attention

colorのみ指定する場合は、最初のサンプルコードの様にBoxDecorationは不要ですが、
BoxDecorationを使用する場合は、BoxDecoration内にcolorを含めないと以下error(っ ̯- )

Cannot provide both a color and a decoration
The color argument is just a shorthand for “decoration: BoxDecoration(color: color)”.
‘package:flutter/src/widgets/implicit_animations.dart’:
Failed assertion: line 643 pos 15: ‘color == null || decoration == null’

boxShadow:

BoxDecoration内で使用する、
影の表示の仕方を指定するクラスです!

引数で以下の指定などが可能です。

color::影の色
blurRadius::影の透明度
spreadRadius::影の大きさ
offset::影の位置

FlutterLogo

Sample Code 2 ではFlutterのロゴも変化する様に実装しています。

size::ロゴのサイズ
textColor::テキストの色(※ロゴのみの場合は適用されない)
style::ロゴの種類を指定

ちなみにFlutterLogoStyle.は以下の3種類があります!

あとがき

お疲れ様でした!
これでアニメーションマスターと言っても過言だとは言い切れなくもないですね(∩’-‘⊂)シュッ

次回はOpacity(透過)の紹介です!
それでは次の記事で会いましょう!

Flutterカテゴリの最新記事