Home > database >  set the width of a button tabBar Flutter
set the width of a button tabBar Flutter

Time:09-09

I have three tabs in my tabBar, a button icon and two texts. I want the icon to be smaller than the texts. But they are all the same width. I didn't find any property that seven this width inside tabBar.

enter image description here

In gray you can see what I wanted to decrease the width, is this possible? Below is my code, where I tried to wrap the tabs in a container but I was not successful.

return TabBar(
  labelColor: Colors.black,
  unselectedLabelColor: Colors.blue,
  indicatorColor: Colors.blue,
  indicatorSize: TabBarIndicatorSize.label,
  tabs: [
    Container(
      color: Colors.purple,
      width: widthScreen * .10,
      child: Tab(
        icon: Icon(
          (CustomIcons.arrow_back),
          size: 30,
        ),
      ),
    ),
    Container(
        color: Colors.amber,
        width: widthScreen * .70,
        child: Tab(text: 'TEST 1')),
    Container(
      color: Colors.red,
      width: widthScreen * .70,
      child: Tab(
        text: 'TEST 2',
      ),
    ),
  ],
);

CodePudding user response:

Include isScrollable: true, on TabBar.

return TabBar(
  isScrollable: true, //this
  labelColor: Colors.black,
  unselectedLabelColor: Colors.blue,
  indicatorColor: Colors.blue,
  • Related