Flutter レイアウトの基本 ——BottomNavigationBar#
背景#
FlutterのBottomNavigationBarは iOS のUITabbarControllerに似ており、ナビゲーションコントローラーの一種で、主にホームページのタブ切り替えに使用されます。
BottomNavigationBarの type 属性のデフォルト値はitemsの数に基づいて決まります；itemsの数が 4 未満の場合、デフォルト値はBottomNavigationBarType.fixedです；itemsの数が 4 以上の場合、デフォルト値はBottomNavigationBarType.shiftingです。
2 つの効果の比較は以下の通りです：左側がBottomNavigationBarType.fixed、右側がBottomNavigationBarType.shifting
常用属性は以下の通りです：
- backgroundColor: 背景色
- currentIndex: 現在選択されているインデックス
- fixedColor: 選択されたアイテムの色
- iconSize: アイコンのサイズ
- items: 子要素
- onTap: クリックイベント
- selectedFontSize: 選択されたフォントサイズ
- selectedItemColor: 選択されたアイコンの色
- selectedLabelStyle: 選択されたラベルのスタイル
- type: アイコンとテキストのスタイル
- unselectedItemColor: 未選択のアイコンの色
- unselectedLabelStyle: 未選択のラベルのスタイル
コードは以下の通りです：
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
@override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'インデックス 0: ホーム',
style: optionStyle,
),
Text(
'インデックス 1: ビジネス',
style: optionStyle,
),
Text(
'インデックス 2: 学校',
style: optionStyle,
)
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar サンプル'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'ホーム'),
BottomNavigationBarItem(
icon: Icon(Icons.business), label: 'ビジネス'),
BottomNavigationBarItem(icon: Icon(Icons.school), label: '学校'),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}
以下のようにも使用できます，
main.dart で、home を BottomNavigationWidget として宣言します。
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter bottomNavigationBar',
theme: ThemeData.light(),
home: BottomNavigationWidget(),
);
}
}
次にbottom_navigation_widget.dartを作成し、内容は以下の通りです：
import 'dart:ffi';
import 'package:flutter/material.dart';
import 'package:flutter_application_1/pages/airplay_screen.dart';
import 'package:flutter_application_1/pages/email_screen.dart';
import 'package:flutter_application_1/pages/home_screen.dart';
import 'package:flutter_application_1/pages/pages_screen.dart';
class BottomNavigationWidget extends StatefulWidget {
_BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
}
class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
final _BottomNavigationColor = Colors.blue;
int _currentIndex = 0;
List<Widget> list = [];
@override
void initState() {
list
..add(HomeScreen())
..add(EmailScreen())
..add(PageScreen())
..add(AirplayScreen());
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: list[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
color: _BottomNavigationColor,
),
label: 'ホーム',
),
BottomNavigationBarItem(
icon: Icon(
Icons.email,
color: _BottomNavigationColor,
),
label: 'メール',
),
BottomNavigationBarItem(
icon: Icon(
Icons.pages,
color: _BottomNavigationColor,
),
label: 'ページ',
),
BottomNavigationBarItem(
icon: Icon(
Icons.airplay,
color: _BottomNavigationColor,
),
label: 'AirPlay',
),
],
currentIndex: _currentIndex,
// type: BottomNavigationBarType.fixed,
onTap: (int index) {
setState(() {
_currentIndex = index;
});
},
),
);
}
}
次に pages ディレクトリを作成し、その中にhome_screen.dart、airplay_screen.dart、email_screen.dart、pages_screen.dartを作成します。
コードは以下の通りです：
/// home_screen.dart
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ホーム'),
),
body: Center(
child: Text('ホーム'),
),
);
}
}
/// airplay_screen.dart
import 'package:flutter/material.dart';
class AirplayScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Airplay'),
),
body: Center(
child: Text('Airplay'),
),
);
}
}
/// email_screen.dart
import 'package:flutter/material.dart';
class EmailScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('メール'),
),
body: Center(
child: Text('メール'),
),
);
}
}
/// pages_screen.dart
import 'package:flutter/material.dart';
class PageScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ページ'),
),
body: Center(
child: Text('ページ'),
),
);
}
}
このように使用し、ホームページの BottomNavigationWidget を別のクラスに分け、items の各クラスを個別に分けることで、修正や使用が容易になります。
参考#
BottomNavigationBar Dev Doc
20 個 Flutter 実例動画チュートリアルで簡単に仕事を始める