Flutter TabBar溢出时如何实现自动换行显示？

原生TabBar在宽度不足时只能通过设置isScrollable: true来滚动，要让标签自动换行适配Web宽屏/窄屏场景，我们可以用Wrap组件结合TabController来实现，具体方案如下：

完整实现代码 #

import 'package:flutter/material.dart';

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

  @override
  State<WrapTabBarDemo> createState() => _WrapTabBarDemoState();
}

class _WrapTabBarDemoState extends State<WrapTabBarDemo> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  final List<String> _tabTitles = [
    '首页', '产品中心', '解决方案', '技术文档', '关于我们',
    '联系客服', '帮助中心', '用户反馈', '合作伙伴'
  ];

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('自动换行TabBar'),
        bottom: PreferredSize(
          preferredSize: const Size.fromHeight(60),
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: Wrap(
              spacing: 8,
              runSpacing: 8,
              children: List.generate(_tabTitles.length, (index) {
                return InkWell(
                  onTap: () {
                    _tabController.animateTo(index);
                    setState(() {});
                  },
                  child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                    decoration: BoxDecoration(
                      color: _tabController.index == index
                          ? Theme.of(context).primaryColor
                          : Colors.grey[200],
                      borderRadius: BorderRadius.circular(4),
                    ),
                    child: Text(
                      _tabTitles[index],
                      style: TextStyle(
                        color: _tabController.index == index
                            ? Colors.white
                            : Colors.black87,
                      ),
                    ),
                  ),
                );
              }),
            ),
          ),
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: List.generate(_tabTitles.length, (index) {
          return Center(child: Text('${_tabTitles[index]} 页面'));
        }),
      ),
    );
  }
}

核心逻辑说明 #

• 用Wrap替代原生TabBar：它会根据父容器宽度自动换行，通过spacing和runSpacing控制标签间的水平/垂直间距
• 保留TabController：统一管理标签选中状态和页面切换逻辑，和原生TabBar交互体验一致
• 自定义Tab样式：通过InkWell+Container实现可点击的标签，可按需调整背景色、圆角、文字样式
• 适配AppBar布局：用PreferredSize包裹Wrap，确保它能正确嵌入AppBar底部区域

这个方案完美适配Web端响应式场景，窄屏时自动换行展示所有标签，宽屏时横向排列，无需滚动即可操作。

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