【Flutter】BottomNavigationBarに応じてAppBarのテキストをSwitch式で切り替える方法

こんにちは！今回はFlutterで複数の画面をBottomNavigationBarで切り替える際、選択された画面に応じてAppBarのテキストをSwitch式を使用して変更する方法を紹介します。この記事では、main.dart内にStatefulWidgetを作成し、そこにScaffoldウィジェットを配置して実装していきます。

この記事で紹介したコードはGitHubに公開していますので、ぜひそちらも参考にしてください。
https://github.com/gentarokai/switch_sentence

実装の概要

1. StatefulWidgetの作成: main.dartにStatefulWidgetを作成し、アプリの基本構造を構築します。
2. AppBarのテキスト切り替え: 現在選択されている画面に応じて、AppBarに適切なテキストを表示します。
3. BottomNavigationBarの作成: BottomNavigationBarには3つのタブ（Home, Add, Profile）を用意します。
4. サンプル画面の表示: 各タブにはStatelessWidgetを使ってサンプルの画面を表示します。

では、さっそくコードを見ていきましょう！

コード例

以下がmain.dartのコード例です。

import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

import '../new_post/new_post_screen.dart';
import '../posts/post_view.dart';
import '../profile/profile.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _currentIndex = 0;
  final _pages = [
    const PostView(),
    const NewPostScreen(),
    const ProfileScreen(),
  ];

  String _getTitle(L10n l10n) {
    return switch (_currentIndex) {
      0 => l10n.homeTitle,
      1 => l10n.newPostTitle,
      2 => l10n.profileTitle,
      _ => l10n.homeTitle
    };
  }

  @override
  Widget build(BuildContext context) {
    final l10n = L10n.of(context);

    return Scaffold(
      appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          // centerTitle: false,
          title: Text(_getTitle(l10n))),
      body: _pages.elementAt(_currentIndex),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: const Icon(Icons.home),
            label: 'Home',
            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          ),
          BottomNavigationBarItem(
            icon: const Icon(Icons.add),
            label: '投稿',
            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          ),
          BottomNavigationBarItem(
            icon: const Icon(Icons.person),
            label: 'プロフィール',
            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          ),
        ],
        currentIndex: _currentIndex,
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

AppBarのタイトルを切り替える

このサンプルコードでは、選択された画面に応じてAppBarのテキストを動的に切り替えるため、Switch式を使用しています。_getTitleメソッドでは、_currentIndexに基づいて適切なテキストを返します。Switch式を使用することで、コードが読みやすく、管理がしやすくなります。

↓ Swith式に関しては TakehiroKATOさん の記事がわかりやすかったです。
https://qiita.com/TakehiroKATO/items/f8ac420b439851f0c219

BottomNavigationBarの実装

BottomNavigationBarには3つのアイテム（Home, Add, Profile）を定義しています。onTapメソッドを使ってタップされたタブのインデックスを取得し、setStateで_currentIndexを更新します。

終わりに

今回はFlutterでBottomNavigationBarを使用し、画面ごとにAppBarのタイトルを動的に切り替える方法をご紹介しました。Switch式を用いることで、AppBarのタイトルをスッキリと管理できる点がポイントです。参考にしてもらえると嬉しいです！