【BottomNavigationBar】フッターで画面切り替えする方法を徹底解説【Flutter】

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'demo',
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key key}) : super(key: key);
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  // 選択中フッターメニューのインデックスを一時保存する用変数
  int selectedIndex = 0;

  // 切り替える画面のリスト
  List<Widget> display = [HomePage(), Notice(), MyPage()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('BottomNavigationBar')),
        body: display[selectedIndex],
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: 'ホーム'),
            BottomNavigationBarItem(
                icon: Icon(Icons.notifications_none), label: 'お知らせ'),
            BottomNavigationBarItem(icon: Icon(Icons.people), label: 'マイページ'),
          ],
          // 現在選択されているフッターメニューのインデックス
          currentIndex: selectedIndex,
          // フッター領域の影
          elevation: 0,
          // フッターメニュータップ時の処理
          onTap: (int index) {
            selectedIndex = index;
            setState(() {});
          },
          // 選択中フッターメニューの色
          fixedColor: Colors.red,
        ));
  }
}

// --------- 切り替える画面 -----------
class HomePage extends StatelessWidget {
  const HomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(child: Text('ホーム'));
  }
}

class Notice extends StatelessWidget {
  const Notice({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(child: Text('お知らせ')),
      color: Colors.red[200],
    );
  }
}

class MyPage extends StatelessWidget {
  const MyPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(child: Text('マイページ')),
      color: Colors.green[200],
    );
  }
}

...
bottomNavigationBar: BottomNavigationBar(
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'ホーム'),
    BottomNavigationBarItem(
        icon: Icon(Icons.notifications_none), label: 'お知らせ'),
    BottomNavigationBarItem(icon: Icon(Icons.people), label: 'マイページ'),
  ],
...

...
// 現在選択されているフッターメニューのインデックス
currentIndex: selectedIndex,
...

▼アロー関数　ーーーーーーーーーーーーーーーーーーーーーーーーー
onTap: () => {
  print('アイコンが押された！'),
  print('アイコンが押された！'),
},

or

※処理が一行の場合ブラケットは省略可能
onTap: () => print('アイコンが押された！'),

▼ブラケット内で処理を書く　ーーーーーーーーーーーーーーーーーーー
onTap: () {
  print('アイコンが押された！');
},

▼voidFunctionを直接指定する　ーーーーーーーーーーーーーーーーー
~~~
void voidFunction() {
  print('アイコンが押された！');
}
~~~
onTap: voidFunction,

...
// フッターメニュータップ時の処理
onTap: (int index) {
  selectedIndex = index;
  setState(() {});
},
...

...
// 選択中フッターメニューの色
fixedColor: Colors.red,
...

...
// フッター領域の影
elevation: 0,
...

...
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'ホーム'),
...