Manas Mohanty
Nov 1, 20202 min
You have came across multiple times in some apps like paytm, tez etc upon this topic .In fact you use tabs almost everyday in all most all app.This topic will give you idea about how to create tabs in your flutter app in layman view.
Note : no need to call any specific package in pubspec.yaml file .
tabcontroller is a widget in flutter library.
Lets understand it from the code below with comments.( i have put comments beside the code)
Reference code
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
//---step -1
//scaffold has been wrapped with a widget name default tab controller
length: 3,
// desired no of tabs in a page
child: Scaffold(
appBar: AppBar(
title: Text('Flutter Tabs Demo'),
Step-2
//at the bottom of app bar you mentions bars of Tabs
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.contacts), text: "Tab 1"), // tab bar having contact icon
Tab(icon: Icon(Icons.camera_alt), text: "Tab 2"),// tab bar having camera icon
Tab(icon: Icon(Icons.money), text: "Tab 2") // tab bar having money icon
],
),
),
// view tabs as pages
body: TabBarView(
children: [
FirstScreen(),
SecondScreen(),
ThirdScreen(),
],
),
),
),
);
}
}
/ /first tab page
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return 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),
)
),
);
}
}
//second tab page
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return 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),
),
),
);
}
}
//Step -3
//Put the tab pages.
//Third screen
class ThirdScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Center(
child: Text('It is a third layout tab, which is responsible for making payments from your mobile.',
style: TextStyle(fontSize: 35.0),
),
),
);
}
}
Step -4
flutter run