How to remove bottom from default tab bar

Question

I need to add a tab bar without an app bar and I got a solution from StackOverflow to use flexible space and it is working but it makes additional unwanted space in tab bar bottom
How to remove this or hide this?

My full code

import 'package:flutter/material.dart';

class TemplesListingWithTabMode extends StatefulWidget {
  TemplesListingWithTabMode({Key key}) : super(key: key);

  @override
  _TemplesListingWithTabModeState createState() =>
      _TemplesListingWithTabModeState();
}

class _TemplesListingWithTabModeState extends State<TemplesListingWithTabMode> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[

        Container(
          height: MediaQuery.of(context).size.height-kToolbarHeight-kMaterialListPadding.top-kTabLabelPadding.top,
          child: DefaultTabController(
            length: 2,
            child: Scaffold(
              appBar: AppBar(
                backgroundColor: Colors.white,
                flexibleSpace: TabBar(
                    indicatorColor: Colors.pink,
                    tabs: [
                  Tab(
                    child: Text("ALL",style: TextStyle(color: Colors.pink),),
                  ),Tab(
                    child: Text("Favorites",style: TextStyle(color: Colors.pink),),
                  )
                ]),
              ),
              body  : Container(
                color: Colors.grey,
                child: TabBarView(

                    children: [
                      ListView.builder(
                          itemCount: 100,
                          itemBuilder: (context,index){
                        return Container(
                          child: Center(
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text("i am $index"),
                            ),
                          ),
                        );
                      }),
                      ListView.builder(
                          itemCount: 5,
                          itemBuilder: (context,index){
                            return Container(
                              child: Center(
                                child: Padding(
                                  padding: const EdgeInsets.all(8.0),
                                  child: Text("i am $index"),
                                ),
                              ),
                            );
                          })
                ]),
              ),
            ),
          ),
        )
      ],
    );
  }
}

The solution provided by @Darshan is not solved my issue and the solution is
Wrap TabBar in SafeArea widget. and the result is

How to remove this small bottom from appbar?

Answer 1

The reason is AppBar have its size + status bar size. There are multiple ways fix this. As other answer mentioned, simple way is to add SafeArea.

And note that even after you will get ugly little space under two tabs.

To solve that you can use PreferredSize (there are other ways for this also).

Code for the above screenshot:

class _TemplesListingWithTabModeState extends State<TemplesListingWithTabMode> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: SafeArea(
        child: Scaffold(
          appBar: PreferredSize(
            preferredSize: Size(double.infinity, 60),
            child: TabBar(
                indicatorColor: Colors.pink,
                tabs: [
                  Tab(
                    child: Text("ALL",style: TextStyle(color: Colors.pink),),
                  ),Tab(
                    child: Text("Favorites",style: TextStyle(color: Colors.pink),),
                  )
                ]),
          ),
          body  : Container(
            color: Colors.grey,
            child: TabBarView(

                children: [
                  ListView.builder(
                      itemCount: 100,
                      itemBuilder: (context,index){
                        return Container(
                          child: Center(
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text("i am $index"),
                            ),
                          ),
                        );
                      }),
                  ListView.builder(
                      itemCount: 5,
                      itemBuilder: (context,index){
                        return Container(
                          child: Center(
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text("i am $index"),
                            ),
                          ),
                        );
                      })
                ]),
          ),
        ),
      ),
    );
  }
}

Answer 2

Wrap TabBar in SafeArea widget. It adds the necessary padding to the child widget which in your case, minimizes the space you are seeing. Working code below:

child: Scaffold(
              appBar: AppBar(
                backgroundColor: Colors.white,
                flexibleSpace: SafeArea(
                child: TabBar(
                    indicatorColor: Colors.pink,
                    tabs: [
                  Tab(
                    child: Text("ALL",style: TextStyle(color: Colors.pink),),
                  ),Tab(
                    child: Text("Favorites",style: TextStyle(color: Colors.pink),),
                  )
                ]),)
              ),

Hope this answers your question.

Answer 3

You can create your appbar by extending AppBar

class MyAppBar extends AppBar {
  MyAppBar({PreferredSizeWidget child, Color backgroundColor})
      : super(bottom: child, backgroundColor: backgroundColor);

  @override
  Size get preferredSize => bottom.preferredSize;
}

class TemplesListingWithTabMode extends StatefulWidget {
  TemplesListingWithTabMode({Key key}) : super(key: key);

  @override
  _TemplesListingWithTabModeState createState() =>
      _TemplesListingWithTabModeState();
}

class _TemplesListingWithTabModeState extends State<TemplesListingWithTabMode> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: MyAppBar(
          backgroundColor: Colors.white,
          child: TabBar(indicatorColor: Colors.pink, tabs: [
            Tab(
              child: Text(
                "ALL",
                style: TextStyle(color: Colors.pink),
              ),
            ),
            Tab(
              child: Text(
                "Favorites",
                style: TextStyle(color: Colors.pink),
              ),
            )
          ]),
        ),
        body: Container(
          color: Colors.grey,
          child: TabBarView(children: [
            ListView.builder(
                itemCount: 100,
                itemBuilder: (context, index) {
                  return Container(
                    child: Center(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text("i am $index"),
                      ),
                    ),
                  );
                }),
            ListView.builder(
                itemCount: 5,
                itemBuilder: (context, index) {
                  return Container(
                    child: Center(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text("i am $index"),
                      ),
                    ),
                  );
                })
          ]),
        ),
      ),
    );
  }
}

Answer 4

import 'package:bubble_tab_indicator/bubble_tab_indicator.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';



class AppBarrTest extends StatefulWidget {
  @override
  _AppBarrTestState createState() => _AppBarrTestState();
}

class _AppBarrTestState extends State<AppBarrTest>with SingleTickerProviderStateMixin {

  int index = 0;
  TabController _controller;

  @override
  void initState() {
    _controller = new TabController(length: 2, vsync: this);
    _controller.addListener(() {
      setState(() {});
    });
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }


  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
             flexibleSpace: fun_Appbar(),
          bottom: PreferredSize(
            preferredSize: Size.fromHeight(50),
            child: Column(
              children: <Widget>[
                Card(
                  shape: Border.all(color: Colors.blue),
                  color: Colors.white,
                  child: fun_tabBar(20),
                ),
              ],
            ),
          ),

      ),
      ),
    );
  }

  fun_Appbar(){
    double h = MediaQuery.of(context).size.height;
    return Container(

      height: 50,

      child: Center(
        child: Text(
          "Messages",
          style: TextStyle(
            fontSize: 22,
            color: Colors.white,
            letterSpacing: 2.0,
            fontFamily: 'Nunito',
          ),
        ),
      ),
    );

  }
  fun_tabBar(double fontSize){
    return TabBar(
      controller: _controller,

      //indicatorWeight: 20,
      indicatorSize: TabBarIndicatorSize.label,
      labelPadding: EdgeInsets.only(left: 0, right: 0),
      dragStartBehavior: DragStartBehavior.start,
      unselectedLabelColor: Colors.black,

      indicatorColor: Colors.red,
      indicator: new BubbleTabIndicator(
        indicatorHeight: 40.0,
        indicatorColor: Color(0xFF343193),
        //padding: EdgeInsets.all(20),
        tabBarIndicatorSize: TabBarIndicatorSize.tab,
        indicatorRadius: 30,
      ),

      tabs: <Widget>[
        Tab(
          child: Container(
            alignment: Alignment.center,

            child: Text(
              "Inbox",
              style: TextStyle(
                fontFamily: 'Nunito',
                fontSize: fontSize,
              ),
            ),
          ),
        ),
        Tab(
          child: Container(
            alignment: Alignment.center,

            child: Text(
              "Sent",
              style: TextStyle(
                fontFamily: 'Nunito',
                fontSize: fontSize,
              ),
            ),
          ),
        ),
      ],
    );
  }
}

bubble_tab_indicator: "^0.1.4"

---

or Just wrap your flexible space with SizeBox and set height

  flexibleSpace: SizedBox(
                height: 100,
                child: TabBar(
                    indicatorColor: Colors.pink,
                    tabs: [
                      Tab(
                        child: Text("ALL",style: TextStyle(color: Colors.pink),),
                      ),Tab(
                        child: Text("Favorites",style: TextStyle(color: Colors.pink),),
                      )
                    ]),
              ),

Answer 5

By default, ListView acts as if SafeArea is turned on. Setting the padding to zero will remove that white space.

ListView(
padding: EdgeInsets.zero;
...
);

Discussion on ListView and the default SafeArea