Tabbar in Flutter app is used for simple navigation.
We can set different styles to different tabs for different work.
Tabbar is then placed at top of the screen on android devices and in the bottom on iOS devices.
There is a common pattern working with iOS and Android devices using material design. And flutter provides a convenient way to set tab layout.
Basically, it’s a part of UI, that navigates the user to different pages in an application.
You may also check our  Flutter app development services page
To better understand the concept of tabs let’s start with designing a screen with three tabs.
Steps to follow
- Design a Tab Controller
- Add tabs to the app.
- Add content in each tab.
Code of Tabbar Controller
|
1 2 3 4 5 6 7 8 |
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin { late TabController _tabbarController; @override void initState() { super.initState(); _tabbarController = TabController(length: 3, vsync: this); } |
Create Tabs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
bottom: TabBar( controller: _tabbarController, tabs: const <Widget>[ Tab( icon: Icon(Icons.home), ), Tab( icon: Icon(Icons.account_balance), ), Tab( icon: Icon(Icons.add_shopping_cart), ), ], ), |
Complete Code of Tabbar
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({Key? key}) : super(key: key); @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin { late TabController _tabbarController; @override void initState() { super.initState(); _tabbarController = TabController(length: 3, vsync: this); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('TabBar in flutter'), bottom: TabBar( controller: _tabbarController, tabs: const <Widget>[ Tab( icon: Icon(Icons.home), ), Tab( icon: Icon(Icons.account_balance), ), Tab( icon: Icon(Icons.add_shopping_cart), ), ], ), ), body: TabBarView( controller: _tabbarController, children: const <Widget>[ Center( child: Text( "It's a home page", style: TextStyle(fontSize: 24), ), ), Center( child: Text( "It's a profile page", style: TextStyle(fontSize: 24), ), ), Center( child: Text( "It's a cart page", style: TextStyle(fontSize: 24), ), ), ], ), ); } } |
Conclusion
In this blog, we have discussed how we can use the tabbars in the flutter apps.
I hope it will help you in understanding the tabbar.
Thanks for reading!!
Reference
https://docs.flutter.dev/cookbook/design/tabs
See our other posts here
Be the first to comment.