根据一个完整项目学习Flutter—3、底部导航栏

两种方式实现底部导航栏，第一种当时为下面未注释代码，第二种方式为下面注释代码。

class Index extends StatefulWidget {
  @override
  State createState() {
    return new _IndexState();
  }
}

class _IndexState extends State<Index> with TickerProviderStateMixin {
  //TabController controller;

  int _currentIndex = 0;
  List<NavigationIconView> _navigationViews;
  List<StatefulWidget> _pageList;
  StatefulWidget _currentPage;

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

    super.initState();
    _navigationViews = <NavigationIconView>[
      new NavigationIconView(
        icon: new Icon(Icons.assessment),
        title: new Text("首页"),
        vsync: this,
      ),
      new NavigationIconView(
        icon: new Icon(Icons.add_alert),
        title: new Text("通知"),
        vsync: this,
      ),
      new NavigationIconView(
        icon: new Icon(Icons.perm_identity),
        title: new Text("我的"),
        vsync: this,
      )
    ];
    for (NavigationIconView view in _navigationViews) {
      view.controller.addListener(_rebuild);
    }
    _pageList = <StatefulWidget>[
      new HomePage(),
      new Second(),
      new Third(),
    ];
    _currentPage = _pageList[_currentIndex];
  }

  void _rebuild() {
    setState(() {});
  }

  @override
  void dispose() {
    super.dispose();
    for (NavigationIconView view in _navigationViews) {
      view.controller.dispose();
    }

//    controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final BottomNavigationBar bottomNavigationBar = new BottomNavigationBar(
      items: _navigationViews
          .map((NavigationIconView navigationIconView) =>
              navigationIconView.item)
          .toList(),
      currentIndex: _currentIndex,
      fixedColor: Colors.blue,
      type: BottomNavigationBarType.fixed,
      onTap: (int index) {
        setState(() {
          _navigationViews[_currentIndex].controller.reverse();
          _currentIndex = index;
          _navigationViews[_currentIndex].controller.forward();
          _currentPage = _pageList[_currentIndex];
        });
      },
    );

    return new MaterialApp(
      home: new Scaffold(
        body: new Center(
          child: _currentPage,
        ),
        bottomNavigationBar: bottomNavigationBar,
      ),
      theme: _buildThemeData(),
      debugShowCheckedModeBanner: false,//去除右上角Debug标签
    );

//    return new MaterialApp(
//      theme: _buildThemeData(),
//      debugShowCheckedModeBanner: false, //去除右上角Debug标签
//      home: new Scaffold(
//        body: new Center(
//          child: new TabBarView(controller: controller, children: <Widget>[
//            new HomePage(),
//            new Second(),
//            new Third(),
//          ]),
//        ),
//        bottomNavigationBar: new Material(
//          child: new TabBar(
//            controller: controller,
//            tabs: <Widget>[
//              new Tab(
//                text: "首页",
//                icon: new Icon(Icons.assessment),
//              ),
//              new Tab(
//                text: "通知",
//                icon: new Icon(Icons.add_alert),
//              ),
//              new Tab(
//                text: "我的",
//                icon: new Icon(Icons.perm_identity),
//              )
//            ],
//            labelColor: Colors.blue,
//            //tab未被选中时的颜色，设置之后选中的时候，icon和text都会变色
//            unselectedLabelColor: Colors.white,
//            indicatorColor: cardColor,
//          ),
//        ),
//
//      ),
//    );
  }

  ThemeData _buildThemeData() => ThemeData(
        brightness: Brightness.dark,
        fontFamily: 'ProductSans',
        primaryColor: primaryColor,
        accentColor: accentColor,
        canvasColor: backgroundColor,
        cardColor: cardColor,
        dialogBackgroundColor: cardColor,
        dividerColor: dividerColor,
        highlightColor: highlightColor,
      );
}

class NavigationIconView {
  NavigationIconView({Widget icon, Widget title, TickerProvider vsync})
      : item = new BottomNavigationBarItem(
          icon: icon,
          title: title,
        ),
        controller = new AnimationController(
            vsync: vsync, duration: kThemeAnimationDuration);

  final BottomNavigationBarItem item;
  final AnimationController controller;
}

效果图：

2019-03-02更新

网路课程学习之后记录

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart'; // IOS风格
import 'home_page.dart'; 
import 'category_page.dart';
import 'cart_page.dart';
import 'member_page.dart';

class IndexPage extends StatefulWidget {

  _IndexPageState createState() => _IndexPageState();

}

class _IndexPageState extends State<IndexPage> {
  final List<BottomNavigationBarItem> bottomTabs =[
    BottomNavigationBarItem(
      icon: Icon(CupertinoIcons.home),
      title: Text('首页')
    ),
    BottomNavigationBarItem(
      icon: Icon(CupertinoIcons.search),
      title: Text('分类')
    ),
    BottomNavigationBarItem(
      icon: Icon(CupertinoIcons.shopping_cart),
      title: Text('购物车')
    ),
    BottomNavigationBarItem(
      icon: Icon(CupertinoIcons.profile_circled),
      title: Text('会员中心')
    ),
  ];

  final List tabBodies = [
    HomePage(),
    CategroyPage(),
    CartPage(),
    MemberPage()
  ];

  int currentIndex = 0; // 当前选中项 index
  var currentPage; //选中的页面

  @override
  void initState() {
    // TODO: 默认选中项
    currentPage =tabBodies[currentIndex];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(244, 245, 245, 1.0),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed, //样式
        currentIndex: currentIndex,
        items: bottomTabs, // 上面定义的导航的List
        onTap: (index) { // 单击事件（回调传递索引）
          setState(() { //动态组件改变里面的样式
            currentIndex =index;
            currentPage =tabBodies[currentIndex];
          });
        },
      ),
      body: currentPage,
    );
  }
}