TabBar and TabBarView Widgets in Flutter

Zia

2 Followers

Aug 18, 2024

0 sec read

318

tabbar and tabbarview widgets in flutter

Tabs are common features in several applications. Built-in applications with an OS such as File Explorer in Windows 10 also use tabbed views when showing file information. In Flutter, TabBar creates tabs while TabBarView creates the content of each panel within tabs. When using TabBar and TabBarView, TabController must be utilized to handle several aspects of a tab. It is preferable to use DefaultTabController since it is easy to use. Additionally, It is also possible to use a custom TabController, but it requires varied inputs such as length, children, and tabs that are in use.

The use of the TabBar and TabBarView widget

return MaterialApp(

home: DefaultTabController(

length: 3,

child: Scaffold(

appBar: AppBar(

title: Text(

'Flutter Application',

style: TextStyle(

color: Colors.white,

fontSize: 24,

fontWeight: FontWeight.bold,

backgroundColor: Colors.teal,

bottom: const TabBar(

indicatorColor: Colors.yellow,

indicatorWeight: 4,

labelColor: Colors.yellow,

unselectedLabelColor: Colors.white,

tabs: [

Tab(icon: Icon(Icons.directions_car, color: Colors.yellow)),

Tab(icon: Icon(Icons.directions_transit, color: Colors.yellow)),

Tab(icon: Icon(Icons.directions_bike, color: Colors.yellow)),

body: const TabBarView(

children: [

Icon(Icons.directions_car, size: 100, color: Colors.teal),

Icon(Icons.directions_transit, size: 100, color: Colors.teal),

Icon(Icons.directions_bike, size: 100, color: Colors.teal),

);

TabBar and TabBarView Widget in Flutter - Flutter tutorial

Flutter Flutter Widgets TabBar Widget in FLutter TabBarView Widget in Flutter TabBar in Flutter TabBarView in flutter

Published by:

2 Followers

Zia

Zia, founder and CEO of Texvn and Toolx, is a passionate entrepreneur and tech enthusiast. With a strong focus on empowering developers, he creates innovative tools and content, making coding and idea generation easier.