仿知乎ui实现bottomNavigationBar

import 'package:flutter/material.dart';

import 'index/index.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '高仿知乎',
      home: Index(),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_app/home/home_page.dart';
import 'package:flutter_app/idea/idea_page.dart';
import 'package:flutter_app/index/navigation_icon_view.dart';
import 'package:flutter_app/market/market_page.dart';
import 'package:flutter_app/my/my_page.dart';

import '../global_config.dart';

class Index extends StatefulWidget {
  @override
  _IndexState createState() => _IndexState();
}

class _IndexState extends State<Index>  with TickerProviderStateMixin {
  int _currentIndex=0;
  List<StatefulWidget> _pageList;
  List<NavigationIconView> _navigationViews;
  StatefulWidget _currentPage;


   @override
  void initState() {
    // TODO: implement initState
    super.initState();
    
    _navigationViews=<NavigationIconView>[
      new NavigationIconView(
       new Icon(Icons.assignment),
       Text("首页"),
        this,
     ),
      new NavigationIconView(
        new Icon(Icons.all_inclusive),
        Text("想法"),
        this,
      ),
      new NavigationIconView(
        new Icon(Icons.add_shopping_cart),
        Text("市场"),
        this,
      ),
      new NavigationIconView(
        new Icon(Icons.add_alert),
        Text("通知"),
        this,
      ),

      new NavigationIconView(
        new Icon(Icons.perm_identity),
        Text("我的"),
        this,
      ),

    ];


    for(NavigationIconView view in _navigationViews){
      view.controller.addListener(_rebuild);
    }

    _pageList=<StatefulWidget>[
      new HomePage(),
      new IdeaPage(),
      new MarketPage(),
      new MyPage()
    ];
    _currentPage=_pageList[_currentIndex];
    
  }
  
   void _rebuild(){
     setState(() {});
   }

   @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    for (NavigationIconView view in _navigationViews) {
      view.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: Scaffold(
          body: Center(
             child: _currentPage,

          ),
          bottomNavigationBar: bottomNavigationBar,),
      theme: GlobalConfig.themeData,

    );
  }
}

import 'package:flutter/material.dart';


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

import 'package:flutter/material.dart';

class GlobalConfig{
   static bool dark=true;
   static ThemeData themeData=new ThemeData.dark();
   static Color searchBackgroundColor =Colors.white10;
   static Color cardBackgroundColor = new Color(0xFF222222);
   static Color fontColor = Colors.white30;
}