Flutter tabbar remove padding

by

Flutter TabBar Remove Padding

To remove the padding from the TabBar widget in Flutter, you can use the following code: 

    
    DefaultTabController(
      length: 3,
      child: TabBar(
        isScrollable: true,
        indicatorPadding: EdgeInsets.zero,
        labelPadding: EdgeInsets.zero,
        tabs: [
          Tab(text: 'Tab 1'),
          Tab(text: 'Tab 2'),
          Tab(text: 'Tab 3'),
        ],
      ),
    )

In the above code, we have used the DefaultTabController widget to handle the tab switching functionality with a length of 3. Inside it, we have a TabBar widget that contains three tabs.

To remove the padding within the TabBar, we set both the indicatorPadding and labelPadding properties to EdgeInsets.zero which overrides the default padding.

With the above code, the TabBar will have no padding between the tabs and the indicator line, and also no padding around the tab labels.

You can also make the TabBar scrollable by setting the isScrollable property to true. This allows the tabs to be horizontally scrollable if there are many tabs.

Leave a comment