本ドキュメントでは、FlutterのNavigationBarについて記述する。
NavigationBarとは、画面の下にあるバーのことで、各アイコンをタップすると、そのアイコンに関連した画面が表示される（以下例だと、Bのアイコンをタップしたら、Bと表示されている画面が表示される）
以下に実装を示す。importパッケージはflutterのみ。
import 'package:flutter/material.dart';
class KwNavigationView extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _KwNavigationView();
}
}
class _KwNavigationView extends State<KwNavigationView> with SingleTickerProviderStateMixin {
final bool _mIsRebuildBody = false;
List<String> _mNavigationLabelList = ['A', 'B', 'C'];
List<IconData> _mNavigationIconList = [
Icons.home_rounded,
Icons.chat_bubble_rounded,
Icons.settings_rounded,
];
List<BottomNavigationBarItem> _mNavigationBarItemList;
List<Widget> _mNavigationBodyWidgetList = [
_TmpBodyWidget('A'),
_TmpBodyWidget('B'),
_TmpBodyWidget('C'),
];
int _mNavigationIndex = 0;
@override
void initState() {
_mNavigationBarItemList = List();
for (int i = 0; i < _mNavigationLabelList.length; i++) {
_mNavigationBarItemList.add(_getNavigationBarItem(i));
}
super.initState();
}
BottomNavigationBarItem _getNavigationBarItem(int index) {
return BottomNavigationBarItem(
icon: Icon(_mNavigationIconList[index]),
label: _mNavigationLabelList[index],
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text('Navigation View'),
),
body: _mIsRebuildBody == true
? _mNavigationBodyWidgetList[_mNavigationIndex]
: IndexedStack(
index: _mNavigationIndex,
children: _mNavigationBodyWidgetList,
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items:_mNavigationBarItemList,
currentIndex: _mNavigationIndex,
onTap: (int index) {
setState(() {
_mNavigationIndex = index;
});
}
),
);
}
}
class _TmpBodyWidget extends StatelessWidget {
final String _mLabel;
_TmpBodyWidget(this._mLabel);
@override
Widget build(BuildContext context) {
print("_TmpBodyWidget build $_mLabel");
return Scaffold(
body: Center(
child: Text(
_mLabel,
style: TextStyle(fontSize: 120),
),
),
);
}
}