how to align tabs in tabbar

Question

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

Answer 1

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'),),)

Answer 2

Since Tab widget doesnt provide alignment. then you need to align manually. for example with Container

result:

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,
),