flutter_自定义tabbar的实现记录

实现过程方式借鉴了大佬的方案。与插件，记录一下使用
插件的效果还可以自定义头部，目前只用到了底部导航。
实现的效果如下。

1、在yaml文件中引入

flutter\_custom\_bottom\_tab\_bar:  
  git: https://github.com/panda-boy/flutter\_bottom.git

整个dome文件

`

import 'package:flutter/material.dart';  
import'package:flutter_custom_bottom_tab_bar/eachtab.dart';  
  
class EntryTestDome extends StatefulWidget {  
  @override  
  _EntryTestDomeWidget createState() => _EntryTestDomeWidget();  
}  
  
class _EntryTestDomeWidget extends State with SingleTickerProviderStateMixin {  
  TabController _tabController;  
  int _selectedIndex = 0;  
 var titles = ['审核', '客服','其它','我的'];  
  
  
  @override  
  void initState() {  
    super.initState();  
  _tabController = new TabController(vsync: this, initialIndex: 0, length: titles.length);  
  _tabController.addListener(() {  
      setState(() => _selectedIndex = _tabController.index);  
  print("索引值-> ${_selectedIndex}");  
  });  
  }  
  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      bottomNavigationBar: Container(  
        height: 60, // 设置整个table的高度  
  child: Column(  
          children: [  
            Divider(  
              height: 2, // 设置上边线，  
  ),  
 new TabBar(  
              isScrollable: false,  
  controller: _tabController,  
  indicatorColor: Colors.transparent,  
  labelColor: Colors.red,  
  labelPadding: EdgeInsets.all(0),  
  unselectedLabelColor: Colors.black,  
  tabs: [  
                EachTab(  
                    width: 70,  
  height: 50,  
  padding: EdgeInsets.all(0),  
  icon: Icon(Icons.view_module),  
  text: titles[0],  
  iconPadding: EdgeInsets.fromLTRB(0, 0, 0, 2),  
  textStyle: TextStyle(fontSize: 10),  
  ),  
  EachTab(  
                    width: 70,  
  height: 50,  
  badgeNo: '10',// 需要传入的是字符串的值，设置为空字符串不显示  
  badgeColor: Colors.red,  
  padding: EdgeInsets.all(0),  
  icon: Icon(Icons.contact_phone),  
  text: titles[1],  
  iconPadding: EdgeInsets.fromLTRB(0, 0, 0, 2),  
  textStyle: TextStyle(fontSize: 10)  
                ),  
  EachTab(  
                    width: 70,  
  height: 50,  
  padding: EdgeInsets.all(0),  
  icon: Icon(Icons.border_all),  
  text: titles[2],  
  iconPadding: EdgeInsets.fromLTRB(0, 0, 0, 2),  
  textStyle: TextStyle(fontSize: 10)  
                ),  
  EachTab(  
                    width: 70,  
  height: 50,  
  padding: EdgeInsets.all(0),  
  icon: Icon(Icons.person),  
  text: titles[3],  
  iconPadding: EdgeInsets.fromLTRB(0, 0, 0, 2),  
  textStyle: TextStyle(fontSize: 10)  
                ),  
  
  ],  
  ),  
  ],  
  ),  
  ),  
  
  body: TabBarView(  
        physics: NeverScrollableScrollPhysics(), //设置禁止左右滑动的效果  
  controller: \_tabController,  
  children: \[  
          Home(),  
  Home2(),  
  Home3(),  
  Home4(),  
  ],  
  ),  
  );  
  }  
}  
  
  
  
class Home extends StatefulWidget {  
  @override  
  _HomeState createState() => _HomeState();  
}  
  
class _HomeState extends State {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('aaaa'),  
  ),  
  body: Text('vvvv'),  
  );  
  }  
}  
  
  
class Home2 extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('qqq'),  
  ),  
  body: Text('wwww'),  
  );  
  }  
}  
  
class Home3 extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('qqq'),  
  ),  
  body: Text('wwww'),  
  );  
  }  
}  
  
class Home4 extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('qqq'),  
  ),  
  body: Text('wwww'),  
  );  
  }  
}

`

参考属性。

• text, //tab的文字
• textStyle,//tab文字的样式
• icon, // 图标
• child,// 可以用不用text和child，可以自定义child
• padding,//每个tab的内边距
• width,//宽度
• height,//高度
• color,//背景颜色
• iconPadding,// 图标 padding
• badge, //未读消息的widget
• badgeNo,//未读消息的数量
• badgeColor //未读消息的背景颜色

文章借鉴出处：https://www.jianshu.com/p/a60...