How to align `TabBar` to the left with a custom starting position

Question

I'm currently working on a Flutter app in which I'd like to display the TabBar starting on the left. If an AppBar has a leading property I'd like to indent the starting position of the TabBar to match it. Then on the scroll, it would still pass through and not leave the white area.

This is the code that I have that currently displays a TabBar in the middle of the AppBar:

AppBar(
  bottom: TabBar(
    isScrollable: true,
    tabs: state.sortedStreets.keys.map(
      (String key) => Tab(
        text: key.toUpperCase(),
      ),
    ).toList(),
  ),
);

I didn't quite get this, can you also share the screenshot for the same? — CopsOnRoad, Apr 09 '19 at 14:45

Maks · Answer 1 · 2019-07-05T03:56:25.897

The Flutter TabBar widget spaces out the tabs evenly when the scrollable property of TabBar is set to false, as per the comment in the tabs.dart source code:

// Add the tap handler to each tab. If the tab bar is not scrollable
// then give all of the tabs equal flexibility so that they each occupy
// the same share of the tab bar's overall width.

So you can get a left-aligned TabBar by using:

isScrollable: true,

and if you want to use indicators that are the same width as the Tab labels (eg. as you would by if you set indicatorSize: TabBarIndicatorSize.label) then you may also want to have a custom indicator set like so:

TabBar(
  indicator: UnderlineTabIndicator(
  borderSide: BorderSide(
    width: 4,
    color: Color(0xFF646464),
  ),
  insets: EdgeInsets.only(
    left: 0,
    right: 8,
    bottom: 4)),
  isScrollable: true,
  labelPadding: EdgeInsets.only(left: 0, right: 0),
  tabs: _tabs
    .map((label) => Padding(
      padding:
        const EdgeInsets.only(right: 8),
      child: Tab(text: "$label"),
   ))
   .toList(),
)

Example of what this will look like:

score 20 · Answer 2 · answered Apr 20 '20 at 10:58

You can use Align Widget to align the tabs of the TabBar to left, which will be the child of PreferredSize.

This worked for me:

  bottom: PreferredSize(
    preferredSize: Size.fromHeight(40),
    ///Note: Here I assigned 40 according to me. You can adjust this size acoording to your purpose.
    child: Align(
      alignment: Alignment.centerLeft,
      child: TabBar(
        isScrollable: true,
        tabs: state.sortedStreets.keys.map(
          (String key) => Tab(
              text: key.toUpperCase(),
          ),
        ).toList(),
      ),
    ),
  ),

In case you only need TabBar in body you can remove the PreferredSize Widget.

No, you can not remove the PreferredSize widget because only widgets that implement PreferredSizeWidget can be used as the app bar 'bottom' and 'Align' does not. — JonP, Aug 22 '23 at 13:25

score 12 · Answer 3 · answered May 14 '19 at 09:39

12

Maybe your TabBar isn't filled up the whole horizontal area. What happen if you wrap the TabBar within another Container that expanded the whole width like this.

Container(
  width: double.infinity
  child: TabBar(
    ...
    ...
  )
)

answered May 14 '19 at 09:39

Inquisitor K

683
1
7
19

score 8 · Answer 4 · answered Sep 11 '20 at 14:08

To Align tabbar with same header bar height by default use constant kToolbarHeight

bottom: PreferredSize(
  preferredSize: const Size.fromHeight(kToolbarHeight),
  child: Align(
  alignment: Alignment.centerLeft,
  child: TabBar(/*your code*/),
 ),
),

score 2 · Answer 5 · answered Jul 28 '21 at 06:09

To align tab bar perfect solution here:

   bottom: PreferredSize(
            preferredSize: Size.fromHeight(kToolbarHeight),
            child: Align(
              alignment: Alignment.centerLeft,
              child: TabBar(

                indicatorSize: TabBarIndicatorSize.tab,
                indicatorColor: AppColors.cyan_blue,
                labelColor: AppColors.cyan_blue,
                indicator: UnderlineTabIndicator(
                    borderSide: BorderSide(
                      width: 4.0,
                      color: AppColors.cyan_blue,
                    ),
                insets: EdgeInsets.only(left: 10, right: 110.0)),
                labelStyle: TextStyle(fontSize: 16.0),
                //For Selected tab
                unselectedLabelStyle: TextStyle(fontSize: 12.0),
                isScrollable: true,
                labelPadding: EdgeInsets.symmetric(horizontal: 10.0),
                tabs: [
                  Container(
                    child: Tab(
                      text: "Profile Summary\t\t\t",
                    ),
                  ),
                  Container(
                    child: Tab(
                      text: "Business summary",
                    ),
                  ),

                ],
              ),
            ),
          ),

Please provide a detailed explanation to your answer, in order for the next user to understand your answer better. — Elydasian, Jul 28 '21 at 12:18

Anand · Answer 6 · 2022-09-09T04:40:29.483

1

This will help you kToolbarHeight and Alignment.centerLeft

 bottom: PreferredSize(
          preferredSize: const Size.fromHeight(kToolbarHeight),
          child: Align(
            alignment: Alignment.centerLeft,
            //alignment: AlignmentDirectional.centerStart
            child: TabBar(
              isScrollable: true,
              indicatorColor: Colors.white,
              tabs: _tabs,
              controller: _tabController,
            ),
          ),
        ),

edited Sep 09 '22 at 04:40

answered Aug 04 '22 at 05:16

Anand

4,355
2
35
45

1

use `alignment: AlignmentDirectional.centerStart` for RTL start alignment (left for ltr, right for rtl) – Adnan Sep 08 '22 at 12:36

score 0 · Answer 7 · answered Aug 16 '23 at 06:51

0

This is only fix it

isScrollable: true,
tabAlignment: TabAlignment.start

answered Aug 16 '23 at 06:51

Nagaraj

87
1
8

How to align `TabBar` to the left with a custom starting position

7 Answers7

Linked