I need to align tabs in tabbar like this:
First element on the left edge,
second on the center,
third in the right edge.
But I can align just like this
This is my code:
Expanded(
child: DefaultTabController(
length: 3,
child: Column(
children: [
TabBar(
tabs: [
Tab(
text: AppLocalizations.of(context)!.products,
icon: SvgPicture.asset(
'assets/svg_icons/saved_tab_icons/products.svg'),
),
Tab(
text: AppLocalizations.of(context)!.posts,
icon: SvgPicture.asset(
'assets/svg_icons/saved_tab_icons/posts.svg'),
),
Tab(
text: AppLocalizations.of(context)!.looks,
icon: SvgPicture.asset(
'assets/svg_icons/saved_tab_icons/looks.svg'),
),
],
tabAlignment: TabAlignment.fill,
labelColor: CasaColors.textSearchGrey,
labelStyle:
const TextStyle(fontWeight: FontWeight.w600, fontSize: 12),
indicatorColor: CasaColors.textSearchGrey,
indicatorSize: TabBarIndicatorSize.tab,
indicatorWeight: 1,
//indicator: DotIndicator(),
dividerHeight: 0,
splashFactory: NoSplash.splashFactory,
overlayColor: MaterialStateProperty.resolveWith<Color?>(
(Set<MaterialState> states) {
return states.contains(MaterialState.focused)
? null
: Colors.transparent;
}),
),
const SizedBox(
height: 5,
),
const Expanded(
child: TabBarView(
children: [
ProductsSaved(),
ProductsSaved(),
ProductsSaved(),
],
),
)
],
),
),
);
2
Answers
Wrap starting tab like this:
and the end tab like:
Since
Tab
widget doesnt provide alignment. then you need to align manually. for example withContainer
result: