Flutter Tip: TabBar inside AppBar without Title
As an early adopter of the Flutter, I have started working with Flutter and using different Widgets and exploring how to achieve the common UI requirements.
During the exploration, I found that there is one problem which almost every beginner is facing in Flutter. And the problem is How to implement TabBar widget inside AppBar widget without title.
So here is the solution which I found.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
flexibleSpace: SafeArea(
child: getTabBar(),
),
),
body: getTabBarPages());
}Widget getTabBar() {
return TabBar(controller: tabController, tabs: [
Tab(text: "Add", icon: Icon(Icons.add)),
Tab(text: "Edit", icon: Icon(Icons.edit)),
Tab(text: "Delete", icon: Icon(Icons.delete)),
]);
}
Widget getTabBarPages() {
return TabBarView(controller: tabController, children: <Widget>[
Container(color: Colors.red),
Container(color: Colors.green),
Container(color: Colors.blue)
]);
}
As you can see in the above code snippet, AppBar widget have flexibleSpace parameter which accept the Widget. This flexibleSpace is the solution to get the desired output.
Here, I have used SafeArea to align the TabBar proper. getTabBar() and getTabBarPages() methods are used to generate tabs and related tabviews.
The Above code snippet gives the output as shown in below screenshot.
You can find the full Source Code from here.
If you like this share your love by a clap or applause. If you are facing any specific problem, share it in the comment and I will try my best to solve it.
