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 scroll, it would still pass through and not leave 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(),
  ),
);

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: