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.