FlutterFlow ウィジェットの配置 Nav Bar

Nav Barを表示させる

Nav Barは画面下部にあるページを移動できるアイコンです。

初めてFlutterFlowでアプリのUIを作っていたとき、これを自作していました。
しかし、よく見るとNav Barを自動で用意してくれる仕組みがあります。

Nav Barの表示設定

Nav Barを表示させるには、アプリの設定とページの2つの設定が必要です。

アプリの設定

アプリの設定は、下記のメニューにあります。

Nav Barの設定があり、Show Nav Barをオンにします。それ以外はお好みで設定します。アプリの設定はこれだけです。

ページの設定

ページの設定は、ウィジェットを配置する画面の右側下部にNav-Bar Item Propertiesにあります。これはウィジェットを選択していると表示されません。表示されていない場合、アプリ画面の周りの黒い箇所をクリックして、ウィジェットの選択を解除してください。

Show Nav Barをオンにします。その際、1つのページだけオンにしても表示されないと通知されます。2つ以上のページでオンして表示させます。

表示ができたら、ページ名やアイコンなどを設定してください。

アイコンはMaterialとFont Awesomeの2種類から探せます。Search icons...とあるので検索できるのですが、思うように検索できないようでした。もし、良いものが見つからない場合は、面倒ですがスクロールして探してみてください。これは改善されることを願います。

以上、Nav Barの表示方法の紹介です。

Nav Barが表示されるだけで、アプリの画面がグッと締まる感じがします。最初、自作してすべてのページにコピペしていたのですが、後で自動で表示できることに気がついて愕然としました。表示設定したところ、他のレイアウト設定とバッティングしてアプリ画面が想定通りに表示されなくなり、すべて修正となりました。

しかしながら、デフォルトの表示でもあるため、オリジナルのNav Barを配置したい方は、ぜひ自作してください。