08 Flutter: Tab Navigation

main.dart
import 'package:flutter/material.dart';
import './FirstPage.dart' as first;
import './SecondPage.dart' as second;
import './ThirdPage.dart' as third;
void main() {
runApp(new MaterialApp(
home: new MyTabs()
));
}
class MyTabs extends StatefulWidget{
MyTabsState createState() => new MyTabsState();
}
class MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin{
TabController controller;
void initState(){
super.initState();
controller = new TabController(vsync: this, length: 3);
}
void dispose(){
controller.dispose();
super.dispose();
}
Widget build(BuildContext context){
return new Scaffold(
appBar: new AppBar(title: new Text("Pages"), backgroundColor: Colors.deepOrange,
bottom: new TabBar(
controller: controller,
tabs: <Tab>[
new Tab(icon: new Icon(Icons.arrow_forward)),
new Tab(icon: new Icon(Icons.arrow_downward)),
new Tab(icon: new Icon(Icons.arrow_back))
]
)
),
bottomNavigationBar: new Material(
color: Colors.deepOrange,
child: new TabBar(
controller: controller,
tabs: <Tab>[
new Tab(icon: new Icon(Icons.arrow_forward)),
new Tab(icon: new Icon(Icons.arrow_downward)),
new Tab(icon: new Icon(Icons.arrow_back))
]
)
),
body: new TabBarView(
controller: controller,
children: <Widget>[
new first.First(),
new second.Second(),
new third.Third()
]
)
);
}
}
FirstPage.dart
import 'package:flutter/material.dart';
class First extends StatelessWidget {
Widget build(BuildContext context){
return new Container(
child: new Center(
child: new Icon(Icons.accessibility_new, size: 150.0, color: Colors.brown)
)
);
}
}
SecondPage.dart
import 'package:flutter/material.dart';
class Second extends StatelessWidget {
Widget build(BuildContext context){
return new Container(
child: new Center(
child: new Icon(Icons.favorite, size: 150.0, color: Colors.red)
)
);
}
}
ThirdPage.dart
import 'package:flutter/material.dart';
class Third extends StatelessWidget {
Widget build(BuildContext context){
return new Container(
child: new Center(
child: new Icon(Icons.local_pizza, size: 150.0, color: Colors.teal)
)
);
}
}