1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
// 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.
/// Flutter code sample for [AppBar].
import 'package:flutter/material.dart';
List<String> titles = <String>[
'Cloud',
'Beach',
'Sunny',
];
void main() => runApp(const AppBarApp());
class AppBarApp extends StatelessWidget {
const AppBarApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(colorSchemeSeed: const Color(0xff6750a4), useMaterial3: true),
home: const AppBarExample(),
);
}
}
class AppBarExample extends StatelessWidget {
const AppBarExample({super.key});
@override
Widget build(BuildContext context) {
final ColorScheme colorScheme = Theme.of(context).colorScheme;
final Color oddItemColor = colorScheme.primary.withOpacity(0.05);
final Color evenItemColor = colorScheme.primary.withOpacity(0.15);
const int tabsCount = 3;
return DefaultTabController(
initialIndex: 1,
length: tabsCount,
child: Scaffold(
appBar: AppBar(
title: const Text('AppBar Sample'),
// This check specifies which nested Scrollable's scroll notification
// should be listened to.
//
// When `ThemeData.useMaterial3` is true and scroll view has
// scrolled underneath the app bar, this updates the app bar
// background color and elevation.
//
// This sets `notification.depth == 1` to listen to the scroll
// notification from the nested `ListView.builder`.
notificationPredicate: (ScrollNotification notification) {
return notification.depth == 1;
},
// The elevation value of the app bar when scroll view has
// scrolled underneath the app bar.
scrolledUnderElevation: 4.0,
shadowColor: Theme.of(context).shadowColor,
bottom: TabBar(
tabs: <Widget>[
Tab(
icon: const Icon(Icons.cloud_outlined),
text: titles[0],
),
Tab(
icon: const Icon(Icons.beach_access_sharp),
text: titles[1],
),
Tab(
icon: const Icon(Icons.brightness_5_sharp),
text: titles[2],
),
],
),
),
body: TabBarView(
children: <Widget>[
ListView.builder(
itemCount: 25,
itemBuilder: (BuildContext context, int index) {
return ListTile(
tileColor: index.isOdd ? oddItemColor : evenItemColor,
title: Text('${titles[0]} $index'),
);
},
),
ListView.builder(
itemCount: 25,
itemBuilder: (BuildContext context, int index) {
return ListTile(
tileColor: index.isOdd ? oddItemColor : evenItemColor,
title: Text('${titles[1]} $index'),
);
},
),
ListView.builder(
itemCount: 25,
itemBuilder: (BuildContext context, int index) {
return ListTile(
tileColor: index.isOdd ? oddItemColor : evenItemColor,
title: Text('${titles[2]} $index'),
);
},
),
],
),
),
);
}
}