Remove Flutter TabBar bottom border

user_7689819 0
Viewed 15091

I'm trying to create a custom TabBar using PreferredSize, but I can't meld the color of the TabBar with my body, there seems to be a border between the TabBar and the body. The picture below will show you clearly what I'm trying to accomplish.

enter image description here

I have tried to create a border with the same color as the body with large width, but it doesn't seems to work. Here is my code:

  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))),
      ],
    ),
  )
);

}

Edit Notes: I figured out that if my 'preferedSize' is a multiplication of 40.0 (40.0, 80.0) the line disappears, could it be a bug in the flutter itself?

dart flutter
5 Answers

Add indicator color to tabBar and color to transparent.

indicatorColor: Colors.transparent

user_99611190

indicator:BoxDecoration() or indicatorColor:Colors.transparent

user_130997320

whatever you are returning in body, wrap it inside below code. dont forget to close bracekts.

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

Have you tried make the elevation of the AppBar that houses the TabBar to be 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,
          )),
        ],
      ),
    );
user_105303780

añade estas propiedades al 

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