FlutterでBottomAppBarを表示

サンプルはここを確認するとよいと思う。

https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/material/bottom_app_bar_demo.dart

このサンプルではFABの位置やノッチの有無などをカスタマイズできるようにしている関係でなんだかややこしそうに見えるが、やることは非常に単純。

• Scaffold内のbottomNavigationBarにBottomAppBarを渡す
• Scaffold内のfloatingActionButtonLocationでFABの位置を指定
• ノッチの有無はBottomAppBarのhasNotchで指定
• 必要なメニュー等はBottomAppBar内のchildに追加

これだけでBottomAppBarを表示できる。非常に簡単。 BottomAppBar内のアイテムを複数指定したい場合、childなのでRowでくるむなどの工夫が必要。

flutterの公式リポジトリをクローンしてきて、material demoを動かすとどんな動きか確認することができる。

ちなみに公式リポジトリ内のexampleを動かすにはここを見ればよい。

flutterの初期設定を済ませていることを前提として、手っ取り早くexampleを実行するために必要なことをまとめるとこうなる。

• クローンしたあとbinディレクトリにパスを通す（リポジトリ内の最新版flutterを使うため）
• `flutter update-packages`を実行して各種依存パッケージの解決を行う
• IntelliJ IDEAを使っているなら`flutter ide-config --overwrite`を実行することでRun Configurations等の設定をしてくれる
• 後は実行したいexampleをIDEから選んで実行

binディレクトリにパスを通すと、普段使っているflutter（私の環境だと0.3.2）と公式リポジトリのflutter（これ書いてる時点では0.4.4-pre.8）が混じってしまうのだけど、公式リポジトリを触っているときだけ後者を有効にするみたいな設定の仕方ってあるのだろうか。 ありそうな気がするけど私は知らないので、都度パスを追加して対応している。

追記

別にリポジトリをクローンしてこなくてもPlayストアにアプリが公開されていることを知った。 https://play.google.com/store/apps/details?id=io.flutter.demo.gallery 動きを確認するだけならこっちのほうが手っ取り早い。