Left Padding Error in TabBar Flutter Widget

Question

Hello,

Setup:

In a Flutter StatefulWidget, I am attempting to add a TabBar to a SliverAppBar using the bottom parameter.

Problem:

Everything functions well, but I'm encountering an issue with unexpected left padding. The first element in the TabBar, "Tab 1", has a significant gap between the left side of the screen and the start of the first Tab widget. How can I eliminate this padding so that the first widget aligns flush with the far left of the screen?

It's worth noting that the scrolling works perfectly, and the tabs do scroll past this padding and off the screen on the left side. Additionally, there is no extra padding on the right side after I've scrolled all the way to the end. I've included example code and an image for reference.

Any help is greatly appreciated!

Code:

import 'dart:math';
import 'package:flutter/material.dart';

class testScreen extends StatefulWidget {
  const testScreen({super.key});

  @override
  State<testScreen> createState() => _testScreenState();
}

class _testScreenState extends State<testScreen> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  final List<String> tabNames = ['Tab 1', 'Tab 2', 'Tab 3', 'Tab 4', 'Tab 5', 'Tab 6', 'Tab 7', 'Tab 8'];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(
      length: 8,
      initialIndex: 0,
      vsync: this,
    );
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    //final ThemeData theme = Theme.of(context);
    List<Widget> tabs = tabNames
        .map((name) => Container(
              child: Text(name),
              color: getRandomColor(),
            ))
        .toList();

    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: NestedScrollView(
        controller: ScrollController(),
        headerSliverBuilder: (context, value) {
          return [
            SliverAppBar(
              pinned: true,
              floating: true,
              snap: false,
              backgroundColor: Colors.blue.shade300,
              surfaceTintColor: Colors.transparent,
              forceElevated: true,
              title: SizedBox(
                height: kToolbarHeight,
                width: double.maxFinite,
                child: Container(
                  child: Text('Title', style: TextStyle(fontSize: 40)),
                  color: getRandomColor(),
                ),
              ),
              titleSpacing: 0,
              bottom: PreferredSize(
                preferredSize: Size.fromHeight(30),
                child: Container(
                  color: getRandomColor(),
                  child: TabBar(
                    padding: EdgeInsets.all(0),
                    controller: _tabController,
                    isScrollable: true,
                    tabs: tabs,
                  ),
                ),
              ),
            ),
          ];
        },
        body: Container(
          height: 1000,
          color: Colors.white,
        ),
      ),
    );
  }

  Color getRandomColor() {
    return Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256));
  }
}

Enviroment:

 Flutter (Channel beta, 3.17.0-1.0.pre.3, on Microsoft Windows [Version 10.0.19045.3693], locale en-CA)
    • Flutter version 3.17.0-1.0.pre.3 on channel beta at C:\Dev\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 12b47270b7 (7 days ago), 2023-11-27 17:21:11 -0600
    • Engine revision dff66925dc
    • Dart version 3.3.0 (build 3.3.0-91.0.dev)
    • DevTools version 2.29.0

Answer 1

check out TabBar.tabAlignment

Settings it to TabAlignment.start should fix the padding.

tabAlignment: TabAlignment.start,

When there are layout issues, I usually check with the widget inspector and go through the docs. If that is not enough, I check the source code.

FYI. Below is how the padding is calculated.

if (widget.isScrollable) {
  final EdgeInsetsGeometry? effectivePadding = effectiveTabAlignment == TabAlignment.startOffset
    ? const EdgeInsetsDirectional.only(start: _kStartOffset).add(widget.padding ?? EdgeInsets.zero)
    : widget.padding;
  ...
}

const double _kStartOffset = 52.0;