移除 Flutter TabBar 下边框答案

【问题标题】：Remove Flutter TabBar bottom border移除 Flutter TabBar 下边框
【发布时间】：2019-06-05 17:41:45
【问题描述】：

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

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

  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) 的乘积，那么这条线就会消失，这可能是颤振本身的错误吗？

【问题讨论】：

我很确定边框不是来自TabBar 本身。请显示您在哪里使用_buildTabBar 函数。
@George 我已经编辑了上面显示的代码，您可以查看一下。
顺便删除图片是不行的。
你认为它可能是这个屏幕的主体提供了这个边框吗？ IE。它不是AppBar 的一部分。
@George body 只是一个 DefaultTabController 和一个有颜色的 Container，没有边框。

标签： flutter dart

【解决方案1】：

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

indicatorColor: Colors.transparent

【讨论】：

这是完美的。简单，以后不用担心主题颜色的变化。

【解决方案2】：

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

【讨论】：

如果您可以在 OP 的问题的上下文中添加更多详细信息，那就太好了 :-) 这也将使未来的社区成员更容易找到这篇文章。

【解决方案3】：

无论您在body 中返回什么，都将其包装在下面的代码中。不要忘记关闭括号。

MediaQuery.removePadding(
context: context,
removeTop: true,

【讨论】：

我必须感谢你，因为这真的拯救了我今天的一天！

【解决方案4】：

añade estas propiedades al

TabBar(  indicator: UnderlineTabIndicator(
            insets: EdgeInsets.all(5),
          ),
          indicatorWeight: 0,
          indicatorSize: TabBarIndicatorSize.tab,
          labelPadding: EdgeInsets.all(0), )

【讨论】：

欢迎来到stackoverflow。这个网站只有英文，请翻译您的文字。你也可以加入西班牙语的stackoverflow：es.stackoverflow.com
请注意，indicatorWeight: 0 会抛出错误 --> 必须始终大于 0

【解决方案5】：

您是否尝试过将容纳 TabBar 的 AppBar 的高度设为 0，

final topBar = AppBar(
      elevation: 0.0, <------------ here
      backgroundColor: Colors.white,
      bottom: TabBar(
        indicatorColor: Colors.black,
        indicatorWeight: 2.0,
        indicatorSize: TabBarIndicatorSize.tab,
        tabs: [
          Tab(
              child: Text(
            'Tab one',
            style: headerTextStyle,
          )),
          Tab(
              child: Text(
            'Tab two',
            style: headerTextStyle,
          )),
        ],
      ),
    );

【讨论】：

是的，我做到了，但它只删除了阴影而不是边框。