Mobile apps frequently employ tabs as a UI pattern because they make it simple for users to switch between various content parts.
The TabBar and TabBarView widgets in Flutter can be used to build a tabbed interface.
Tabs are precisely what you assume they are. When clicked, it’s a component of the user interface that directs the user through several paths (i.e., pages).
It is common practise to use tabs in applications. Using the material library and Flutter, tab layouts may be easily created. We will investigate the same in detail in this essay.
Make a new Flutter application now. Once the programme is finished, remove all the comments and content until you are left with the following code:
Design of TabController
The TabController, as its name suggests, manages each tab’s operation by synchronising its tabs and contents. One of the simplest methods for creating tabs in flutter is to use the DefaultTabController widget. Below are the full code of Tabbar :
class TabbarDisplay extends StatefulWidget {
@override
TabbarDisplayState createState() => TabbarDisplayState();
}
class TabbarDisplayState extends State<tabbardisplay> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3, // Number of tabs
child: Scaffold(
appBar: AppBar(
title: Text('Tech Android Hub'),
bottom: TabBar(
tabs: [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
Tab(text: 'Tab 3'),
],
),
),
body: TabBarView(
children: [
Center(child: Text('First Tab 1')),
Center(child: Text('Second Tab 2')),
Center(child: Text('Third Tab 3')),
],
),
),
),
);
}
}In this code, we create a new Flutter application with a MaterialApp as the root widget. Inside it, we use a DefaultTabController to handle the tab logic.
The TabBar widget is placed inside the AppBar and provides the tab titles. We create three Tab widgets, each with a different text label.
The TabBarView widget contains the content of each tab. In this example, we use simple Text widgets wrapped in Center widgets for demonstration purposes. You can replace them with your own content widgets.
You discovered how to use TabBar and TabBarView to build a tabbed interface in Flutter in this tutorial. In developing mobile applications, using tabs to organise content and improve user experience is a great strategy.
Feel free to play around with various content widgets and alter the tab’s layout to fit the style of your app. For building complex and interactive user interfaces, Flutter offers a flexible and user-friendly framework.
Happy coding!
Related Posts
Progress Bars Example in Flutter
Creating a Splash Screen in Flutter
Remove DEBUG Banner in the Flutter app
Rounded Corners Image in Flutter
Example of a checkboxlisttile in flutter