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
// 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 CupertinoSliverNavigationBar
import 'package:flutter/cupertino.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'CupertinoSliverNavigationBar Sample';
@override
Widget build(BuildContext context) {
return const CupertinoApp(
title: _title,
home: CupertinoNavBarSample(),
);
}
}
class CupertinoNavBarSample extends StatelessWidget {
const CupertinoNavBarSample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
// A ScrollView that creates custom scroll effects using slivers.
child: CustomScrollView(
// A list of sliver widgets.
slivers: <Widget>[
const CupertinoSliverNavigationBar(
leading: Icon(CupertinoIcons.person_2),
// This title is visible in both collapsed and expanded states.
// When the "middle" parameter is omitted, the widget provided
// in the "largeTitle" parameter is used instead in the collapsed state.
largeTitle: Text('Contacts'),
trailing: Icon(CupertinoIcons.add_circled),
),
// This widget fills the remaining space in the viewport.
// Drag the scrollable area to collapse the CupertinoSliverNavigationBar.
SliverFillRemaining(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
const Text('Drag me up', textAlign: TextAlign.center),
CupertinoButton.filled(
onPressed: () {
Navigator.push(context, CupertinoPageRoute<Widget>(builder: (BuildContext context) {
return const NextPage();
}));
},
child: const Text('Go to Next Page'),
)
],
),
),
],
),
);
}
}
class NextPage extends StatelessWidget {
const NextPage({ Key? key }) : super(key: key);
@override
Widget build(BuildContext context) {
final Brightness brightness = CupertinoTheme.brightnessOf(context);
return CupertinoPageScaffold(
child: CustomScrollView(
slivers: <Widget>[
CupertinoSliverNavigationBar(
backgroundColor: CupertinoColors.systemYellow,
border: Border(
bottom: BorderSide(
color: brightness == Brightness.light
? CupertinoColors.black
: CupertinoColors.white,
),
),
// The middle widget is visible in both collapsed and expanded states.
middle: const Text('Contacts Group'),
// When the "middle" parameter is implemented, the larget title is only visible
// when the CupertinoSliverNavigationBar is fully expanded.
largeTitle: const Text('Family'),
),
SliverFillRemaining(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: const <Widget>[
Text('Drag me up', textAlign: TextAlign.center),
// When the "leading" parameter is omitted on a route that has a previous page,
// the back button is automatically added to the leading position.
Text('Tap on the leading button to navigate back', textAlign: TextAlign.center),
],
),
),
],
),
);
}
}