skip to Main Content

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

2

Answers


  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'),),)
    
    Login or Signup to reply.
  2. Since Tab widget doesnt provide alignment. then you need to align manually. for example with Container

    result:

    enter image description here

    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,
    ),
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search