本ドキュメントでは、FlutterのNavigationBarについて記述する。
TabBarとは、画面の上にあるバーのことで、各文字列をタップすると、そのアイコンに関連した画面が表示される（以下例だと、Bの文字列をタップしたら、Bと表示されている画面が表示される）
以下に実装を示す。importパッケージはflutterのみ。
import 'package:flutter/material.dart';
class KwTabView extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _KwTabView();
}
}
class _KwTabView extends State<KwTabView> with SingleTickerProviderStateMixin {
final bool _mIsRebuildBody = true;
List<String> _mTabList = ['A', 'B', 'C'];
List<Widget> _mTabBodyWidgetList = [
_TmpBodyWidget('A'),
_TmpBodyWidget('B'),
_TmpBodyWidget('C'),
];
TabController _mTabController;
int _mTabIndex = 0;
@override
void initState() {
_mTabController = TabController(
initialIndex: _mTabIndex, length: _mTabList.length, vsync: this);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text('Tab View'),
bottom: TabBar(
controller: _mTabController,
tabs: _mTabList.map((String tabText) {
return Tab(text: tabText);
}).toList(),
onTap: (int index) {
setState(() {
_mTabIndex = index;
});
},
),
),
body: _mIsRebuildBody == true
? _mTabBodyWidgetList[_mTabIndex]
: IndexedStack(
index: _mTabIndex,
children: _mTabBodyWidgetList,
),
);
}
}
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),
),
),
);
}
}