如何修改Flutter TabBar指示器实现谷歌应用商店同款圆角效果

Flutter 原生 TabBar 组件完全可以实现谷歌应用商店同款圆角指示器效果，不需要额外自定义组件，仅通过配置内置的 indicator 属性即可实现。

你当前代码只配置了基础的指示器重量、颜色属性，默认是直角样式，只需按以下步骤修改即可：

1. 移除 TabBar 配置中的 indicatorWeight、indicatorColor 两个属性
2. 新增 indicator 属性，使用 Flutter 内置的 UnderlineTabIndicator 配置圆角参数

修改后的 TabBar 参考代码如下：

TabBar(
  isScrollable: true,
  // 替换原来的indicatorWeight、indicatorColor配置
  indicator: const UnderlineTabIndicator(
    borderSide: BorderSide(width: 3, color: green),
    // 圆角值可按需调整，和谷歌商店效果匹配即可
    borderRadius: BorderRadius.all(Radius.circular(3)),
  ),
  labelColor: green,
  unselectedLabelColor: grey,
  indicatorSize: TabBarIndicatorSize.label,
  labelStyle: TextStyle(
      fontWeight: FontWeight.bold, fontSize: 16.0),
  tabs: [
    Tab(text: "screen1"),
    Tab(text: "screen2"),
    Tab(text: "screen3"),
    Tab(text: "s"),
  ],
)

如果需要更灵活的指示器样式（比如调整指示器和文字的间距、修改指示器宽度比例等），也可以使用 BoxDecoration 作为 indicator 实现自定义效果，示例如下：

indicator: BoxDecoration(
  color: green,
  borderRadius: BorderRadius.circular(3),
),
// 可搭配indicatorPadding调整指示器的内边距
indicatorPadding: const EdgeInsets.symmetric(horizontal: 8, vertical: 12),

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