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{
  @override
  MyTabsState createState() => new MyTabsState();
}

class MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin{
  
  TabController controller;

  @override
  void initState(){
    super.initState();
    controller = new TabController(vsync: this, length: 3);
  }

  @override
  void dispose(){
    controller.dispose();
    super.dispose();
  }

  @override
  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 {

  @override
  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 {

  @override
  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 {

  @override
  Widget build(BuildContext context){
    return new Container(
      child: new Center(
        child: new Icon(Icons.local_pizza, size: 150.0, color: Colors.teal)
      )
    );
  }
}