Flutter自定义底部导航栏

一、原因

之前一直使用（Flutter SDK 1.2.1稳定版），遇到一个很不爽的问题——BottomNavigationBarItem 选中时 title中的文字会放大。有什么设置可以去掉这个放大呢? 国内的APP中很少有navigation item 有动画的！！！

即搜索比首页的字号大，而且切换的时候是有动画的。

二、解决

在BottomNavigationBar的api中根本没有找到对应的设置，于是乎重写了一个Widget，代码如下，仅供参考！

 int _currentIndex = 0;

  Widget _buildBottomNavigationBar(){
    return Container(
      color: Colors.white,
      child: SafeArea(
        child: SizedBox(
          height: 54.0,
          child: Card(
            elevation: 0.0,
            shape: RoundedRectangleBorder(),
            margin: EdgeInsets.all(0.0),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                _buildBottomItem(title: '首页',icon: Icons.home,index: 0),
                _buildBottomItem(title: '搜索',icon: Icons.search,index: 1),
                _buildBottomItem(title: '消息',icon: Icons.message,index: 2),
                _buildBottomItem(title: '我的',icon: Icons.account_circle,index: 3),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildBottomItem({String title,IconData icon, int index}){

    Color _colors = index == _currentIndex ? Colors.blue : Colors.grey;

    return Expanded(
      child: InkResponse(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(icon,color: _colors,),
            Text(
              title,
              style: TextStyle(color: _colors,fontSize: 12.0),
            )
          ],
        ),
        onTap: (){
          _controller.jumpToPage(index);  // PageView 页面跳转
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }

最后将_buildBottomNavigationBar()函数在Scaffold下的bottomNavigationBar属性后面执行就行了。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
       body: ...     // 这部分我用的PageView,就不贴出来了
       bottomNavigationBar:_buildBottomNavigationBar(),
    );
  }