【Flutterやろうよ！】初級編その５〜ボトムメニュー〜

こんにちは。
本日は、BottomNavigationBarというのを作って行こうと思います。
日常的にアプリを使っているとよく目にするViewだと思います。
こんなの。

これを今日は作って行きたいと思います。
まずは、基本のコードはこれ。

import 'package:flutter/material.dart';

class Sample05 extends StatefulWidget {
  const Sample05({super.key});

  @override
  State createState() => _State();
}

class _State extends State<Sample05> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('【Flutterやろうよ！】初級編 その５〜ボトムメニュー〜'),
      ),
      body: const Center(
        child: Text(
          'ボトムメニューのサンプルです。',
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'ホーム',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'ビジネス',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: '学校',
          ),
        ],
      ),
    );
  }
}

毎度同じみScaffoldに、bottomNavigationBarという引数が渡せます。
ここにBottomNavigationBar()WIdgetを渡してあげます。
BottomNavigationBar()のitemsにタブとして表示したいアイテムをリストで渡してあげます。
ここでは、ホーム、ビジネス、学校という３つのタブを用意しました。
Iconsには様々なアイコンが揃っていますので、いろいろ試してみてください。
また、BottomNavigationBarItemにも色を変える為の引数がありますので、ここもいろいろいじってどうなるか遊んでみてください！

さて、これだけではタブを切り替えても画面が変わらないですね。
したのタブのボタンをタップしたら画面が変わるようにしていきましょう。

import 'package:flutter/material.dart';

class Sample05 extends StatefulWidget {
  const Sample05({super.key});

  @override
  State createState() => _State();
}

class _State extends State<Sample05> {
  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('【Flutterやろうよ！】初級編 その５〜ボトムメニュー〜'),
      ),
      body: Center(
        child: Text(
          'ボトムメニューのサンプルです。\n$currentIndex番目の画面',
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (index) {
          setState(() {
            currentIndex = index;
          });
        },
        currentIndex: currentIndex,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            activeIcon: Icon(Icons.home, color: Colors.blue),
            label: 'ホーム',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            activeIcon: Icon(
              Icons.business,
              color: Colors.blue,
            ),
            label: 'ビジネス',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            activeIcon: Icon(Icons.school, color: Colors.blue),
            label: '学校',
          ),
        ],
      ),
    );
  }
}

はい、どこが変わったかわかりますか？
まず、int currentIndex = 0;という変数を１つ用意します。
BottomNavigationBar()Widgetに

        onTap: (index) {
          setState(() {
            currentIndex = index;
          });
        },
        currentIndex: currentIndex,

これが追加されています。
onTap(index)タブのボタンがタップされた時に、何番目のタブがタップされたのかを教えてくれる関数です。
ここで、何番目のタブがタップされたのかを先ほど用意したcurrentIndexという変数に代入します。
画面内に「X番目の画面です」と表示する為に、画面を更新する必要があるので、ここではsetState()を使います。
currentIndexには先ほど用意した変数を渡します。

ついでにですが、現在選択されているタブのアイコンを青くするようにしてみました。
ここまで動かせましたでしょうか？