Flutter中如何为TabBar未选中标签添加橙色边框？

你遇到的问题是默认Tab组件的布局限制导致边框只包裹文本区域，且TabBar的indicator仅控制选中标签的样式，未选中标签需要自定义样式实现。以下是修正后的代码：

DefaultTabController(
  length: 3,
  child: ListView(
    controller: scrollController,
    children: [
      Builder(
        builder: (context) {
          final tabController = DefaultTabController.of(context)!;
          return TabBar(
            padding: EdgeInsets.all(8),
            isScrollable: true,
            // 仅设置选中标签的橙色背景，移除原border配置
            indicator: BoxDecoration(
              color: Colors.orange,
              borderRadius: BorderRadius.circular(5.0),
            ),
            labelColor: Colors.white,
            unselectedLabelColor: Colors.orange,
            tabs: List.generate(3, (index) {
              final isSelected = tabController.index == index;
              return Container(
                // 设置内边距让容器占满Tab的可点击区域
                padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(5.0),
                  // 选中时隐藏边框，未选中时显示1px橙色边框
                  border: isSelected ? null : Border.all(color: Colors.orange, width: 1),
                ),
                child: Text('Tab${index+1}'),
              );
            }),
          );
        },
      ),
    ],
  ),
);

关键修改说明： #

• 通过Builder获取DefaultTabController实例，动态判断每个标签的选中状态，以此切换边框样式。
• 给自定义标签的Container设置合适的内边距，让边框覆盖整个标签的可点击区域，而非仅文本部分。
• 移除原indicator中的border配置，选中标签仅保留橙色背景，避免样式冲突。

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