Flutter - Tabs

Tabs are the part of the UI that navigates the user through different routes(ie, pages) when clicked upon. The use of tabs in applications is standard practice. Flutter provides a simple way to create tab layouts using the material library. In this article, we will be exploring the same in detail.

To understand the concept of tabs and their functionality in a Flutter app, let's build a simple app with 5 tabs by following the below steps:

Steps to Implement the tabs in Flutter Application

Step 1 : Designing a TabController

The TabController as the name suggests controls the functioning of each tab by syncing the tabs and the contents with each other. The DefaultTabController widget is one of the simplest ways to create tabs in flutter. It is done as shown below:

Step 2 : Adding tabs

A tab in Flutter can be created using a TabBar widget as shown below:

To know more about Appbar in flutter refer this article : Flutter – AppBar Widget

Step 3 : Adding content to tabs

The TabBarView widget can be used to specify the contents of each tab. For the sake of simplicity we will display the icons in the tab as the content of the tab as shown below:

Complete Source Code 

main.dart:

Output: