如何自定义Flutter的TabBar？期望样式与实际效果不符求助

先看你代码里的几个核心问题，对应修改后就能实现目标样式：

核心问题&修改点 #

• 同时使用DefaultTabController和自定义_tabController会导致控制器冲突，二选一即可（这里保留自定义控制器，去掉外层的DefaultTabController）
• 外层容器的深色背景色被注释了，需要开启
• 未选中标签的文字颜色没设置，导致和选中色一致
• TabBar默认的底部分割线需要隐藏
• 调整指示器的内边距和TabBar的padding，让选中区域更贴合目标样式

修改后的完整代码 #

// 确保你的Widget是StatefulWidget
class YourTabWidget extends StatefulWidget {
  const YourTabWidget({super.key});

  @override
  State<YourTabWidget> createState() => _YourTabWidgetState();
}

class _YourTabWidgetState extends State<YourTabWidget> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  final int numberTabs = 3;

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

  @override
  void dispose() {
    _tabController.dispose(); // 记得销毁控制器
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 600,
      child: Scaffold(
        backgroundColor: Colors.black, // 匹配目标样式的深色背景
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(35.h),
          child: Container(
            margin: EdgeInsets.symmetric(horizontal: 10.w),
            decoration: const BoxDecoration(
              color: Color(0xFF1C1B20), // 开启深色背景
              borderRadius: BorderRadius.circular(12),
            ),
            child: TabBar(
              controller: _tabController,
              indicatorPadding: const EdgeInsets.symmetric(horizontal: 8, vertical: 5), // 左右加内边距，让指示器更窄
              indicator: const ShapeDecoration(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(5)),
                ),
                color: Color(0xFF4F4E51),
              ),
              labelColor: Colors.white,
              unselectedLabelColor: Colors.grey, // 添加未选中文字颜色
              physics: const NeverScrollableScrollPhysics(),
              labelStyle: const TextStyle(fontSize: 12),
              unselectedLabelStyle: const TextStyle(fontSize: 12), // 统一未选中文字大小
              dividerColor: Colors.transparent, // 隐藏TabBar默认的底部分割线
              tabs: const [
                Tab(text: "Day"),
                Tab(text: "Week"),
                Tab(text: "Month (Soon)"),
              ],
            ),
          ),
        ),
        body: TabBarView(
          controller: _tabController,
          children: const [
            // 对应每个Tab的页面内容
            Center(child: Text("Day Page")),
            Center(child: Text("Week Page")),
            Center(child: Text("Month Page")),
          ],
        ),
      ),
    );
  }
}

关键修改说明 #

1. 移除DefaultTabController：因为你已经自定义了_tabController，同时使用两个控制器会导致状态异常，所以直接用自定义控制器，记得在dispose里销毁它。
2. 开启容器背景色：把color: const Color(0xFF1C1B20)的注释去掉，让TabBar的外层容器有深色背景，匹配目标样式。
3. 添加未选中文字颜色：设置unselectedLabelColor: Colors.grey，让未选中标签和选中标签有区分度。
4. 隐藏分割线：设置dividerColor: Colors.transparent，去掉TabBar默认的底部灰色分割线。
5. 调整指示器内边距：给indicatorPadding加上水平方向的内边距，让选中的指示器宽度比Tab文字略宽，更贴近目标样式。
6. 统一文字样式：添加unselectedLabelStyle，确保未选中文字的大小和选中一致。

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