この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは、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
画面を実装
各画面「アカウント画面」「お気に入り画面」「ホーム画面」「お知らせ画面」を実装します。
lib/src/screens/account.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))),
);
}
}
lib/src/screens/bookmark.dart
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))),
);
}
}
lib/src/screens/home.dart
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))),
);
}
}
lib/src/screens/notification.dart
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を取得して画面を切り替えているところが肝になります。
lib/src/app.dart
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,
));
}
}
lib/main.dart
import 'package:flutter/material.dart';
import 'src/app.dart';
void main() {
runApp(const MyApp());
}
動作確認
画面下部にナビゲーションが表示されて、タップすると画面が切り替わることが確認できます。
まとめ
既存のコンポーネントを利用することで、簡単にボトムナビゲーションを実装することが出来ました。Flutterには他にも多くのコンポーネントが用意されているので、UIの実装には困らなそうです。Flutter Galleryでサンプルとソースコードを見ることが出来ます。