Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

set the width of a button tabBar Flutter

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.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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',
      ),
    ),
  ],
);

>Solution :

Include isScrollable: true, on TabBar.

return TabBar(
  isScrollable: true, //this
  labelColor: Colors.black,
  unselectedLabelColor: Colors.blue,
  indicatorColor: Colors.blue,
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading