Flutter – Tabs.

Hi Friends,

Welcome back to yet another Flutter app tutorial. In this post, let’s see how to bring in tabs into our application.

Let’s begin.

A screencast of this post.

 

Create a new app. Create two new files named firstpage.dart and secondpage.dart in the lib directory and add the below code.

firstpage.dart

secondpage.dart

Okay, now we have 2 screens. We’ll bring a couple of tabs to show them on our device.

Open up main.dart and add the below code.

Let’s break this down.

We have just created a tab controller to control the tabs. We also have created a tab bar with 2 tabs (Tabs with just icons).

In the body section, we have given the views for both the tabs, i.e., the pages that we created in the beginning.

Now run the app., You’ll see a screen as shown below.

Screenshot_2018-05-14-21-33-37

Try navigating between the tabs, You could also swipe to switch tabs.

Screenshot_2018-05-14-21-33-32

Now in some apps, the tabs bar might be on the bottom right ? Let’s see how to bring that here as well.

Open up your main.dart file and modify the code as shown below.

Now simply run the app and you would see the below screens.

Screenshot_2018-05-14-21-32-53

Try navigating and you would see that it works fine as well.

Screenshot_2018-05-14-21-32-57

Now this is how you bring in tabs into your flutter apps. There are a lot more stuff you could do with Tabs and the tab bar, but this is just a basic demo.

Hope this helped you guys. If you found this helpful, kindly share it with someone and help them too.

Join our flutter community – here.

Thanks for reading guys. Peace.. :)

Liked it? Take a second to support admin on Patreon!