flutter - 移除 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) 的乘积，那条线就消失了，这会不会是 flutter 本身的错误？

Answer 1

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

indicatorColor: Colors.transparent