[Flutter] ボトムナビゲーションをBottomNavigationBarで実装してみた

こんにちは、CX事業本部IoT事業部の高橋雄大です。

最近のスマホアプリでは、多くがボトムナビゲーション（画面下部のナビゲーションメニュー）を採用しています。実際に私も利用していて使いやすく感じています。このボトムナビゲーションを、Flutterにデフォルトで組み込まれているMaterial ComponentsのBottomNavigationBarで実装してみたいと思います。

本記事のゴール

次のように画面遷移ができるナビゲーションメニューを実装します。

環境情報

項目	内容
OS	macOS Monterey 12.3 (21E230)
Visual Studio Code	1.66.0
Xcode	13.3 (13E113)
Flutter	2.10.4
Dart	2.16.2

ディレクトリ構成

ソースコードを読みやすくするためにディレクトリを構成します。

lib
├── src
│   ├── screens
│   │   ├── account.dart # アカウント画面
│   │   ├── bookmark.dart # お気に入り画面
│   │   ├── home.dart # ホーム画面
│   │   └── notification.dart # お知らせ画面
│   └── app.dart # ナビゲーションの実装など
└── main.dart

画面を実装

各画面「アカウント画面」「お気に入り画面」「ホーム画面」「お知らせ画面」を実装します。

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('アカウント'),
      ),
      body: const Center(
          child: Text('アカウント画面', style: TextStyle(fontSize: 32.0))),
    );
  }
}

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('お気に入り'),
      ),
      body: const Center(
          child: Text('お気に入り画面', style: TextStyle(fontSize: 32.0))),
    );
  }
}

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ホーム'),
      ),
      body:
          const Center(child: Text('ホーム画面', style: TextStyle(fontSize: 32.0))),
    );
  }
}

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('お知らせ'),
      ),
      body:
          const Center(child: Text('お知らせ画面', style: TextStyle(fontSize: 32.0))),
    );
  }
}

ナビゲーションを実装

Material ComponentsのBottomNavigationBarでボトムナビゲーションを実装します。onTapでナビゲーションのタップを検知、対象項目のindexを取得して画面を切り替えているところが肝になります。

import 'package:flutter/material.dart';

import 'screens/account.dart';
import 'screens/bookmark.dart';
import 'screens/home.dart';
import 'screens/notification.dart';

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyStatefulWidget(),
    );
  }
}

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

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  static const _screens = [
    HomeScreen(),
    BookmarkScreen(),
    NotificationScreen(),
    AccountScreen()
  ];

  int _selectedIndex = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: _screens[_selectedIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _selectedIndex,
          onTap: _onItemTapped,
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(icon: Icon(Icons.home), label: 'ホーム'),
            BottomNavigationBarItem(icon: Icon(Icons.favorite), label: 'お気に入り'),
            BottomNavigationBarItem(
                icon: Icon(Icons.notifications), label: 'お知らせ'),
            BottomNavigationBarItem(icon: Icon(Icons.person), label: 'アカウント'),
          ],
          type: BottomNavigationBarType.fixed,
        ));
  }
}

import 'package:flutter/material.dart';

import 'src/app.dart';

void main() {
  runApp(const MyApp());
}

動作確認

画面下部にナビゲーションが表示されて、タップすると画面が切り替わることが確認できます。

まとめ

既存のコンポーネントを利用することで、簡単にボトムナビゲーションを実装することが出来ました。Flutterには他にも多くのコンポーネントが用意されているので、UIの実装には困らなそうです。Flutter Galleryでサンプルとソースコードを見ることが出来ます。

参考資料

• BottomNavigationBar class - material library - Dart API