| // Copyright 2014 The Flutter Authors. All rights reserved. |
| // Use of this source code is governed by a BSD-style license that can be |
| // found in the LICENSE file. |
| |
| import 'package:flutter/material.dart'; |
| |
| /// Flutter code sample for [TabBar]. |
| |
| void main() => runApp(const TabBarApp()); |
| |
| class TabBarApp extends StatelessWidget { |
| const TabBarApp({super.key}); |
| |
| @override |
| Widget build(BuildContext context) { |
| return MaterialApp( |
| theme: ThemeData(useMaterial3: true), |
| home: const TabBarExample(), |
| ); |
| } |
| } |
| |
| class TabBarExample extends StatelessWidget { |
| const TabBarExample({super.key}); |
| |
| @override |
| Widget build(BuildContext context) { |
| return DefaultTabController( |
| initialIndex: 1, |
| length: 3, |
| child: Scaffold( |
| appBar: AppBar( |
| title: const Text('Primary and secondary TabBar'), |
| bottom: const TabBar( |
| dividerColor: Colors.transparent, |
| tabs: <Widget>[ |
| Tab( |
| text: 'Flights', |
| icon: Icon(Icons.flight), |
| ), |
| Tab( |
| text: 'Trips', |
| icon: Icon(Icons.luggage), |
| ), |
| Tab( |
| text: 'Explore', |
| icon: Icon(Icons.explore), |
| ), |
| ], |
| ), |
| ), |
| body: const TabBarView( |
| children: <Widget>[ |
| NestedTabBar('Flights'), |
| NestedTabBar('Trips'), |
| NestedTabBar('Explore'), |
| ], |
| ), |
| ), |
| ); |
| } |
| } |
| |
| class NestedTabBar extends StatefulWidget { |
| const NestedTabBar(this.outerTab, {super.key}); |
| |
| final String outerTab; |
| |
| @override |
| State<NestedTabBar> createState() => _NestedTabBarState(); |
| } |
| |
| class _NestedTabBarState extends State<NestedTabBar> with TickerProviderStateMixin { |
| late final TabController _tabController; |
| |
| @override |
| void initState() { |
| super.initState(); |
| _tabController = TabController(length: 2, vsync: this); |
| } |
| |
| @override |
| void dispose() { |
| _tabController.dispose(); |
| super.dispose(); |
| } |
| |
| @override |
| Widget build(BuildContext context) { |
| return Column( |
| children: <Widget>[ |
| TabBar.secondary( |
| controller: _tabController, |
| tabs: const <Widget>[ |
| Tab(text: 'Overview'), |
| Tab(text: 'Specifications'), |
| ], |
| ), |
| Expanded( |
| child: TabBarView( |
| controller: _tabController, |
| children: <Widget>[ |
| Card( |
| margin: const EdgeInsets.all(16.0), |
| child: Center(child: Text('${widget.outerTab}: Overview tab')), |
| ), |
| Card( |
| margin: const EdgeInsets.all(16.0), |
| child: Center(child: Text('${widget.outerTab}: Specifications tab')), |
| ), |
| ], |
| ), |
| ), |
| ], |
| ); |
| } |
| } |