[Flutter]BottomNavigationBarをBottomAppBarで実装する方法

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

BottomNavigationBarをBottomAppBarで実装する方法を紹介します。

方法
使用例
まとめ

方法

BottomNavigationBarをBottomAppBarで実装するには、RowウェジェットとIconButtonを使います。

まず、Scaffoldの引数「bottomNavigationBar」にBottomAppBarを指定します。

次に、BottomAppBarの引数「child」にRowウェジェットを指定します。

Rowウェジェットの引数「mainAxisAlignment」には、MainAxisAlignment.spaceEvenlyを指定します。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomAppBar(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [],
        ),
      ),
    );
  }

最後に、Rowウェジェットの引数「children」に、タブを指定します。

タブは、IconButtonを使って実装します。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: _pages,
      ),
      bottomNavigationBar: BottomAppBar(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            IconButton(
              onPressed: () {
                setState(() {
                  _currentIndex = 0;
                });
              },
              icon: Icon(/*アイコン*/),
            ),
            IconButton(
              onPressed: () {
                setState(() {
                  _currentIndex = 1;
                });
              },
              icon: Icon(/*アイコン*/),
            ),
            IconButton(
              onPressed: () {
                setState(() {
                  _currentIndex = 2;
                });
              },
              icon: Icon(/*アイコン*/),
            ),            
            ・・・
          ],
        ),
      ),
    );
  }

IconButtonの引数「icon」にはアイコン、引数「onPressed」ではインデックスの変更をします。

これでBottomNavigationBarをBottomAppBarで実装することが出来ます。

使用例

以下は、使用例です。

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

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

class _HomeState extends State<Home> {
  var _currentIndex = 1;

  var _pages = [
    Container(
      child: Text('Settings'),
      alignment: Alignment.center,
      color: Colors.green[100],
    ),
    Container(
      child: Text('Home'),
      alignment: Alignment.center,
      color: Colors.blue[100],
    ),
    Container(
      child: Text('Favorite'),
      alignment: Alignment.center,
      color: Colors.pink[100],
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: _pages,
      ),
      bottomNavigationBar: BottomAppBar(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            IconButton(
              onPressed: () {
                setState(() {
                  _currentIndex = 0;
                });
              },
              icon: Icon(
                Icons.settings,
                color: _currentIndex == 0 ? Colors.blue : Colors.grey,
              ),
            ),
            IconButton(
              onPressed: () {
                setState(() {
                  _currentIndex = 1;
                });
              },
              icon: Icon(
                Icons.home,
                color: _currentIndex == 1 ? Colors.blue : Colors.grey,
              ),
            ),
            IconButton(
              onPressed: () {
                setState(() {
                  _currentIndex = 2;
                });
              },
              icon: Icon(
                Icons.favorite,
                color: _currentIndex == 2 ? Colors.blue : Colors.grey,
              ),
            ),
          ],
        ),
      ),
    );
  }
}