Tabs bar in flutter
Implementing tabs bar in flutter is quite simple, Just follow the 4 simple steps:
Step 1. DefaultTabController: Root layout with 3 child, First is 'length' for how many tabs you wants to have, Second is 'initialIndex' to select for a particular tab initially and Third is 'child' contains Scaffold to manage tabs and body.
Step 2. Scaffold: It uses AppBar to show the tabs and other child Body contains TabBarView to show body of selected tab.
Step 3. Appbar: We pass the list of Tab to bottom of AppBar to show the tabs.
Step 4. Body: We pass the list of widgets at the children of app bar view.
Here is the full example-
class NetworkDiagnosis extends StatefulWidget {
@override
_NetworkDiagnosisState createState() => _NetworkDiagnosisState();
}
class _NetworkDiagnosisState extends State<NetworkDiagnosis> {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
initialIndex: 1,
child: Scaffold(
appBar: AppBar(
title: Text("Tabs"),
bottom: TabBar(
tabs: <Widget>[
Tab(text: 'One'),
Tab(text: 'Two'),
Tab(text: 'Three'),
],
),
),
body: TabBarView(
children: <Widget>[
Center(child: Text('One')),
Center(child: Text('Two')),
Center(child: Text('Three')),
],
),
),
);
}
}
@override
_NetworkDiagnosisState createState() => _NetworkDiagnosisState();
}
class _NetworkDiagnosisState extends State<NetworkDiagnosis> {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
initialIndex: 1,
child: Scaffold(
appBar: AppBar(
title: Text("Tabs"),
bottom: TabBar(
tabs: <Widget>[
Tab(text: 'One'),
Tab(text: 'Two'),
Tab(text: 'Three'),
],
),
),
body: TabBarView(
children: <Widget>[
Center(child: Text('One')),
Center(child: Text('Two')),
Center(child: Text('Three')),
],
),
),
);
}
}
ConversionConversion EmoticonEmoticon