【学習メモ：Flutter入門編】BottomNavigationBarについて

これから「Flutter」を勉強していこうと思っている人向けには「メモ」程度で参照してみてください。

■ 本編の内容に関係がない前置きの情報として
「Flutter」のバグで、画面が真っ白になって何も表示されなくなる事象が発生する可能性がある みたいです。
※ 主に古い「Flutter」を利用されている方が対象のようなので、最新版（2024/3/28 時点の物）を利用していたら大丈夫という情報。

【解消方法として】
コマンド入力で以下の順番に実行する事で解消されるとのこと。

1. 「flutter upgrade」で最新版に更新
2. 実行アプリのフォルダ上で「flutter clean」を実行する事でごみ掃除が可能

■ 「BottomNavigationBar（ボトムナビゲーションバー）」とは？
呼び名として「下タブ切替」という機能。

考え方として、メニューがの左側からインデックス番号（index）として「0,1,2,3,4 ..」が定義されている。
※ 「index」番号の最大値はメニューの数によって可変となる。

■ 「BottomNavigationBarItem（ボトムナビゲーションバーアイテム）」
「BottomNavigationBar」に設定するアイテム用に、専用のWidgetを「Flutter」側で用意されており、
「BottomNavigationBarItem」を定義する事で活用可能。

【サンプルコード】

const items = [
  BottomNavigationBarItem(
    icon: Icon(Icons.list),
    label: '一覧',
  ),
  BottomNavigationBarItem(
    icon: Icon(Icons.face),
    label: '会員',
  ),
  BottomNavigationBarItem(
    icon: Icon(Icons.settings),
    label: '設定',
  ),
];

■ 「BottomNavigationBar」の項目説明
主な設定項目として以下が存在する。

• items：定義した「BottomNavigationBarItem」の配列を設定
• backgroundColor：バーの色（背景色）
• selectedItemColor：選択されたアイテムの色
• unselectedItemColor：選択されていないアイテムの色
• currentIndex：現在のインデックス（選択したインデックス）
• onTap：主な処理として 「状態管理」 として、選択（タップ）したインデックス番号を変更（保持）する必要がある

実際に表示される画面イメージは以下のようになる。

■ 状態管理の仕組みについて
前回の学習で「Riverpodの使い方」という学習メモをまとめてみましたが、事前定義で「ProviderScope」を設定しておく必要があります。

void main() {
  const app = MaterialApp(home: Root());
+  const scope = ProviderScope(child: app);
  runApp(scope);
}

最後に

Flutter（Dart言語）に関する最低限の情報を「学習メモ」としてまとめてみました。
内容に誤りがありそうであれば、遠慮なくご指摘いただけますと幸いです。

【学習の参考にした動画】
素敵な解説動画の作成ありがとうございます。
本記事の内容より。動画を見た方が解りやすいと思います。