How to customize tabbar width in flutter?
TabBar(isScrollable: true)
Makes a scrollable tab bar. it's useful when your tab text content or number of your tabs doesn't fit into display size.
or maybe you can do something like this:
child: TabBar(
tabs: [
Container(
width: 30.0,
child: Tab(text: 'hello'),
),
Container(
child: Tab(text: 'world'),
),
],
)
double width = MediaQuery.of(context).size.width;
double yourWidth = width / 5;
bottom: TabBar(
indicatorColor: Colors.white,
indicatorSize: TabBarIndicatorSize.label,
isScrollable: true,
controller: _tabcontroller,
tabs: <Widget>[
Container(
width: 30,
height: 50,
alignment: Alignment.center,
child: Icon(
Icons.camera_alt,
),
),
Container(
width: yourWidth,
height: 50,
alignment: Alignment.center,
child: Text("CHATS")),
Container(
width: yourWidth,
height: 50,
alignment: Alignment.center,
child: Text("STATUS")),
Container(
width: yourWidth,
height: 50,
alignment: Alignment.center,
child: Text("CALL"))
],
),`
---------------
`
You can add labelPadding
to your TabBar Widget like so:
child: TabBar(
indicatorColor: Colors.white,
labelPadding: EdgeInsets.symmetric(horizontal: 2.0),
....
tabs: <Tab>[
......
]
)
......
Or you can do this (I don't recommend it)
In the material/tabs.dart file, edit this line:
padding: widget.labelPadding ?? tabBarTheme.labelPadding ?? kTabLabelPadding,
with something similar
padding: EdgeInsets.symmetric(horizontal: 2.0),
By default flutter uses kTabLabelPadding
for padding.
Flutter issue here
here's how I solved this problem:
bottom: TabBar(
isScrollable: true,
controller: _tabController,
indicatorColor: Colors.white,
labelPadding: EdgeInsets.symmetric(horizontal: 10.0),
tabs: <Widget>[
Tab(
icon: Icon(Icons.camera_alt),
),
Tab(
text: "CONVERSAS",
),
Tab(
text: "STATUS",
),
Tab(
text: "CHAMADAS",
)
],
)
Just use padding, I think it'll work for every screen size! ... and don't forget:
isScrollable: true