Мне нужно выровнять вкладки на панели вкладок следующим образом: Первый элемент на левом краю, второй по центру, третий по правому краю.
Но я могу выровнять вот так
Это мой код:
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(),
],
),
)
],
),
),
);
Оберните стартовую вкладку следующим образом:
Align(alignment: Alignment.centerLeft,child: Tab(text: AppLocalizations.of(context)!.products, icon: SvgPicture.asset('assets/svg_icons/saved_tab_icons/products.svg'),),)
и конечная вкладка типа:
Align(alignment: Alignment.centerRight,child: Tab(text: AppLocalizations.of(context)!.looks, icon: SvgPicture.asset('assets/svg_icons/saved_tab_icons/looks.svg'),),)
Так как виджет Tab
не обеспечивает выравнивание. тогда вам нужно выровнять вручную. например с Container
результат:
TabBar(
tabs: <Widget>[
Container(
alignment: Alignment.centerLeft,
child: Tab(
icon: Icon(Icons.cloud_outlined),
),
),
Container(
alignment: Alignment.center,
child: Tab(
icon: Icon(Icons.beach_access_sharp),
),
),
Container(
alignment: Alignment.centerRight,
child: Tab(
icon: Icon(Icons.brightness_5_sharp),
),
),
],
tabAlignment: TabAlignment.fill,
),