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

Inspect

I didn't quite get this, can you also share the screenshot for the same? – Auricle

Answer 1

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:

Implicative

Answer 2

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.

Mortonmortuary

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. – Weylin

Answer 3

This is only fix it

isScrollable: true,
tabAlignment: TabAlignment.start  

Christianna

Answer 4

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(
    ...
    ...
  )
)

Sikes

Answer 5

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

Oneirocritic

Answer 6

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

                ],
              ),
            ),
          ),

Stheno

Please provide a detailed explanation to your answer, in order for the next user to understand your answer better. – Mariomariology

Answer 7

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

Disinterest

use alignment: AlignmentDirectional.centerStart for RTL start alignment (left for ltr, right for rtl) – Loosing