Flutter TabBar首个标签左侧存在多余空白问题求助

即使将内外边距都设置为零，Flutter TabBar的第一个标签“Mon”左侧仍会出现多余空白，常规设置外层padding为零无法解决这个问题。

问题原因 #

这个空白来自TabBar组件自身的默认左右内边距，外层容器的padding设置无法覆盖它。

解决方法 #

直接给TabBar添加padding: EdgeInsets.zero属性，即可移除其默认的左右内边距。如果需要调整指示器的位置，还可以配合indicatorPadding属性进行微调。

修改后的完整代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final List<String> daysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Days of the Week'),
      ),
      body: Padding(
        padding: EdgeInsets.zero, 
        child: DefaultTabController(
          length: daysOfWeek.length,
          initialIndex: 0,
          child: Column(
            children: <Widget>[
              Container(
                constraints: const BoxConstraints.expand(height: 50),
                color: Colors.grey[300],
                child: TabBar(
                  isScrollable: true,
                  indicatorColor: Colors.deepPurple,
                  // 添加此行移除TabBar默认内边距
                  padding: EdgeInsets.zero,
                  tabs: daysOfWeek.map((String day) {
                    return Tab(
                      child: Text(
                        day,
                        style: const TextStyle(
                          fontWeight: FontWeight.bold,
                          letterSpacing: 0.5,
                          color: Colors.black,
                        ),
                      ),
                    );
                  }).toList(),
                ),
              ),
              Expanded(
                child: TabBarView(
                  children: daysOfWeek.map((String day) {
                    return DayPage(day: day);
                  }).toList(),
                ),
              ),
            ],
          ),
        ),
          ),
        );
      }
    }

class DayPage extends StatelessWidget {
  final String day;

  const DayPage({required this.day});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Content for $day',
        style: TextStyle(fontSize: 20),
      ),
    );
  }
}

额外说明 #

添加padding: EdgeInsets.zero后，TabBar的默认左右内边距会被完全移除，第一个标签就能和容器左侧对齐。如果指示器位置需要调整，可添加indicatorPadding: EdgeInsets.symmetric(horizontal: 8)这类属性来匹配标签位置。

内容的提问来源于stack exchange，提问作者Peaky Prodigy