flutter 搭建框架--bottom tab navigat

效果图：

import 'package:flutter/material.dart';
import 'mall.dart';//商城
import 'cart.dart';//购物车
import 'mine.dart';//我的

void main() => runApp(MyHomePage());

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{
  TabController controller;
  @override
  void initState(){
    super.initState();
    controller = new TabController(length: 3, vsync: this);
  }
  @override
  void  dispose(){
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      home: new Scaffold(
        body: new  TabBarView(
          children: <Widget>[
            new MallPage(),
            new CartPage(),
            new MinePage(),
          ],
          controller: controller,
        ),
        bottomNavigationBar: new Material(
          color: Colors.white,//标签栏背景色
          child: new  TabBar(
            tabs: <Widget>[//标签栏的标签组件列表
              new Tab(
                text: '商城',
                icon: new Icon(Icons.store),
              ),
              new Tab(
                text: '购物车',
                icon: new Icon(Icons.shopping_cart),
              ),
              new Tab(
                text: '我的',
                icon: new Icon(Icons.menu),
              ),
            ],
            controller: controller,//控制组件
            labelColor: Colors.deepOrange,//选中市的标签颜色
            unselectedLabelColor: Colors.black45,//为选中时的标签颜色
            indicatorColor: Colors.transparent,//底部指示器的颜色，设置为透明
          ),
        ),
      ),
    );
  }
}