TabBar text jitter problem is analyzed from source code


We usually use these two properties of TabBar to make the font larger when selected. This will shake the text.

    labelStyle: TextStyle(fontSize: 20.0),
    unselectedLabelStyle: TextStyle(fontSize: 16.0),Copy the code

Solution: Comment it out without these two parameters and place Tabbar under the Use of the StatefulWidget. We can solve the jitter problem ourselves by refreshing the widget to toggle the larger text. Below directly on the source code.

class CommonWidgetTabBar extends StatefulWidget {
  @override
  _CommonWidgetTabBarState createState() => _CommonWidgetTabBarState();
}

class _CommonWidgetTabBarState extends State<CommonWidgetTabBar> {
  int tabIndex = 0;  // The index is currently selected
  @override
  Widget build(BuildContext context) {
    return TabBar(
      onTap: (index){
        // Update index whenever TabBar switches
        setState(() {
          tabIndex = index;
        });
      },
      isScrollable: true.// Whether to scroll
      unselectedLabelColor: Colors.black54, // Unselected color
      labelColor: Colors.blue, // Select the color
      / / labelStyle: TextStyle (fontSize: 20.0),
      / / unselectedLabelStyle: TextStyle (fontSize: 16.0),
      tabs: [
        Tab(child: Text('I',style: TextStyle(fontSize: tabIndex == 0 ? 20:16))),// If the current index is 0, the font size is 20
        Tab(child: Text('I',style: TextStyle(fontSize: tabIndex == 1 ? 20:16),)),
        Tab(child: Text('I',style: TextStyle(fontSize: tabIndex == 2 ? 20:16),)),
        Tab(child: Text('I',style: TextStyle(fontSize: tabIndex == 3 ? 20:16),)),
        Tab(child: Text('I',style: TextStyle(fontSize: tabIndex == 4 ? 20:16),)),
        Tab(child: Text('I',style: TextStyle(fontSize: tabIndex == 5 ? 20:16))),,); }}Copy the code

It’s that simple!