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
Flutter Tutorial This Flutter Tutorial is specifically designed for beginners and experienced professionals. It covers both the basics and advanced concepts of the Flutter framework.Flutter is Google’s mobile SDK that builds native Android and iOS apps from a single codebase. It was developed in December 2017. When
7 min read
Top 50 Flutter Interview Questions and Answers for 2025 Flutter is an open-source, cross-platform application development framework. It was developed by Google in 2017. It is used to build applications for Android, iOS, Linux, Mac, Windows, and the web. Flutter uses the Dart programming language. It provides a simple, powerful, efficient, and easy-to-und
15+ min read
What is Widgets in Flutter? Flutter is Google's UI toolkit for crafting beautiful, natively compiled iOS and Android apps from a single code base. To build any application we start with widgets - The building block of Flutter applications. Widgets describe what their view should look like given their current configuration and
5 min read
Flutter | An introduction to the open source SDK by Google Flutter is Google’s Mobile SDK to build native iOS and Android, Desktop (Windows, Linux, macOS), and Web apps from a single codebase. When building applications with Flutter, everything is Widgets – the blocks with which the flutter apps are built. They are structural elements that ship with a bunch
5 min read
Flutter - Architecture Application Flutter architecture application mainly consists of: WidgetsGesturesConcept of StateLayersWidgetsWidgets are the primary component of any flutter application. It acts as a UI for the user to interact with the application. Any flutter application is itself a widget that is made up of a combination of
3 min read
Flutter - Changing App Icon Flutter SDK is an open-source software development kit for building beautiful UI which is natively compiled. When we create a Flutter Project, it comes with the default Flutter icon. In order to get the app published in stores like Google Play Store, Apple App Store, etc the default icon can be chan
3 min read
Flutter - AppBar Widget AppBar is usually the topmost component of the app (or sometimes the bottom-most), it contains the toolbar and some other common action buttons. As all the components in a Flutter application are a widget or a combination of widgets. So AppBar is also a built-in class or widget in Flutter which give
7 min read
Scaffold class in Flutter with Examples The Scaffold is a class in flutter that provides many widgets or we can say APIs. The Scaffold will expand or occupy the whole available space in device screen .The class Hierarchy is as follows:Object ↳ Diagnosticable ↳ Diagnosticable Tree ↳ Widget ↳ StateFul Widget ↳ ScaffoldThe constructor of the
8 min read
Container class in Flutter Container class in flutter is a convenience widget that combines common painting, positioning, and sizing of widgets. A Container class can be used to store one or more widgets and position them on the screen according to our convenience. Basically, a container is like a box to store contents. A bas
8 min read
Flutter - Stateful vs Stateless Widgets The state of an app can very simply be defined as anything that exists in the memory of the app while the app is running. This includes all the widgets that maintain the UI of the app including the buttons, text fonts, icons, animations, etc. So now that we know what are these states let's dive dire
6 min read