如何用Flutter的TabBar实现类似Microsoft Edge的标签样式？

我想要在Flutter中创建一个类似Microsoft Edge浏览器标签栏的TabBar，具体需要实现以下效果：

• 类Edge标签设计：
  • 标签需具备独特的背景色或边框，以突出显示。
• 动态交互行为：
  • 标签需根据选中的Tab动态调整尺寸与位置。
  • 切换Tab时标签需有平滑的动画效果。

我目前使用Flutter的TabBar和TabBarView实现标签导航，但不清楚如何实现该标签效果。以下是我当前代码的简化版本：

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      title: const Text('Edge-like TabBar'),
      bottom: TabBar(
        tabs: [
          Tab(text: 'Tab 1'),
          Tab(text: 'Tab 2'),
          Tab(text: 'Tab 3'),
        ],
      ),
    ),
    body: TabBarView(
      children: [
        Center(child: Text('Content 1')),
        Center(child: Text('Content 2')),
        Center(child: Text('Content 3')),
      ],
    ),
  ),
);

已尝试方案 #

• 尝试通过TabBar的indicator属性自定义样式，但它仅影响选中Tab的下划线或背景，而非标签本身。
• 尝试用Stack或Positioned组件叠加自定义标签，但无法实现标签随选中Tab动态移动。
• 考虑使用PageView配合自定义动画，但感觉在此场景下过于冗余。

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