This chapter summarizes some of the problems encountered using TabBar in the Flutter project.

TabBar ununderscores

TabBar comes with underscores. To cancel the TabBar, set indicator to the new BoxDecoration

TabBar(
        indicator: const BoxDecoration(),
        ....
    )
Copy the code

The bottom bars of the iPhone X series overlap

When the TabBar is placed at the bottom as the bottomNavigationBar, it will be covered by the bottom bar of iPhoneX. The solution is to use SafeArea space to wrap the TabBar

@override
  Widget build(BuildContext context) {
    returnScaffold( ..... BottomNavigationBar: Container(Child: SafeArea(Child: TabBar(controller: controller,.....) ,),),); }Copy the code

Custom Tab icon click to change

If the Tab Icon is an Icon, it has the effect of clicking the Icon. However, if you use a custom Image, you need to use setState to manage the resources referenced by the Image to achieve its effect. The whole code is as follows

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { TabController controller; // Bottom navigation controller int _currentIndex = 0; // Select position String tab1Res; //Tab1 image resource String tab2Res; //Tab2's image resource @override voidinitState() { super.initState(); // Initialize the default image resource tab1Res ='assets/images/ic_groups_activated.png';
    tab2Res = 'assets/images/ic_me.png'; controller = TabController(length: 2, vsync: this); //TabBar listener controller.addListener(() => _onTabChanged()); } @override Widget build(BuildContext context) {returnScaffold( ..... BottomNavigationBar: Container(height: 55, decoration: BoxDecoration(color: Colors. White, boxShadow: [BoxShadow(color: const color (0xFFd0d0d0), blurRadius: 1.0)]), child: controller, tabs: [ Tab( text:"Tab1",
                  icon: Image.asset(tab1Res, width: 30, height: 30)),
              Tab(
                  text: "Tab2", icon: Image.asset(tab2Res, width: 30, height: 30)), ], ), ), ), ); } /* Bottom navigation click event */_onTabChanged() {
    if (controller.indexIsChanging) {
      if (this.mounted) {
        this.setState(() {
          switch (controller.index) {
            case 0:
              tab1Res = 'assets/images/ic_groups_activated.png';
              tab2Res = 'assets/images/ic_me.png';
              break;
            case 1:
              tab1Res = 'assets/images/ic_groups.png';
              tab2Res = 'assets/images/ic_me_activated.png';
              break; } _currentIndex = controller.index; }); }}}}Copy the code

Listen for TabBar clicks to see if it is a position change and if the component is mounted

Controller listeners not only listen for clicks, but also listen for Axis changes and so on, requiring double judgment

/* Bottom navigation click event */_onTabChanged() {
    if(controller. IndexIsChanging) {/ / judge whether selected location changeifThis.setstate (() {switch (controller.index) {// Check whether the component is mounted.case 0:
              tab1Res = 'assets/images/ic_groups_activated.png';
              tab2Res = 'assets/images/ic_me.png';
              break;
            case 1:
              tab1Res = 'assets/images/ic_groups.png';
              tab2Res = 'assets/images/ic_me_activated.png';
              break; } _currentIndex = controller.index; }); }}}Copy the code

You can follow my wechat public account, thank you