【Flutter】簡単にフッターメニュータブ作成(BottomNavigationBar)し、フッターメニュータブの切り替えを行う方法を解説

2024年2月14日2024年4月2日

【Flutter】簡単にフッターメニュータブ作成(BottomNavigationBar)し、フッターメニュータブの切り替えを行う方法を解説

いちの

こんばんは〜
弊社ブログに辿り着いていただきありがとうございます！
株式会社メモリアインクのいちのです

この記事を読んでわかること

フッターメニューを簡単に作成できるBottomNavigationBarについて
フッターメニュータブの基本的な作成方法
フッターメニュータブの切り替え方法

開発環境

Dart 3.0.0
Flutter 3.10.0

BottomNavigationBarとは？

概要

BottomNavigationBarは、Flutterで提供されるウィジェットの一つで、画面の下部に位置するナビゲーションバーです。主にアプリ内の主要なナビゲーションリンクを表示するために使用されます。

主な特徴

アイテムのカスタマイズ: BottomNavigationBarは、アイコン(Icon)やテキスト(Text)を含む複数のBottomNavigationBarItem要素を持つことができます。これらの要素は、アプリ内の異なるページや機能に対応します。
タップコールバック: 各アイテムがタップされたときに実行されるコールバックを定義することができます。これを利用して、アイテム選択時に特定のアクションを実行したり、特定のページにナビゲートするなどの処理を行います。
カスタマイズ性: 背景色、アイテムの色、フォントサイズなど、BottomNavigationBarの外観は高度にカスタマイズ可能です。
カスタマイズ性: 背景色、アイテムの色、フォントサイズなど、BottomNavigationBarの外観は高度にカスタマイズ可能です。

フッターメニュータブ作成

フッターメニュータブ（BottomNavigationBar）をFlutterで作成するには、まずBottomNavigationBarウィジェットを使用します。このセクションでは、基本的なフッターメニュータブを作成する方法を見ていきましょう。

サンプルコード

import 'package:flutter/material.dart';

class BottomNavigationBarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('フッターメニュータブを選択してください'),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'ホーム',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.search),
              label: '検索',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: 'マイページ',
            ),
          ],
        ),
      ),
    );
  }
}

解説

BottomNavigationBarウィジェットを使用してフッターメニュータブを作成し、itemsプロパティでタブのアイテムを定義します。
今回はホームタブ、検索タブ、マイページタブの３つを作成してみました
label: ‘ホーム’のようにすることで、フッターメニューの中に文字列を表示させることができます
icon: Icon(Icons.home)で家のアイコンタブにすることができます
icon: Icon(Icons.search)で虫眼鏡のアイコンタブにすることができます
icon: Icon(Icons.person)で人型のアイコンタブにすることができます

動作確認

いちの

それでは実際の動作を見てみましょ〜

【Flutter】簡単にフッターメニュータブ作成(BottomNavigationBar)

ウィジェットについてもっと知りたいという方は、以下個人的に自信作の記事をぜひ！

フッターメニュータブの切り替え

フッターメニュータブを効果的に切り替えるには、選択されたタブに基づいて異なるウィジェットを表示するロジックが必要です。ここでは、_onItemTappedメソッドを通じて、ユーザーのアクションに応じてコンテンツを切り替える方法を紹介します。

サンプルコード

class BottomNavigationBarSwitch extends StatefulWidget {
  @override
  _BottomNavigationBarSwitchState createState() => _BottomNavigationBarSwitchState();
}

class _BottomNavigationBarSwitchState extends State<BottomNavigationBarSwitch> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        // タブに応じて表示するウィジェットを切り替え
        child: IndexedStack(
          index: _selectedIndex,
          children: <Widget>[
            Text('Home Page'),
            Text('Search Page'),
            Text('Profile Page'),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

解説

_selectedIndexは、選択されたタブを追跡するための変数です。
上記サンプルコードは、ユーザーがタブをタップした際に、_selectedIndexを更新し、対応するウィジェットを表示することでフッターメニュータブの切り替えを行なっております
onTapメソッドを使用して、タブがタップされたときの動作（_onItemTappedメソッド）を定義します。

実践的なサンプルコード

それでは、上記で説明したフッターメニュータブの作成と切り替えを組み合わせた実践的なサンプルコードを提示します。コピペで貼り付けるだけでも動くと思いますので、ぜひ動かしてみてください。

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(BottomNavigationBarSwitch());

class BottomNavigationBarSwitch extends StatefulWidget {
  @override
  _BottomNavigationBarSwitchState createState() => _BottomNavigationBarSwitchState();
}

class _BottomNavigationBarSwitchState extends State<BottomNavigationBarSwitch> {
  int _selectedIndex = 0;

  static const List<Widget> _widgetOptions = <Widget>[
    Text('ホーム'),
    Text('検索'),
    Text('マイページ'),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: _widgetOptions.elementAt(_selectedIndex),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'ホーム',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.search),
              label: '検索',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: 'マイページ',
            ),
          ],
          currentIndex: _selectedIndex,
          selectedItemColor: Colors.amber[800],
          onTap: _onItemTapped,
        ),
      ),
    );
  }
}

動作確認

いちの

それでは実際の動作を見てみましょ〜

サイドメニューを簡単に実装し、切り替える方法にもご興味がある読者様。以下の記事がオススメですので、ぜひご一読いただけますと幸いです。

まとめ

いかがでしたでしょうか？今回は、Flutter を使用してフッターメニュータブを作成し、そのタブを切り替える方法について詳細に解説しました。BottomNavigationBarウィジェットを用いることで、ユーザーにフレンドリーなナビゲーション体験を提供することができます。この記事が、読者様のFlutterアプリ開発の一助となれば幸いです。

いちの

自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。

ヘッダータブの作成方法とタブの切り替え方法についてもご興味のある方はこちらの記事がオススメです