技術記事

micomia株式会社の井上です。今回はNav BarとApp Barについて解説していきます。

この二つはアプリ実装に欠かせないものになっているのでぜひご一読ください。

1. Nav Bar

Navigation Bar(略してNav Bar)は主にアプリ全体の画面を切り替えるために使用されます。

Nav BarはApp SettingsでShow Nav BarをONにすることで追加できます。

今の状態だと「Nav Bar requires at least two pages to have "Show on Nav Bar" set. ="Show on Nav Bar"にしている画面が最低2つ存在しないとNav Barは使用できない」というエラーが出ているので2つの画面でShow on Nav Barにします。

2つの画面で「Show this page on the Nav Bar」をONにします。

このままだとどちらの画面も同じアイコンが表示されているので一方をHomeとします。

再度App Settingsの方に戻り、Nav Barの設定を見ていきます。

Nav Bat StyleとしてNav Barは3種類用意されており、Flutter Default Nav Barは現在表示されているものです。

Google Nav Barは少しアニメーションがついているようなNav Barを実装することができます。

Floating Nav Barは浮いているようにできるNav Barです。

下部にあるStylingではNav BarのWidthやColor, Elevationなどを変えることができます。

Nav Button Marginを入れると、画面の端から離れてより浮いているように見せることができます。

2. App Bar

次にApp Barです。App Barは主に画面名の表示、一つ前の画面への遷移で使用されます。

App BarもNav Barと同じくApp Settingsで追加することができます。

FlutterFlow上では4種類選ぶことができます。

Style, Icon, Textの部分では、App Bar自体のHeightやTextやIconのカラー、サイズを設定することができます。

上部にあるResponsive Visibilityでは、例えば右から二つ目のものを×にすると横向きにした時はApp Barを表示させないようにするなどの設定ができます。

3. さいごに

今回はNav BarとApp Barについて解説していきました。

App BarとNav Barは基本的にどのアプリにも欠かせないものになっているのでぜひ本記事を参考にしながら実装してみてください。

本記事の内容を動画で観たい方は以下をご覧ください。

動画でもっと知りたい方はこちら