🤖

【Flutter】BottomNavigationBar 永続化の最小サンプル作ってみた

Daigo Wakabayashi

2022/07/15に公開

5件

Flutter

tech

はじめに

はじめまして、ダイゴと申します。

Flutter の BottomNavigationBar は、各画面上に新しい画面をスタックさせると、自身が消えてしまう設計になっています。（特に工夫せず公式 Doc のサンプルコードのように実装した場合）

まるさんの記事「Flutter で BottomNavigatorBar を残したまま各画面を遷移させる」を参考に実装を進めていた（とても参考になりました 🙌）のですが、2019 年の記事だったので「今の Flutter ならもう少し短く書けるんじゃないか」と思い、2022 年版の個人的な最小サンプルを作ってみました。

ひとつの参考にして頂けると幸いです。

サンプル

サンプルプロジェクトはこちらです。

環境
- Flutter 3.0.0
- Dart 2.17
依存パッケージ
- flutter_hooks
- pedantic_mono

こんな感じで動きます。

1. 各タブの要素を Enum で定義

まずは各タブの要素を Enum で定義していきます。

今回は

ホーム
タイムライン
設定

という 3 つのタブを用意しています。

import 'package:flutter/material.dart';
import 'package:nested_bottom_navigation_bar/pages/home_page.dart';
import 'package:nested_bottom_navigation_bar/pages/settings_page.dart';
import 'package:nested_bottom_navigation_bar/pages/timeline_page.dart';

enum TabItem {
  home(
    title: 'ホーム',
    icon: Icons.home,
    page: HomePage(),
  ),

  timeline(
    title: 'タイムライン',
    icon: Icons.timeline,
    page: TimelinePage(),
  ),

  settings(
    title: '設定',
    icon: Icons.settings,
    page: SettingsPage(),
  );

  const TabItem({
    required this.title,
    required this.icon,
    required this.page,
  });

  /// タイトル
  final String title;

  /// アイコン
  final IconData icon;

  /// 画面
  final Widget page;
}

Dart 2.17 から Enum の各値に定数を持たせることが出来るようになったので（Enhanced Enum）、今回はそれを使い、各タブに

title（String）
icon（IconData）
page（Widget）

を持たせています。

2.各ページの作成

Enum に対応する各ページ部分です。

ページ名
詳細ページへの遷移ボタン

が表示されているシンプルなページです。

import 'package:flutter/material.dart';
import 'package:nested_bottom_navigation_bar/enums/tab_item.dart';
import 'package:nested_bottom_navigation_bar/pages/detail_page.dart';

class SettingsPage extends StatelessWidget {
  const SettingsPage({super.key});

  @override
  Widget build(BuildContext context) {
    final pageTitle = TabItem.settings.title;
    return Scaffold(
      appBar: AppBar(title: Text(pageTitle)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(pageTitle),
            ElevatedButton(
              onPressed: () {
                Navigator.push<void>(
                  context,
                  MaterialPageRoute<void>(
                    builder: (BuildContext context) => const DetailPage(),
                  ),
                );
              },
              child: const Text('詳細ページへ'),
            ),
          ],
        ),
      ),
    );
  }
}

ちなみに SettingsPage の super コンストラクタの記法も Dart 2.17 から導入された新しい記法です。

class MyWidget extends StatelessWidget {
- const MyWidget({Key? key}) : super(key: key); // これまで
+ const MyWidget({super.key}); // 2.17 以後

3. BottomNav を持つ土台ページ

土台となるこのページで BottomNavigationBar を定義しています。

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:nested_bottom_navigation_bar/enums/tab_item.dart';

final _navigatorKeys = <TabItem, GlobalKey<NavigatorState>>{
  TabItem.home: GlobalKey<NavigatorState>(),
  TabItem.timeline: GlobalKey<NavigatorState>(),
  TabItem.settings: GlobalKey<NavigatorState>(),
};

class BasePage extends HookWidget {
  const BasePage({super.key});

  @override
  Widget build(BuildContext context) {
    // ① useState で選択状態の管理
    final currentTab = useState(TabItem.home);
    return Scaffold(
      body: Stack(
        children: TabItem.values
            .map(
              (tabItem) => Offstage(
                offstage: currentTab.value != tabItem,
                // ② 各ページの Navigator に NavigatorState を持った Key を渡す
                child: Navigator(
                  key: _navigatorKeys[tabItem],
                  onGenerateRoute: (settings) {
                    return MaterialPageRoute<Widget>(
                      builder: (context) => tabItem.page,
                    );
                  },
                ),
              ),
            )
            .toList(),
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: TabItem.values.indexOf(currentTab.value),
        items: TabItem.values
            .map(
              (tabItem) => BottomNavigationBarItem(
                icon: Icon(tabItem.icon),
                label: tabItem.title,
              ),
            )
            .toList(),
        onTap: (index) {
          // ③ 選択済なら第一階層まで pop / 未選択なら currentTab に指定
          final selectedTab = TabItem.values[index];
          if (currentTab.value == selectedTab) {
            _navigatorKeys[selectedTab]
                ?.currentState
                ?.popUntil((route) => route.isFirst);
          } else {
            currentTab.value = selectedTab;
          }
        },
      ),
    );
  }
}