In this tutorial, we’ll learn how to properly use Flutter appbar tabs with the help of multiple practical Flutter code examples.
Outline
- Introduction: Flutter Appbar Tabs
- Implementing Flutter Appbar Tab (Easy Example)
- Flutter Appbar Tabs Complete Source Code
- Conclusion
Introduction: Flutter Appbar Tabs
Flutter appbar tabs are used to show different screens. First we’ll implement tabs in Flutter appbar widget. After that, we’ll specify screens and assign a screen to each tab. Finally, when we click on a tab, it’ll show a screen specified to it.
Let’s practically implement it using a proper Flutter code example.
Implementing Flutter Appbar Tab (Easy Example)
Follow below steps in order to understand how to properly implement and use Flutter appbar tabs.
Step 1
DefaultTabController(
length: 4,
initialIndex: 0,
child: Scaffold()Step 2
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(
icon: Icon(
Icons.home,
size: 20,
),
text: 'Home',
),
Tab(
icon: Icon(
Icons.chat,
size: 20,
),
text: 'Chats',
),
Tab(
icon: Icon(
Icons.message,
size: 20,
),
text: 'Messages',
),
Tab(
icon: Icon(
Icons.person,
size: 20,
),
text: 'Profile',
)
]),
)
- We’ve to pass the appbar widget to appbar constructor of Flutter scaffold.
- After that, we’ve to pass the tab bar widget to its bottom constructor.
- This tab bar widget has a tabs constructor which takes a list. We can pass a Flutter widget to it.
- Just make sure that the number of widgets match the number specified in tab bar controller.
Step 3
body: TabBarView(children: [ Center( child: Text( 'Home Selected', style: TextStyle( fontSize: 28, color: Colors.blue, fontWeight: FontWeight.bold), ), ), Center( child: Text( 'Chats Selected', style: TextStyle( fontSize: 28, color: Colors.blue, fontWeight: FontWeight.bold), ), ), Center( child: Text( 'Message Selected', style: TextStyle( fontSize: 28, color: Colors.blue, fontWeight: FontWeight.bold), ), ), Center( child: Text( 'Profile Selected', style: TextStyle( fontSize: 28, color: Colors.blue, fontWeight: FontWeight.bold), ), ) ])
- We’ve passed the tab bar view widget to the body constructor of Flutter scaffold widget.
- It has a constructor of name children which takes a list of widgets. We can specify widgets here.
- This list is order sensitive, which means first widget will be assigned to first tab, second widget to second tab and so on.
- Also make sure that the number of tabs and the number of widgets in list match. If not, then it’ll give an error.
Flutter Appbar Tabs Complete Source Code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Homepage(),
);
}
}
class Homepage extends StatefulWidget {
@override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: DefaultTabController(
length: 4,
initialIndex: 1,
child: Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text('Flutter Appbar Tabs'),
bottom: TabBar(tabs: [
Tab(
icon: Icon(
Icons.home,
size: 20,
),
text: 'Home',
),
Tab(
icon: Icon(
Icons.chat,
size: 20,
),
text: 'Chats',
),
Tab(
icon: Icon(
Icons.message,
size: 20,
),
text: 'Messages',
),
Tab(
icon: Icon(
Icons.person,
size: 20,
),
text: 'Profile',
)
]),
),
body: TabBarView(children: [
Center(
child: Text(
'Home Selected',
style: TextStyle(
fontSize: 28,
color: Colors.blue,
fontWeight: FontWeight.bold),
),
),
Center(
child: Text(
'Chats Selected',
style: TextStyle(
fontSize: 28,
color: Colors.blue,
fontWeight: FontWeight.bold),
),
),
Center(
child: Text(
'Message Selected',
style: TextStyle(
fontSize: 28,
color: Colors.blue,
fontWeight: FontWeight.bold),
),
),
Center(
child: Text(
'Profile Selected',
style: TextStyle(
fontSize: 28,
color: Colors.blue,
fontWeight: FontWeight.bold),
),
)
]),
),
),
);
}
}Conclusion
To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to properly use and customize Flutter appbar tabs. I’d love to have your feedback on this post.
I’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.
You might also like:
How To Change Flutter OutlinedButton Background Color
How To Change Flutter OutlinedButton Border Radius [Flutter Easy Guide]
Beautiful Flutter Login And Registration Screen UI Design [Free Source Code]
How To Change Flutter OutlinedButton Elevation [Easy Flutter Guide]
How To Set Flutter OutlinedButton Rounded Corners [Easy Flutter Guide]
