FlutterにおけるBottomNavigationBarについて

概要

BottomNavigationBarとは、画面下部に設置されるボタンメニューのことを指す。
通常ページ遷移に使用される。

見た目

解説

基本的にBottomNavigationBarの働きは、画面下部にUIを提供し、ページインデックスをアプリに渡すのみである。

まず、ページのインデックスを保存する変数を用意する。

int _selectIndex = 0;

次にページに相当するウィジェットを格納するリストを用意する。

List<Widget> _pages = [
	Page1(),
	Page2(),
	Page3(),
];

[Scaffoldウィジェット]に、リストの選択要素をページのインデックス変数としてUIを記述する。

body: _pages[_selectedIndex],

そして、ScaffoldウィジェットにbottomNavigationBarプロパティが存在するので、そこに書く。

bottomNavigationBar: BottomNavigationBar( ... )

itemsプロパティの中に、BottomNavigationBarItemウィジェットを使用して選択アイテムを作成する。

bottomNavigationBar: BottomNavigationBar(
	items: [
		BottomNavigationBarItem(
			icon: Icon(Icons.home),
			label: 'ホーム',
		),
		BottomNavigationBarItem(
			icon: Icon(Icons.person),
			label: 'プロフィール',
		),
	],
)

次にボタンが押された際に遷移できるようにする。
まず、タッチイベントを作成する。
BottomNavigationBarは選択したページのインデックスを渡してくるので、それを変数に格納してsetStateで変更するように記述。

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

そして、currentIndexプロパティでページを指定するので、ここにインデックス変数を指定する。

bottomNavigationBar: BottomNavigationBar(
	items: [
		BottomNavigationBarItem(
			icon: Icon(Icons.home),
			label: 'ホーム',
		),
		BottomNavigationBarItem(
			icon: Icon(Icons.search),
			label: '検索',
		),
		BottomNavigationBarItem(
			icon: Icon(Icons.person),
			label: 'プロフィール',
		),
	],
	currentIndex: _selectedIndex,
	onTap: _onItemTapped,
	),
);

コード例

最後にコード例を示す。

import 'package:flutter/material.dart';
 
class _MyHomePageState extends State<MyHomePage> {
int _selectedIndex = 0;
 
List<Widget> _pages = [
	Page1(),
	Page2(),
	Page3(),
];
 
void _onItemTapped(int index) {
	setState(() {
		_selectedIndex = index;
	});
}
 
@override
Widget build(BuildContext context) {
	return Scaffold(
		appBar: AppBar(
			title: Text('BottomNavigationBarの例'),
		),
		body: _pages[_selectedIndex],
		bottomNavigationBar: BottomNavigationBar(
			items: [
				BottomNavigationBarItem(
					icon: Icon(Icons.home),
					label: 'ホーム',
				),
				BottomNavigationBarItem(
					icon: Icon(Icons.search),
					label: '検索',
				),
				BottomNavigationBarItem(
					icon: Icon(Icons.person),
					label: 'プロフィール',
				),
			],
			currentIndex: _selectedIndex,
			onTap: _onItemTapped,
			),
		);
	}
}
 
class Page1 extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
		return Center(
			child: Text('ホームページ'),
		);
	}
}
 
class Page2 extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
		return Center(
			child: Text('検索ページ'),
		);
	}
}
 
class Page3 extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
		return Center(
			child: Text('プロフィールページ'),
		);
	}
}
 

プロパティ

プロパティ名	概要	備考
items	BottomNavigationBarItemウィジェット	BottomNavigationBarItemウィジェットのリストを指定	アイコンとラベルを持つことができる。
onTap	ユーザーがナビゲーションアイテムをタップしたときに呼び出される関数を指定	この関数は、選択されたアイテムのインデックスを引数として受け取る。
currentIndex	現在選択されているアイテムのインデックスを指定
type	ナビゲーションバーのタイプを指定	BottomNavigationBarType.fixedは、アイテムが常に表示されるタイプ。BottomNavigationBarType.shiftingは、選択されたアイテムが他のアイテムに影響を与えるタイプである。
backgroundColor	ナビゲーションバーの背景色を指定
selectedItemColor	選択されたアイテムの色を指定
unselectedItemColor	非選択状態のアイテムの色を指定
showSelectedItemColor	選択されたアイテムのラベルを表示するかどうかを指定
showUnselectedItemColor	非選択状態のアイテムのラベルを表示するかどうかを指定