Skip to content

Commit d4c4755

Browse files
authored
[CP-stable] Support CupertinoSliverNavigationBar.search with condensed large title (#162912)
Original PR: flutter/flutter#159120 The next stable branch has `CupertinoSliverNavigationBar.search`, but it is currently [unusable](flutter/flutter#159120 (comment)). The linked PR adds the search functionality and makes it usable.
1 parent 9d1d0a6 commit d4c4755

File tree

5 files changed

+645
-83
lines changed

5 files changed

+645
-83
lines changed

examples/api/lib/cupertino/nav_bar/cupertino_sliver_nav_bar.1.dart

Lines changed: 51 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
import 'package:flutter/cupertino.dart';
66

7-
/// Flutter code sample for [CupertinoSliverNavigationBar].
7+
/// Flutter code sample for [CupertinoSliverNavigationBar.search].
88
99
void main() => runApp(const SliverNavBarApp());
1010

@@ -76,18 +76,27 @@ class SliverNavBarExample extends StatelessWidget {
7676
}
7777
}
7878

79-
class NextPage extends StatelessWidget {
79+
class NextPage extends StatefulWidget {
8080
const NextPage({super.key, this.bottomMode = NavigationBarBottomMode.automatic});
8181

8282
final NavigationBarBottomMode bottomMode;
8383

84+
@override
85+
State<NextPage> createState() => _NextPageState();
86+
}
87+
88+
class _NextPageState extends State<NextPage> {
89+
bool searchIsActive = false;
90+
late String text;
91+
8492
@override
8593
Widget build(BuildContext context) {
8694
final Brightness brightness = CupertinoTheme.brightnessOf(context);
8795
return CupertinoPageScaffold(
8896
child: CustomScrollView(
8997
slivers: <Widget>[
9098
CupertinoSliverNavigationBar.search(
99+
stretch: true,
91100
backgroundColor: CupertinoColors.systemYellow,
92101
border: Border(
93102
bottom: BorderSide(
@@ -97,16 +106,47 @@ class NextPage extends StatelessWidget {
97106
),
98107
middle: const Text('Contacts Group'),
99108
largeTitle: const Text('Family'),
100-
bottomMode: bottomMode,
101-
),
102-
const SliverFillRemaining(
103-
child: Column(
104-
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
105-
children: <Widget>[
106-
Text('Drag me up', textAlign: TextAlign.center),
107-
Text('Tap on the leading button to navigate back', textAlign: TextAlign.center),
108-
],
109+
bottomMode: widget.bottomMode,
110+
searchField: CupertinoSearchTextField(
111+
autofocus: searchIsActive,
112+
placeholder: searchIsActive ? 'Enter search text' : 'Search',
113+
onChanged: (String value) {
114+
setState(() {
115+
if (value.isEmpty) {
116+
text = 'Type in the search field to show text here';
117+
} else {
118+
text = 'The text has changed to: $value';
119+
}
120+
});
121+
},
109122
),
123+
onSearchableBottomTap: (bool value) {
124+
text = 'Type in the search field to show text here';
125+
setState(() {
126+
searchIsActive = value;
127+
});
128+
},
129+
),
130+
SliverFillRemaining(
131+
child:
132+
searchIsActive
133+
? ColoredBox(
134+
color: CupertinoColors.extraLightBackgroundGray,
135+
child: Center(child: Text(text, textAlign: TextAlign.center)),
136+
)
137+
: const Padding(
138+
padding: EdgeInsets.symmetric(horizontal: 16.0),
139+
child: Column(
140+
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
141+
children: <Widget>[
142+
Text('Drag me up', textAlign: TextAlign.center),
143+
Text(
144+
'Tap on the search field to open the search view',
145+
textAlign: TextAlign.center,
146+
),
147+
],
148+
),
149+
),
110150
),
111151
],
112152
),

examples/api/test/cupertino/nav_bar/cupertino_sliver_nav_bar.1_test.dart

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,43 @@ void main() {
9191
expect(tester.getBottomLeft(find.byType(CupertinoSearchTextField)).dy, 87.0);
9292
});
9393

94+
testWidgets('Opens the search view when the search field is tapped', (WidgetTester tester) async {
95+
await tester.pumpWidget(const example.SliverNavBarApp());
96+
97+
// Navigate to a page with a search field.
98+
final Finder nextButton = find.text('Bottom Automatic mode');
99+
expect(nextButton, findsOneWidget);
100+
await tester.tap(nextButton);
101+
await tester.pumpAndSettle();
102+
103+
expect(find.widgetWithText(CupertinoSearchTextField, 'Search'), findsOneWidget);
104+
expect(find.text('Tap on the search field to open the search view'), findsOneWidget);
105+
// A decoy 'Cancel' button used in the animation.
106+
expect(find.widgetWithText(CupertinoButton, 'Cancel'), findsOneWidget);
107+
108+
// Tap on the search field to open the search view.
109+
await tester.tap(find.byType(CupertinoSearchTextField), warnIfMissed: false);
110+
await tester.pumpAndSettle();
111+
112+
expect(find.widgetWithText(CupertinoSearchTextField, 'Enter search text'), findsOneWidget);
113+
expect(find.text('Tap on the search field to open the search view'), findsNothing);
114+
expect(find.widgetWithText(CupertinoButton, 'Cancel'), findsOneWidget);
115+
116+
await tester.enterText(find.byType(CupertinoSearchTextField), 'a');
117+
await tester.pumpAndSettle();
118+
119+
expect(find.text('The text has changed to: a'), findsOneWidget);
120+
121+
// Tap on the 'Cancel' button to close the search view.
122+
await tester.tap(find.widgetWithText(CupertinoButton, 'Cancel'));
123+
await tester.pumpAndSettle();
124+
125+
expect(find.widgetWithText(CupertinoSearchTextField, 'Search'), findsOneWidget);
126+
expect(find.text('Tap on the search field to open the search view'), findsOneWidget);
127+
// A decoy 'Cancel' button used in the animation.
128+
expect(find.widgetWithText(CupertinoButton, 'Cancel'), findsOneWidget);
129+
});
130+
94131
testWidgets('CupertinoSliverNavigationBar with previous route has back button', (
95132
WidgetTester tester,
96133
) async {
@@ -104,7 +141,7 @@ void main() {
104141
expect(nextButton1, findsNothing);
105142

106143
// Go back to the previous page.
107-
final Finder backButton1 = find.byType(CupertinoButton);
144+
final Finder backButton1 = find.byType(CupertinoButton).first;
108145
expect(backButton1, findsOneWidget);
109146
await tester.tap(backButton1);
110147
await tester.pumpAndSettle();
@@ -118,7 +155,7 @@ void main() {
118155
expect(nextButton2, findsNothing);
119156

120157
// Go back to the previous page.
121-
final Finder backButton2 = find.byType(CupertinoButton);
158+
final Finder backButton2 = find.byType(CupertinoButton).first;
122159
expect(backButton2, findsOneWidget);
123160
await tester.tap(backButton2);
124161
await tester.pumpAndSettle();

0 commit comments

Comments
 (0)