Use isScrollable: true
and provide width based on your need.
TabBar(
isScrollable: true,
tabs: [SizedBox(width:.)...],)
I got what you want to achieve. You need to set the isScrollable: true
if you want tabs of different sizes. Additionally, to take full spacing controls we will also set the labelPadding
to zero. To render the child with different widths we will simply use the screen size to determine the size.
TabBar(
isScrollable: true,
controller: tabController,
labelPadding: EdgeInsets.zero,
tabs: [1, 2, 3, 4].map((e) {
return SizedBox(
width: (e == 1 ? 0.1 : 0.3) * MediaQuery.of(context).size.width,
child: Tab(
iconMargin: EdgeInsets.zero,
child: Text(
e.toString(),
style: const TextStyle(color: Colors.black),
),
),
);
}).toList(),
)
This code will generate the output you are expecting. You can design the tabs accordingly.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.