Flutterでボトムナビゲーションを実装する方法メモ

ボトムナビゲーションって？

画面の下にあるメニューバーのようなものです。
ボタンをいくつか準備しておくことで、画面を切り替えることができるものになります。（便利！）

ボトムナビゲーションの実装方法

ボトムナビゲーションで表示するページの簡単なサンプル

下記のようなページを必要な数だけご準備ください。

import 'package:flutter/material.dart';

class SamplePage1 extends StatelessWidget {
  const NotificationScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('サンプル'),
      ),
      body: Center(child: Text('サンプル'),),
    );
  }
}

ボトムナビゲーション実装！

対象のページをインポートする

import 'xxxxxx/sample1.dart';
import 'xxxxxx/sample2.dart';
import 'xxxxxx/sample3.dart';
import 'xxxxxx/sample4.dart';

配列に入れておく

class _XXXXXXState extends State<XXXXXXX> {
  const pages = [
    SamplePage1(),
    SamplePage2(),
    SamplePage3(),
    SamplePage4()
  ];

ボタンでページを切り替えるための処理を準備する

int selectedIndex = 0;

void bottomItemTapped(int index) {
  setState(() {
    selectedIndex = index;
  });
}

bodyに表示する

body: pages[selectedIndex],
  bottomNavigationBar: BottomNavigationBar(
    currentIndex: _selectedIndex,
    onTap: bottomItemTapped,
 items: const <BottomNavigationBarItem>[
      BottomNavigationBarItem(icon: Icon(Icons.XX), label: 'Sample1'),
      BottomNavigationBarItem(icon: Icon(Icons.XX), label: 'Sample2'),
      BottomNavigationBarItem(icon: Icon(Icons.XX), label: 'Sample3'),
      BottomNavigationBarItem(icon: Icon(Icons.XX), label: 'Sample4'),
    ],
    type: BottomNavigationBarType.fixed,
  )