Flutter Tab Bar | Create a complete TabBar with the icon

Use Tab Bar in Flutter Application

This post, we are going to learn how we can use Tab Bar in Flutter and also we know about how to work it. Which Tab Bar we will discuss, we can use it Android, iOS, Window, and Web Application too. For this, we will add the Material Library.  

Using Tab Bar we can move one screen to another Screen, for we need to create different classes and add to these classes in Tab Bar property.


We can create a class using different dart page or same dart file. We will provide an example of Tab Bar, in this example, we use the same dart file for other screens.

You need to Add TabBar property in Scaffold widget, after we can add child for New Screen, like above example i create three screens. These all screen create in same dart file by using class. First Class Name New(), Second Class name News() and Third class name Person(). After this we need to add TabBarView Widget in body part. 

Scaffold(
tabs: TabBar(
child: // Populate the TabBar in the next step.
)
);

Complete Source code of Tab Bar:-

Here all source code of Tab bar, which mention three different screens, when you use it, then you can change according to your need. 

Output:

If you got help from this post then please do comment and share your feedback, also if you have any question then please ask in Comment box.

Previous
Next Post »

1 comments:

Click here for comments
Androidena
admin
4 October 2020 at 05:45 ×

TabController: It is used for managing the state of the tab bar, the length which we mentioned in TabController should not be null or negative, otherwise you will put yourself in endless debugging.

Congrats bro Androidena you got PERTAMAX...! hehehehe...
Reply
avatar