Flutterでフッターにページナビを設置する

今回はフッターにページナビを設置してみたいと思います。（スクショのピンク枠の部分）

実装にはBottomNavigationBar Widgetを使いました。

今回は各ページごとにファイルが分かれている状況下で、下層ページでページナビを実装したいと思います。

 
1. 準備
main.dartにナビゲーションルートを設定しておきます。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'タイトル',
      home: FirstScreen(),
      routes: {
        '/screen1': (BuildContext context) =>
            FirstScreen(),
         '/screen2': (BuildContext context) =>
            SecondScreen(),
        '/screen3': (BuildContext context) =>
            ThirdScreen(),
      },
    );
  }
}

2. 下層ページにBottomNavigationBar Widgetを設置します。（抜粋）

class _SecondScreenState extends State<SecondScreen> {

// ページ切り替え用のコントローラを定義
  PageController _pageController;
// 現在のページインデックス
  int _currentIndex = 1; // 初期ページの指定。今回は２番目のページが初期表示したいので_currentIndexを１とする。
// ナビゲーションの遷移先をリスト化
  List<String> _screen = ["/screen1", "/screen2", "/screen3"];

  // ページ下部に並べるナビゲーションメニューの一覧
  List<BottomNavigationBarItem> myBottomNavBarItems() {
    return [
      BottomNavigationBarItem(
        icon: Icon(Icons.[アイコンの指定]),
        title: Text('[アイコンの下に表示されるタイトル]'),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.[アイコンの指定]),
        title: Text('[アイコンの下に表示されるタイトル]'),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.[アイコンの指定]),
        title: Text('[アイコンの下に表示されるタイトル]'),
      ),
    ];
  }

// ページ下部に並べるナビゲーションメニューの一覧
  List<BottomNavigationBarItem> myBottomNavBarItems() {
    return [
      BottomNavigationBarItem(
        icon: Icon(Icons.person_outline),
        title: Text('Input Data'),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.add_circle_outline),
        title: Text('Record'),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.show_chart),
        title: Text('Chart'),
      ),
    ];
  }

  @override
  void initState() {
    super.initState();
    // コントローラ作成
    _pageController = PageController(
      initialPage:
          _currentIndex, 
    );
  }

  @override
  void dispose() {
    // コントローラ破棄
    _pageController.dispose();
    super.dispose();
  }

  onTapFooterIcon(int index) {
    setState(() {
      _currentIndex = index;
    });
   // 遷移
    switch (index) {
      case 0:
        Navigator.of(context).pushNamed(_screen[0]);
        break;
      case 1:
        // Navigator.of(context).pushNamed(_screen[1]);
        break;
      case 2:
        Navigator.of(context).pushNamed(_screen[2]);
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'スクリーン2',
            ),
          ],
        ),
      ),

      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
      // ページ下部のナビゲーションメニュー
      bottomNavigationBar: BottomNavigationBar(
        // 現在のページインデックス
        currentIndex: _currentIndex,
        // onTapでナビゲーションメニューがタップされた時の処理を定義
        onTap: onTapFooterIcon,
        // 定義済のナビゲーションメニューのアイテムリスト
        items: myBottomNavBarItems(),
      ),
    );
  }
}