animation
Flutter
Hero

Heroウィジェットを使って画面遷移


Heroウィジェットとは

Heroウィジェットは、Hero Animationを簡単に実装できるウィジェットです。

Hero Animationとは、画面遷移時に要素が次のページに飛ぶようなアニメーションのことを言います。

飛んでいった要素は以前のページに戻る際は元の場所に戻ります。

このようなアニメーションを簡単に実装できるのがHeroウィジェットです。

今回は似たような画面遷移を実装してみます。


実装方法

実装方法は非常に簡単で、Icon、FloatingActionButtonなどの遷移元の画面のウィジェットに対し、HeorウィジェットでラップしTagを設定します。

そして遷移先の画面にも同じTagを持つ、Heroウィジェットを配置しておきます。

これだけで画面遷移時に対象のHeroウィジェットからHeroウィジェットに飛んでいってくれます。

今回はRaisedButtonをHeroウィジェットとして配置し、onPresedアクションで画面遷移を行います。

Container(

width: 100,
height: 90,
margin: EdgeInsets.all(10.0),
child: Hero(
tag: "HeroSample",
child: RaisedButton(
color: Colors.red,
onPressed: () {
this.navigateSecondPage("HeroSample", color);
},
),
)
);

画面遷移と遷移後のページのレイアウトは以下のコードで実装します。

選択されたButtonを遷移後のページにも配置したいので、Color、Tagを引数で受け取っておきます。

navigateSecondPage(String tag, Color color) {

Navigator.of(context).push(MaterialPageRoute<void> (
builder: (BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Second Page'),
),
body: Container(
alignment: Alignment.topLeft,
padding: EdgeInsets.all(24.0),
child: Container(
width: 100,
height: 90,
child: Hero(
tag: tag,
child: RaisedButton(
color: color,
onPressed: () {
Navigator.of(context).pop();
},
)
),
),
),
);
}
));
}

上記のようなContainerをいくつか並べて、画面遷移を行ってみると以下のような画面遷移になります。

このようにHeroウィジェットを利用することで簡単にアニメーションの入った画面遷移を実現することが出来ます。


オプション

さらに凝ったアニメーションを実装したい場合はオプションを設定することが出来ます。


flightShuttleBuilder

指定することでアニメーション中のウィジェットを変更することが出来ます。  

あくまでアニメーション中のみの変更のため、アニメーションが終了すると元のHeroウィジェットに戻ります。

flightShuttleBuilder: (flightContext, animation, direction, fromContext, toContext) {

return Icon(Icons.check, size: 50.0,);
},


placeholderBuilder

ウィジェットが飛んでいく地点に対して、placeholderを設定できます。

placeHolderにはウィジェットを指定します。

directionで表示するウィジェットを変更することも可能です。

flightShuttleBuilder: (flightContext, animation, direction, fromContext, toContext) {

if (direction == HeroFlightDirection.pop) {
return Icon(Icons.check, size: 50.0,);
} else if (direction == HeroFlightDirection.push) {
return Icon(Icons.settings, size: 50.0,);
}
},


transitionOnUserGestures

trueを設定することで、iOSでバックスワイプでのアニメーションを有効にします。

デフォルトではfalseになっているので、バックスワイプを行うとHeroAnimationが行われません。


まとめ

Heroウィジェットを使って画面遷移にアニメーションを追加する方法について紹介してきました。

今回は紹介できませんでしたが、アニメーションをカスタマイズすることも出来るので、かなり自由に画面遷移時のアニメーションを行うことが出来ます。

Heroアニメーションを使うことの利点は、画面内の重要なアクションを移動させることによって、ユーザーに取ってほしい行動を誘導することが出来るという点です。

簡単にマテリアルデザインの様式に則った画面遷移を実装できるので積極的に使っていきたいところです。


参考

https://flutter.io/docs/development/ui/animations/hero-animations#whats-going-on-1