Flutterのヒーローウィジェットの詳細

FlutterのHeroウィジェットのパワーのチュートリアル

この記事は、Flutterウィジェットの詳細な調査を目的とした一連の記事の4番目の記事です。 ListViews、TextFields、およびFloatingActionButtonsを詳細にカバーした後、FlutterのHeroウィジェットに進みます。

ヒーローアニメーションの概要

ある文のヒーローアニメーションは、アプリが次のページに移動したときに、次の画面に「飛んで」いく1つの画面の要素にすぎません。

ヒーローアニメーションは、「ヒーロー」と呼ばれるアイコンのような要素を取り、通常はアイコンをクリックすることでページ遷移がトリガーされると、ヒーローは次のページに「飛ぶ」。ユーザーが前のページに戻ると、アニメーションは別の方向に移動し、アイコンはその場所に戻ります。

基本的なヒーローアニメーションだけでなく、カスタマイズできるものについても説明します。最初に基本を見てみましょう。

基本的なヒーローアニメーションの作成

ヒーローアニメーションは、おそらくFlutterで最も簡単なアニメーションの1つであり、多くのセットアップは必要ありません。上記の例を見ると、同じアプリアイコンウィジェットが両方のページに存在することがわかります。必要なのは、両方がリンクされていることをFlutterに伝える方法だけです。

これを行うには、Heroウィジェットのアイコンのような要素をラップします。

勇者(
  タグ:「DemoTag」、
  子:アイコン(
    Icons.add、
    サイズ:70.0、
  )、
)、

この特定のヒーローに名前を付けるためのタグを提供します。これは、同じページに複数のヒーローがいる場合、各ヒーローが飛行先を知っているために必要です。

これでアプリは、次のページに飛ぶヒーローウィジェットがあることを認識します。今、私たちに必要なのは、飛行する場所です。

必要なのは、2番目のページに同じタグを持つヒーローウィジェットだけです。

勇者(
  タグ:「DemoTag」、
  子:アイコン(
    Icons.add、
    サイズ:150.0、
  )、
)、

そして、この結果:

上記のコードで作成されたヒーローアニメーション

ヒーローアニメーションのカスタマイズ

Heroウィジェットを使用すると、アニメーションの側面をカスタマイズできます。いくつかの可能性を探りましょう。

プレースホルダーを追加する

ウィジェットが以前の場所から飛び出した後、ウィジェットが目的地に到着する前に、目的地に空のスペースがあります。この場所にプレースホルダーを追加できます。

現時点では、CircularProgressIndicatorをプレースホルダーとして使用しましょう。

勇者(
    タグ:「DemoTag」、
    子:アイコン(
      Icons.add、
      サイズ:150.0、
    )、
    placeholderBuilder:(コンテキスト、ウィジェット){
      コンテナを返します
        高さ:150.0、
        幅:150.0、
        子:CircularProgressIndicator()、
      );
    }、
  )、

placeholderBuilderを使用してプレースホルダーを構築し、プレースホルダーとして使用するウィジェットを返します。

プレースホルダーを使用する:

CircularProgressIndicatorは、到着するまでヒーローの代わりになります。

ヒーローウィジェットの変更

Flutterでは、2つのページのウィジェットを変更せずに、実際に1つのページから別のページに移動するウィジェットを変更できます。

ヒーローウィジェットの子を変更せずに、「+」アイコンの代わりにロケットアイコンをヒーローとして使用しましょう。

ヒーローのアイコンは変わりますが、最終的なアイコンは変わりません。

flightShuttleBuilderパラメーターを使用してこれを行います(したがって、ロケットの例)。

勇者(
  タグ:「DemoTag」、
  子:アイコン(
    Icons.add、
    サイズ:150.0、
  )、
  flightShuttleBuilder:(flightContext、animation、direction、
      fromContext、toContext){
    return Icon(FontAwesomeIcons.rocket、サイズ:150.0、);
  }、
)、

flightShuttleBuilderメソッドには5つのパラメーターがあり、アニメーションとアニメーションの方向を提供します。

現時点では、ロケットアイコンのサイズは両方向で150.0のままです。メソッドの方向パラメーターを使用して、方向ごとに異なる構成を使用できます。

if(direction == HeroFlightDirection.push){
  Return Icon(
    FontAwesomeIcons.rocket、
    サイズ:150.0、
  );
} else if(direction == HeroFlightDirection.pop){
  Return Icon(
    FontAwesomeIcons.rocket、
    サイズ:70.0、
  );
}
サイズは方向によって異なります。

iOSのバックスワイプジェスチャーでヒーローアニメーションを機能させる

デフォルトでは、ヒーローアニメーションはiOSで戻るボタンが押されたときに機能しますが、バックスワイプでは機能しません。

戻るボタンを使用する:

[戻る]ボタンは、ヒーローアニメーションをトリガーします。

バックスワイプを使用する:

バックスワイプはヒーローアニメーションをトリガーしません。

これを解決するには、両方のHeroウィジェットでtransitionOnUserGesturesをtrueに設定するだけです。これはデフォルトではfalseです。

勇者(
  タグ:「DemoTag」、
  子:アイコン(
    Icons.add、
  )、
  transitionOnUserGestures:true、
)、

また、これにより、バックスワイプでもヒーローアニメーションがトリガーされます。

この記事は以上です!楽しんでいただけたでしょうか。また、お楽しみになりましたら、少しお休みください。 Flutterのその他の記事については私をフォローし、この記事についてフィードバックがある場合はコメントしてください。

私の他のプロフィールや記事も自由にチェックしてください。

ツイッター

GitHub

私の他の記事のいくつか