How to remove bottom from default tab bar - flutter

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 bottomHow 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

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

Answer 3

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 4

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 5

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