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

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

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

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.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'),
      ),
    ];
  }

  // ナビゲーションメニューがタップされた時の処理
  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
  void initState() {
    super.initState();
    // コントローラ作成
    _pageController = PageController(
      initialPage:
          _currentIndex, 
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'スクリーン2',
            ),
          ],
        ),
      ),
     // フッターナビゲーションメニュー
      bottomNavigationBar: BottomNavigationBar(
        // 現在のページインデックス
        currentIndex: _currentIndex,
        // ナビゲーションメニューがタップされた時の処理
        onTap: onTapFooterIcon,
        // ナビゲーションメニューのアイテムリスト
        items: myBottomNavBarItems(),
      ),
    );
  }
}

これでフッターに3ページ分のナビゲーションボタンが設置されました。

参考サイト
apps-gcp.com
flutter.keicode.com
www.virment.com
stackoverflow.com

Yukii

主にプログラミング(Flutter)についての記事を書いています。

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