15
Dec

Flutter Tabs

0

Flutter Tabs:

Creating Tabs in Flutter App:

Using tabs is a common pattern in apps using the Material Design guidelines. Flutter includes a convenient way to create tab layouts as part of the material library.

 

Creating Tabs In Flutter App:

  • Create a TabController
  • Create the tabs
  • Create content for each tab

Create a TabController:

To work with tabs in flutter app, we will need to keep the selected tab and content sections in sync. This is done by the TabController.

We will use two methods to create a TabController  one is manually creating TabController or use them DefaultTabController Widget. Using the DefaultTabController is the simplest option, since it will create a TabController for us and make it available to all descendant Widgets.

DefaultTabController(
// The number of tabs / content sections we need to display
length: 3,
child: // See the next step!
);

Create the tabs:

 

Now  the  TabController  is ready to work with, we can create our tabs using the TabBar Widget.

In this example, we will create a TabBar with 3 Tab Widgets and place it within an AppBar.

 

DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
),
),
);

Create content for each tab in flutter App:

We have created  tabs, we want to display the content when a tab is selected. For this purpose, we will employ the TabBarView Widget.

 

TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
);

Below is the Complete Example code for Tabs flutter App:

 

import 'package:flutter/material.dart';

void main() {
runApp(TabBarDemo());
}

class TabBarDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
title: Text('Tabs Demo'),
),
body: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
),
);
}
}

Congratulations You Have Learned  Creating Tabs In Flutter….!!!

If It Is Useful Share It With Your Friends….!!!

If  You Have Any Query Please make A Comment….!!!

Leave a Reply

Categories