[Flutter]BottomNavigationBar(ボトムナビゲーションバー)を固定表示(fixed show)するには？

どうも、ちょげ(@chogetarou)です。

BottomNavigationBarを固定表示する方法を紹介します。

方法
使用例
まとめ

方法

BottomNavigationBarを固定表示するには、「persistent_bottom_nav_bar」パッケージを使います。

まず、pubspec.yamlファイルでパッケージを導入します。

dependencies:
  persistent_bottom_nav_bar: ^4.0.2

そして、該当ファイルでパッケージをインポートします。

import 'package:persistent_bottom_nav_bar/persistent-tab-view.dart';

次に、PersistentTabViewを用意します。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PersistentTabView(
        context,
      )
    );
  }

最後に、PersistentTabViewの引数「screens」に表示する画面のリスト、引数「items」にタブをPersistentBottomNavBarで指定します。

//表示する画面のリスト 
 var _pages = <Widget>[
    Page1(),
    Page2(),
    Page3(),
    ・・・
  ];  

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PersistentTabView(
        context,
        screens: _pages, //表示する画面の設定
        items: [
          //タブ
          PersistentBottomNavBarItem(
            icon: Icon(Icons.settings),
            activeColorPrimary: /*選択時の色*/,
            inactiveColorPrimary: /*非選択時の色*/,
          ),
          PersistentBottomNavBarItem(
            icon: Icon(Icons.settings),
            activeColorPrimary: /*選択時の色*/,
            inactiveColorPrimary: /*非選択時の色*/,
          ),
          PersistentBottomNavBarItem(
            icon: Icon(Icons.settings),
            activeColorPrimary: /*選択時の色*/,
            inactiveColorPrimary: /*非選択時の色*/,
          ),
          ~画面の数だけ用意~
        ],
      ),
    );
  }

これでBottomNavigationBarを固定表示することが出来ます。

パッケージを使わなくても、BottomNavigationBarを固定表示する事はできます。

方法を簡単に説明すると、ウェジェットツリーのBottomNavigationBarとNavigatorの位置を変えます。

BottomNavigationBarをNavigatorの上に配置すれば、画面遷移がBottomNavigationBar内で行われるようになります。

Flutter Case Study: Multiple Navigators with BottomNavigationBar

Today we’re going to look at navigation in Flutter.

出来るとは言っても少し複雑なので、パッケージを使った方が楽です。

使用例

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  var _pages = <Widget>[
    SettingsPage(),
    Container(
      child: Text('Home'),
      alignment: Alignment.center,
      color: Colors.lightBlue,
    ),
    Container(
      child: Text('Share'),
      alignment: Alignment.center,
      color: Colors.pink.withOpacity(0.5),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PersistentTabView(
        context,
        screens: _pages,
        items: [
          PersistentBottomNavBarItem(
            icon: Icon(Icons.settings),
            activeColorPrimary: Colors.pink,
            inactiveColorPrimary: Colors.blue,
          ),
          PersistentBottomNavBarItem(
            icon: Icon(Icons.home),
            activeColorPrimary: Colors.pink,
            inactiveColorPrimary: Colors.blue,
          ),
          PersistentBottomNavBarItem(
            icon: Icon(Icons.share),
            activeColorPrimary: Colors.pink,
            inactiveColorPrimary: Colors.blue,
          ),
        ],
        navBarStyle: NavBarStyle.style6,//表示スタイル
        backgroundColor: Colors.white,//背景色
        decoration: NavBarDecoration(
         //枠線
          border: Border.all(
            width: 1,
            color: Colors.grey,
          ),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextButton(
          onPressed: () => Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => Page2(),
            ),
          ),
          child: Text('Push Detail'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        alignment: Alignment.center,
        child: Text(
          'Detail',
        ),
        color: Colors.yellow.withOpacity(0.5),
      ),
    );
  }
}