Flutter Tabbar
In this section, we are going to learn how to add a tab bar and its working in Flutter. Tabs are used for navigation. The styling is different for different devices based on the OS.
Tabs are common in Android and iOS apps which follow the Material Design guidelines. Flutter provides an easy way to add a tab layout. We use a TabBar and TabBarView with a TabController to add tabs. The controller is used to sync between both.
Lets see an example to explore tabs
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Text('Flutter Tabs Demo'),
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.contacts), text: "Tab 1"),
Tab(icon: Icon(Icons.camera_alt), text: "Tab 2")
],
),
),
body: TabBarView(
children: [
Container(
child: Center(
child: Text('It is a contact tab, which is responsible for displaying the contacts stored in your mobile',
style: TextStyle(fontSize: 32.0),
)
),
),
Container(
child: Center(
child: Text('It is a second layout tab, which is responsible for taking pictures from your mobile.',
style: TextStyle(fontSize: 35.0),
),
),
)
,
],
),
),
),
);
}
}
Output
