Tab Bar Tab width customize | Flutter? - flutter

Question

Default the Tabar Tab width are equal.
How i can change each tabbar tab width differently ?
I tried this but not work
TabBar(
controller: _navController,
tabs: [
Expanded(
flex: 30,
child: IconButton(
icon: SvgPicture.asset("assets/svg/home.svg",height: height * .02,),
onPressed: () { },
)),
Expanded(
flex: 40,
child: Center(
child: IconButton(
icon: SvgPicture.asset("assets/svg/user.svg",height: height * .02,),
onPressed: () { },
),
)),
Expanded(
flex: 20,
child: Center(
child: IconButton(
icon: SvgPicture.asset("assets/svg/settings.svg",height: height * .02,),
onPressed: () { },
),
)),
Expanded(
flex: 10,
child: Container()),
],
),
Expecting Result

Answer 1

To have different sizes in tab bar you have to add isScrollable: true. Please try this example
class MyTabbedPage extends StatefulWidget {
const MyTabbedPage({Key? key}) : super(key: key);
#override
State<MyTabbedPage> createState() => _MyTabbedPageState();
}
class _MyTabbedPageState extends State<MyTabbedPage>
with SingleTickerProviderStateMixin {
List<Widget> myTabs = [
SizedBox(
width: 20.0,
child: Tab(text: 'hello'),
),
SizedBox(
width: 70,
child: Tab(text: 'world'),
),
];
late TabController _tabController;
#override
void initState() {
super.initState();
_tabController = TabController(vsync: this, length: myTabs.length);
}
#override
void dispose() {
_tabController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
bottom: TabBar(
controller: _tabController,
tabs: myTabs,
isScrollable: true,
),
),
body: TabBarView(
controller: _tabController,
children: myTabs.map((Widget tab) {
final String label = "Test";
return Center(
child: Text(
'This is the $label tab',
style: const TextStyle(fontSize: 36),
),
);
}).toList(),
),
);
}
}