Flutter / UI Elements / TabBar
TabBar
-
Usage
The TabBar widget in Flutter is used in combination with TabBarView to create a swipeable set of tabs, typically seen in apps to organize content or navigate between different sections.
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { final List myTabs = [ Tab(text: 'Tab 1'), Tab(text: 'Tab 2'), Tab(text: 'Tab 3'), ]; @override Widget build(BuildContext context) { return MaterialApp( home: DefaultTabController( length: myTabs.length, child: Scaffold( appBar: AppBar( title: Text('TabBar Example'), bottom: TabBar( tabs: myTabs, ), ), body: TabBarView( children: myTabs.map((Tab tab) { // Replace this with the content for each tab return Center( child: Text(tab.text ?? 'No text provided'), ); }).toList(), ), ), ), ); } } TabBar is placed in the AppBar's bottom property to display the tabs. TabBarView is used to define the content for each tab. In this case, a simple Center widget displaying the text of each tab is used as placeholder content. The DefaultTabController widget is used to manage the state of the TabBar and TabBarView widgets.
MANVIA BLOG