[Widget]BottomNavigationBarで下配置のタブを作る

公開日: 2022-02-13更新日: 2022-02-14

動作環境: Flutter 2.8.1 Dart 2.15.1

アプリでタブを画面下部に配置したいケースはよくあることです。
しかし、Flutterが提供しているTabBarは上配置専用で下に移動させることができません。

今回はBottomNavigationBarを利用して下配置のタブ切り替えを実現する方法を紹介します。

まずはコード全体を掲載します。

lib/main.dart

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'タブバー下配置を試す',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const TabBarScreen(),
    );
  }
}
class TabBarScreen extends StatefulWidget {
  const TabBarScreen({Key? key}) : super(key: key);
  @override
  _TabBarScreenState createState() => _TabBarScreenState();
}
class _TabBarScreenState extends State<TabBarScreen> {
  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('タブバー下配置のサンプル'),
      ),
      body: Center(
        child: Text(
          '$_currentIndex番目の画面',
          style: const TextStyle(fontSize: 40.0),
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'ホーム',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.access_time_sharp),
            label: '通知',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.build),
            label: '設定',
          ),
        ],
        currentIndex: _currentIndex,
        selectedItemColor: Colors.blue,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
          print('$index番目の画面になりました');
        },
      ),
    );
  }
}

ひとつひとつポイントを見ていきましょう。
まず現在選択しているタブの番号を保持するために31行目で_currentIndexの変数を追加しています。
_currentIndex = 0;ということは一番左端のタブが初期表示されます。

次に下配置するタブのコードを見ていきましょう。
以下のコードを見てください。

lib/main.dart

      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'ホーム',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.access_time_sharp),
            label: '通知',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.build),
            label: '設定',
          ),
        ],
        currentIndex: _currentIndex,
        selectedItemColor: Colors.blue,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
          print('$index番目の画面になりました');
        },
      ),

45行目のbottomNavigationBar:はScaffoldのパラメーターです。
ここに下配置のタブに関するコードを書いていいます。

まず、BottomnavigationBarでタブ切り替え用の領域全体を定義します。
その中でitems:のパラメーターにタブごとの設定を追加しています。
タブはBottomNavigationBarItemが該当し、今回は3種類追加しています。

60行目のcurrentIndex:に表示するべきタブの番号を指定します。
ここに_currentIndexを設定することで_currentIndexの中身に追従してタブが切り替わってくれます。

では_currentIndexはどこで変更しているか、というと62行目のonTap:です。
ここでタップ時に受け取るindexのパラメーターにユーザーが今選択したタブの番号が入っています。

あとはそのindexの値を64行目で_currentIndexに設定しています。
ここで値が変わるとその内容が60行目のcurrentIndex:に伝わってタブが切り替わります。

少し戻りますが、タブごとの表示内容は以下のように切り替えしています。
次のコードを見てください。

lib/main.dart

      body: Center(
        child: Text(
          '$_currentIndex番目の画面',
          style: const TextStyle(fontSize: 40.0),
        ),
      ),

今回は簡単に文字列のみが切り替わるようにしています。
タブの切り替えに応じて41行目の文字列が変化します。

本来はここで、タブの番号ごとに画面を表示するためのWidgetがあって、それを適宜切り替える、といった処理を書くことになるでしょう。
BottomnavigationBarは下配置が可能ですが、そのまま実装するだけだとTabBarに比べるとアニメーションの演出が少し貧弱です。
リッチなアニメーションを実装したい場合は追加で工夫が必要ですね。
タブバーを下配置にするときのサンプル

「Widget」のページ

サイトマップ

Flutterの記事

Dartの記事

お問い合わせ

執筆/運営

おかゆ

ツール系アプリの個人開発者です。
このサイトの感想や質問など、お気軽にメッセージください。