【FlutterFlow】最適なトランジションの長さはこれだ

こんにちは～。前回記事からの続きです。現在、いろんなページ遷移に対応できるよう、Navigationの設定方法をご紹介しています。

前回は、トランジション（ページ遷移時の視覚的な効果）をご紹介しました。８つの中から選べるのでしたね。でも、ちょっとテストランでうまくトランジションを再現できませんでした。

今回は、そのトランジションの持続時間（Duration）を設定してみます。これによって、きちんと期待どおりの視覚効果が得られるに違いない！

ということでは、今回は持続時間の設定です。

レッツゴー♪

Durationが未設定ではダメなのか？

前回、トランジションを設定後、テストランで試したとき、トランジションが速すぎて！？うまく視覚効果を起こすことができませんでしたね。

これは、下図のとおり、Durationが未設定だったからと思われます。普通、未設定のときは、無難な設置値がデフォルトで適用されることが多いのですが、違うのでしょうか。

設定単位は、ms（ミリ秒）

されば、持続時間を入力して試してみようではありませんか！

えっと単位は、ms…..ミリ秒ですね。1000分の1秒。ですから、1000と入力すれば、トランジションが1秒かかって表示される、ということでしょう。

Fadeで実験

最適な値は、、、500（0.5秒）くらいかな。よし、これで試します。ボタンのアクションメニューを開いて、Durationに入力します。

トランジションの種類は、Fadeです。こうなりました。

見えましたね！視覚効果！じわっとページ遷移しました！ちなみに、ページBからページAに戻るときも同様のトランジションが再現されます。

Slide leftで実験

よ～し、気をよくした私はもっと試したくなりました。

下のようにトランジションの種類をSlide leftにしてDurationを2倍の1秒間にしました。

これでどうなるかな？こうなります。

左からにゅるっとゆっくり次のページが登場する感じですね。トランジションの効果をしっかりと見せたいときは1000msでもいいかもしれませんが、500くらいがスイートスポットかと思いますね。

Scaleで実験

もう一つくらいやってみましょうか！今度は、効果をScaleにしました。

すると、視覚効果はこうなります。

次ページが下からだんだん大きくなって登場しますね。ちょっと自己主張が強いトランジションです。

はい、本日はここまで～。今回は、無事トランジションの再現に成功しました～。持続時間を設定する必要があったことが確認できましたね。500くらいが無難ではないでしょうか。

次回は、、、1大テーマである「コンポーネント」をやりたいと思います～。

では～。