There are lots of apps where you often have come across tabs. Tabs are a common pattern in the apps. They are situated at top of the app below the App bar. So today we are going to create our own app with tabs.
Table of Contents:
- Project Setup
- Code
- Conclusion
Project Setup:
You can either create a new project or a new file in your existing project.
We don't need any other dependencies.
Code:
We need a TabController to control the tabs of our app. Here in this tutorial, we are going to use DefaultTabController because it is the simplest and accessible to all the descendants.
DefaultTabController is used as the home of MaterialApp.
So in the main.dart file:
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'TabView Tutorial GFG',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({ Key? key }) : super(key: key);
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: length,
child: child,
);
}
}
So as you can see we need to provide two fields, one is the length and the other is a child. These are required fields.
- length: Number of tabs
- child: The widget you want to display
Now I want 3 tabs so I am providing length with 3. Also, the child will be obviously Scaffold because it is necessary.
Dart
DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text("GeeksForGeeks"),
bottom: TabBar(
tabs: [],
),
),
body: TabBarView(
children: [],
),
),
);
Here you can see two new widgets, TabBar and TabBarView.
- TabBar: It is used to display the top view of tabs or more specifically it displays the content of the tab.
- TabBarView: It is used to display the contents when a tab is pressed.
So we will display Icons in the TabBar.
Note: Here you should display 3 tabs or else you will get an error.
Dart
TabBar(
tabs: [
Tab(
icon: Icon(Icons.home_filled),
text: "Home",
),
Tab(
icon: Icon(Icons.account_box_outlined),
text: "Account",
),
Tab(
icon: Icon(Icons.alarm),
text: "Alarm",
),
],
),
Inside the TabBarView widget, we need three children widgets, and they can be anything.
So I will display just Icons for the simplicity of the tutorial.
Dart
TabBarView(
children: [
Center(
child: Icon(Icons.home),
),
Center(
child: Icon(Icons.account_circle),
),
Center(
child: Icon(Icons.alarm),
)
],
),
Now run the App.
TabBarView app
Now if you have lots of tabs, like 5 or 6 we can use the isScrollable field in the TabView. If it is false, it shrinks all the tabs within the screen and if it is true it makes scrollable Tabs.
You can change the length to 6 and duplicate all the tabs under TabBar and TabBarView.
Dart
DefaultTabController(
length: 6,
child: Scaffold(
appBar: AppBar(
title: Text("GeeksForGeeks"),
bottom: TabBar(
isScrollable: true,
tabs: [
Tab(
icon: Icon(Icons.home_filled),
text: "Home",
),
Tab(
icon: Icon(Icons.account_box_outlined),
text: "Account",
),
Tab(
icon: Icon(Icons.alarm),
text: "Alarm",
),
Tab(
icon: Icon(Icons.home_filled),
text: "Home",
),
Tab(
icon: Icon(Icons.account_box_outlined),
text: "Account",
),
Tab(
icon: Icon(Icons.alarm),
text: "Alarm",
),
],
),
),
body: TabBarView(
children: [
Center(
child: Icon(Icons.home),
),
Center(
child: Icon(Icons.account_circle),
),
Center(
child: Icon(Icons.alarm),
),
Center(
child: Icon(Icons.home),
),
Center(
child: Icon(Icons.account_circle),
),
Center(
child: Icon(Icons.alarm),
)
],
),
),
);
Now run the app again.
More tabs TabView App
Now clear the duplicate code. Here is the full code.
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'TabView Tutorial GFG',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text("GeeksForGeeks"),
bottom: TabBar(
tabs: [
Tab(
icon: Icon(Icons.home_filled),
text: "Home",
),
Tab(
icon: Icon(Icons.account_box_outlined),
text: "Account",
),
Tab(
icon: Icon(Icons.alarm),
text: "Alarm",
),
],
),
),
body: TabBarView(
children: [
Center(
child: Icon(Icons.home),
),
Center(
child: Icon(Icons.account_circle),
),
Center(
child: Icon(Icons.alarm),
)
],
),
),
);
}
}
Conclusion
So we learned a new widget TabView and we created a very basic app. But we can make beautiful apps with this very simple and easy widget. It comes with all the necessary animations and snapping which makes settings up very easily an app with tabs. If you have any doubts comment below.
Similar Reads
Table Widget in Flutter Table widget is used to display items in a table layout. There is no need to use Rows and Columns to create a table. If we have multiple rows with the same width of columns then Table widget is the right approach. SliverList or Column will be most suitable if we only want to have a single column. Th
3 min read
PageView Widget in Flutter The PageView widget allows the user to transition between different screens in their flutter application. All you need to set it up are a PageViewController and a PageView. Constructor of PageView class:Syntax: PageView({Key key, Axis scrollDirection, bool reverse, PageController controller, ScrollP
3 min read
Flutter - Stack Widget The Stack widget in Flutter is a powerful tool that allows for the layering of multiple widgets on top of each other. While layouts like Row and Column arrange widgets horizontally and vertically, respectively, Stack provides a solution when you need to overlay widgets. For instance, if you want to
6 min read
Flutter - ListTile Widget The ListTile widget is used to populate a ListView in Flutter. It contains a title as well as leading or trailing icons. Let's understand this with the help of an example.Constructor of the ListTile classListTile ListTile({ Key? key, Widget? leading, Widget? title, Widget? subtitle, Widget? trailing
5 min read
Flutter - Stateful Widget A Stateful Widget has states in it. To understand a Stateful Widget, you need to have a clear understanding of widgets and state management. A state can be defined as "an imperative changing of the user interface," and a widget is "an immutable description of the part of the user interface". To lear
4 min read