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