I had just started learning to make apps with Flutter (Came from Android Kotlin) and finally managed to make a working TabBar. I wanted to make the tab bar without the AppBar widget to prevent the extra white space without having the title at the top of the TabBar. In doing so, I had replaced the AppBar widget with PrefferedSize, as I had looked this up and found another question about how to make a TabBar without the AppBar. When I did this, the iOS version looks great, but the Android version has part of the TabBar hiding under the system toolbar and display cutout. I had tried adding padding to the top, but then the app says that the AppBar exceeds it’s size by 16 pixels. I thought this was a simulator issue, ran it on my physical device, and it had the same issue, maybe a bit worse because the gray toolbar is bigger.
Here is an example by a screenshot I took:
This is the code for this screen in particular I have in the build function:
class _PlantsFragmentState extends State<PlantsFragment> {
@override
Widget build(BuildContext context) {
return const DefaultTabController(
length: 2,
child: Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(kToolbarHeight),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TabBar(
labelColor: Colors.green,
unselectedLabelColor: Colors.green,
indicatorColor: Colors.green,
indicatorSize: TabBarIndicatorSize.tab,
tabs: [
Tab(
icon: Icon(Icons.search),
text: "Search",
),
Tab(
icon: Icon(Icons.favorite),
text: "Favorites"
),
],
),
],
),
),
),
);
}
}
How can I modify the TabBar to prevent this look on Android?
The AppBar widget has a property named bottom, which is for custom widgets bellow the default toolbar. This property needs a PreferredSizeWidget.
The TabBar expands PreferredSizeWidget, thus it can be provided directly to the bottom parameter.
Lastly, we need to remove the toolbar’s height to remove the white space from it by setting the toolbarHeight parameter to 0.
By doing that, you will achieve the result you asked for. Here is the code and the result via screenshots:
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
toolbarHeight: 0,
bottom: const TabBar(
labelColor: Colors.green,
unselectedLabelColor: Colors.green,
indicatorColor: Colors.green,
indicatorSize: TabBarIndicatorSize.tab,
tabs: [
Tab(
icon: Icon(Icons.search),
text: "Search",
),
Tab(icon: Icon(Icons.favorite), text: "Favorites"),
],
),
),
),
);
Some explenation…
Flutter app UIs draw in the entire phone screen, except explicitly saying to it not to. The AppBar widget automatically handles that case and places its properties bellow that top space.
If you are using the AppBar, you can remove the above functionality by setting the scaffold’s primary property to false. Surprisingly, even with this (be default) true, Android padding was not added, but was rather added only on iOS. I verified that because when I set it to false the iOS app bar had the same bug with the Android one in your screenshots.
Anyways, that was generally the issue.
If you want to make sure your app is always within these boundaries you can also:
- wrap your page with
SafeArea(but this makes top and bottom paddings black – which I personally deslike aesthetically), or - add up the
MediaQuery.of(context).padding.topwhich equals with the system toolbar height of the phone the app runs at
Also, your solution above seemed correct at iOS, but it wasn’t. Your TabBar overflowed to the top padding area, which should not happen. That happened because AppBar is taller than the value in kToolbarHeight, which is designed for the AppBar‘s toolbar height:
2