.png)
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
Reference