flutterdartuser-interfaceuitabbar

how to align tabs in tabbar


I need to align tabs in tabbar like this: Tabbar correct First element on the left edge, second on the center, third in the right edge.

But I can align just like this Tabbar incorrect

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(),
            ],
          ),
        )
      ],
    ),
  ),
);


Solution

  • Wrap starting tab like this:

    Align(alignment: Alignment.centerLeft,child: Tab(text: AppLocalizations.of(context)!.products, icon: SvgPicture.asset('assets/svg_icons/saved_tab_icons/products.svg'),),)
    

    and the end tab like:

    Align(alignment: Alignment.centerRight,child: Tab(text: AppLocalizations.of(context)!.looks, icon: SvgPicture.asset('assets/svg_icons/saved_tab_icons/looks.svg'),),)