flutter bottomNavigationBarを固定してページ遷移したい

Question

flutter bottomNavigationBarを固定してページ遷移したい

bottomNavigationBarを固定してのページ遷移について以下を実装しました。

int _selectedIndex = 0;
List<Widget> _pageList = [
  Page1(),
  Page2()
];

@override
widget build(BuildContext context) {
  return Scaffold(
    body: _pageList[_selectIndex],
    bottomNavigationBar: BottomNavigationBar(
      items: <BottomNavigationBarItem> [
        BottomNavigationBarItem(
          icon: ...
          label: ...
        ),
        BottomNavigationBarItem(
          icon: ...
          title ...
        ),
      ],
      currentIndex: _selectedIndex,
      onTap: (int index) {
        setState() {
          _selectedIndex = index;
        };
      }
    ),
  );
}

このコードでbottomNavigationBarは固定できました。しかし、ハードウェアのナビゲーションバーの戻るボタンでページを戻ることができません。

Navigator.of(context).push(Page1());

一方、上記のようにpushしたページであればハードウェアのナビゲーションバーの戻るボタンでページを戻ることができます。

このことは上のコードではページをスタックしておらずsetStateで再描画を行なっており、下のコードではページがスタックされているという違いによります。

上のコードのようにbottomNavigationBarを固定したままハードウェアの戻るボタンを効かせられるようにはどうすればいいでしょうか。

Answer 1

たくさんの方法があります。
ライブラリpersistent_bottom_nav_bar
または
コードで書くタイプ

flutter fixed bottom navigation barで調べたらたくさん出てくると思います。
またgetXなど状態管理のライブラリを使っても書くことができます。

getXを使ったbottomnavigationbarの例

home.dart

stl
final NavController _navController = Get.put(NavController());
bottomNavigationBar: GetBuilder<NavController>(builder: (_)
        =>BottomNavigationBar(
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: "ホーム"),
            BottomNavigationBarItem(icon: Icon(Icons.web), label: "ウェブ"),
            BottomNavigationBarItem(icon: Icon(Icons.share), label: "シェア"),
          ],
          currentIndex: _navController.selectedIndex,
          onTap: _navController.navTap,
          ),
),

navController.dart

class NavController extends GetxController{
  int selectedIndex = 0;

  void navTap(int value) {
    selectedIndex = value;
    update();
  }
}