移除 Flutter TabBar 底部边框

Question

我正在尝试使用 PreferredSize 创建自定义 TabBar，但我无法将 TabBar 的颜色与我的身体融合，TabBar 和身体之间似乎有一个边界。下面的图片将清楚地向您展示我想要完成的工作。

我试图用大宽度创建一个与主体颜色相同的边框，但它似乎不起作用。这是我的代码：

  Widget _buildAppBar(context) {
return AppBar(
  title: Text(title),
  elevation: 0,
  flexibleSpace: Image.asset(
    'images/motif_batik_01.jpg',
    fit: BoxFit.cover,
    width: 1200,
  ),
  bottom: _buildTabBar(context)
);

}

  Widget _buildTabBar(context) {
return PreferredSize(
  preferredSize: Size.fromHeight(100.0),
  child: Container(
    decoration: BoxDecoration(
      color: Theme.of(context).backgroundColor,
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(50),
        topRight: Radius.circular(50),
      ),
    ),
    padding: EdgeInsets.only(
      top: 50,
      left: 20,
      right: 20,
    ),
    height: 100,
    child: TabBar(
      indicator: BoxDecoration(
        color: Colors.orange, borderRadius: BorderRadius.circular(20)
      ),
      labelStyle: TextStyle(color: Colors.white),
      unselectedLabelColor: Colors.orange,
      tabs: <Widget>[
        Tab(child: Text('A', style: TextStyle(fontSize: 18.0))),
        Tab(child: Text('B', style: TextStyle(fontSize: 18.0))),
      ],
    ),
  )
);

}

编辑说明：我发现如果我的 'preferedSize' 是 40.0 (40.0, 80.0) 的乘法，这条线就会消失，这可能是颤振本身的错误吗？

Answer 1

如果您在应用程序中使用 Material3，事情会变得很糟糕：

ThemeData(
    useMaterial3: true,
    ...
)

那么所有提到的解决方案都不起作用。如果我们阅读以下文档TabBar：

  /// The color of the divider.
  ///
  /// If null and [ThemeData.useMaterial3] is true, [TabBarTheme.dividerColor]
  /// color is used. If that is null and [ThemeData.useMaterial3] is true,
  /// [ColorScheme.surfaceVariant] will be used, otherwise divider will not be drawn.
  final Color? dividerColor;

因此，即使我们做了一些技巧，应用程序也会选择TabBarTheme.dividerColor. 我尝试将其设置为null或 to Colors.Transparent，但没有成功。因此，它引导我尝试使用ColorScheme.surfaceVariant.

解决方案之一是Widget为您创建此主题包装器（父级）Widget：

  /// The color of the divider.
  ///
  /// If null and [ThemeData.useMaterial3] is true, [TabBarTheme.dividerColor]
  /// color is used. If that is null and [ThemeData.useMaterial3] is true,
  /// [ColorScheme.surfaceVariant] will be used, otherwise divider will not be drawn.
  final Color? dividerColor;

瞧：

Answer 2

将分隔线颜色添加到 tabBar 并将颜色添加为透明。

dividerColor: Colors.transparent

Answer 3

将指示器颜色添加到 tabBar 并将颜色添加到透明。

indicatorColor: Colors.transparent

Answer 4

indicator:BoxDecoration() 或者 indicatorColor:Colors.transparent

Answer 5

添加这一行：

`dividerColor: Colors.transparent,`

在 TabBar() 内然后热重载。