1// Copyright 2014 The Flutter Authors. All rights reserved.
2// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5import 'package:flutter/material.dart';
6
7/// Flutter code sample for [TabBar].
8
9void main() => runApp(const TabBarApp());
10
11class TabBarApp extends StatelessWidget {
12 const TabBarApp({super.key});
13
14 @override
15 Widget build(BuildContext context) {
16 return const MaterialApp(home: TabBarExample());
17 }
18}
19
20class TabBarExample extends StatelessWidget {
21 const TabBarExample({super.key});
22
23 @override
24 Widget build(BuildContext context) {
25 return DefaultTabController(
26 initialIndex: 1,
27 length: 3,
28 child: Scaffold(
29 appBar: AppBar(
30 title: const Text('Primary and secondary TabBar'),
31 bottom: const TabBar(
32 dividerColor: Colors.transparent,
33 tabs: <Widget>[
34 Tab(text: 'Flights', icon: Icon(Icons.flight)),
35 Tab(text: 'Trips', icon: Icon(Icons.luggage)),
36 Tab(text: 'Explore', icon: Icon(Icons.explore)),
37 ],
38 ),
39 ),
40 body: const TabBarView(
41 children: <Widget>[
42 NestedTabBar('Flights'),
43 NestedTabBar('Trips'),
44 NestedTabBar('Explore'),
45 ],
46 ),
47 ),
48 );
49 }
50}
51
52class NestedTabBar extends StatefulWidget {
53 const NestedTabBar(this.outerTab, {super.key});
54
55 final String outerTab;
56
57 @override
58 State<NestedTabBar> createState() => _NestedTabBarState();
59}
60
61class _NestedTabBarState extends State<NestedTabBar> with TickerProviderStateMixin {
62 late final TabController _tabController;
63
64 @override
65 void initState() {
66 super.initState();
67 _tabController = TabController(length: 2, vsync: this);
68 }
69
70 @override
71 void dispose() {
72 _tabController.dispose();
73 super.dispose();
74 }
75
76 @override
77 Widget build(BuildContext context) {
78 return Column(
79 children: <Widget>[
80 TabBar.secondary(
81 controller: _tabController,
82 tabs: const <Widget>[Tab(text: 'Overview'), Tab(text: 'Specifications')],
83 ),
84 Expanded(
85 child: TabBarView(
86 controller: _tabController,
87 children: <Widget>[
88 Card(
89 margin: const EdgeInsets.all(16.0),
90 child: Center(child: Text('${widget.outerTab}: Overview tab')),
91 ),
92 Card(
93 margin: const EdgeInsets.all(16.0),
94 child: Center(child: Text('${widget.outerTab}: Specifications tab')),
95 ),
96 ],
97 ),
98 ),
99 ],
100 );
101 }
102}
103

Provided by KDAB

Privacy Policy
Learn more about Flutter for embedded and desktop on industrialflutter.com