Skip to content

Commit 81fd748

Browse files
TahaTesserTahaTesser
authored
CupertinoSearchTextField: Add interactive examples (#103042)
* `CupertinoSearchTextField`: Add interactive examples * Update docs
1 parent 666a5c9 commit 81fd748

File tree

5 files changed

+204
-47
lines changed

5 files changed

+204
-47
lines changed

‎examples/api/lib/cupertino/search_field/cupertino_search_field.0.dart

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
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+
5+
// Flutter code sample for CupertinoSearchTextField
6+
7+
import 'package:flutter/cupertino.dart';
8+
9+
void main() => runApp(const SearchTextFieldApp());
10+
11+
class SearchTextFieldApp extends StatelessWidget {
12+
const SearchTextFieldApp({Key? key}) : super(key: key);
13+
14+
@override
15+
Widget build(BuildContext context) {
16+
return const CupertinoApp(
17+
theme: CupertinoThemeData(brightness: Brightness.light),
18+
home: SearchTextFieldExample(),
19+
);
20+
}
21+
}
22+
23+
class SearchTextFieldExample extends StatefulWidget {
24+
const SearchTextFieldExample({Key? key}) : super(key: key);
25+
26+
@override
27+
State<SearchTextFieldExample> createState() => _SearchTextFieldExampleState();
28+
}
29+
30+
class _SearchTextFieldExampleState extends State<SearchTextFieldExample> {
31+
late TextEditingController textController;
32+
33+
@override
34+
void initState() {
35+
super.initState();
36+
textController = TextEditingController(text: 'initial text');
37+
}
38+
39+
@override
40+
void dispose() {
41+
textController.dispose();
42+
super.dispose();
43+
}
44+
45+
@override
46+
Widget build(BuildContext context) {
47+
return CupertinoPageScaffold(
48+
navigationBar: const CupertinoNavigationBar(
49+
middle: Text('CupertinoSearchTextField Sample'),
50+
),
51+
child: Center(
52+
child: Padding(
53+
padding: const EdgeInsets.all(16.0),
54+
child: CupertinoSearchTextField(
55+
controller: textController,
56+
placeholder: 'Search',
57+
),
58+
),
59+
),
60+
);
61+
}
62+
}

‎examples/api/lib/cupertino/search_field/cupertino_search_field.1.dart

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
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+
5+
// Flutter code sample for CupertinoSearchTextField
6+
7+
import 'package:flutter/cupertino.dart';
8+
9+
void main() => runApp(const SearchTextFieldApp());
10+
11+
class SearchTextFieldApp extends StatelessWidget {
12+
const SearchTextFieldApp({Key? key}) : super(key: key);
13+
14+
@override
15+
Widget build(BuildContext context) {
16+
return const CupertinoApp(
17+
theme: CupertinoThemeData(brightness: Brightness.light),
18+
home: SearchTextFieldExample(),
19+
);
20+
}
21+
}
22+
23+
class SearchTextFieldExample extends StatefulWidget {
24+
const SearchTextFieldExample({Key? key}) : super(key: key);
25+
26+
@override
27+
State<SearchTextFieldExample> createState() => _SearchTextFieldExampleState();
28+
}
29+
30+
class _SearchTextFieldExampleState extends State<SearchTextFieldExample> {
31+
String text = '';
32+
33+
@override
34+
Widget build(BuildContext context) {
35+
return CupertinoPageScaffold(
36+
navigationBar: const CupertinoNavigationBar(
37+
middle: Text('CupertinoSearchTextField Sample'),
38+
),
39+
child: Center(
40+
child: Column(
41+
mainAxisAlignment: MainAxisAlignment.center,
42+
children: <Widget>[
43+
Text(text),
44+
Padding(
45+
padding: const EdgeInsets.all(16.0),
46+
child: SearchTextField(
47+
fieldValue: (String value) {
48+
setState(() {
49+
text = value;
50+
});
51+
},
52+
),
53+
),
54+
],
55+
),
56+
),
57+
);
58+
}
59+
}
60+
61+
class SearchTextField extends StatelessWidget {
62+
const SearchTextField({
63+
Key? key,
64+
required this.fieldValue,
65+
}) : super(key: key);
66+
67+
final ValueChanged<String> fieldValue;
68+
69+
@override
70+
Widget build(BuildContext context) {
71+
return CupertinoSearchTextField(
72+
onChanged: (String value) {
73+
fieldValue('The text has changed to: $value');
74+
},
75+
onSubmitted: (String value) {
76+
fieldValue('Submitted text: $value');
77+
},
78+
);
79+
}
80+
}

‎examples/api/test/cupertino/search_field/cupertino_search_field.0_test.dart

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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+
5+
import 'package:flutter/cupertino.dart';
6+
import 'package:flutter_api_samples/cupertino/search_field/cupertino_search_field.0.dart' as example;
7+
import 'package:flutter_test/flutter_test.dart';
8+
9+
void main() {
10+
testWidgets('CupertinoTextField has initial text', (WidgetTester tester) async {
11+
await tester.pumpWidget(
12+
const example.SearchTextFieldApp(),
13+
);
14+
15+
expect(find.byType(CupertinoSearchTextField), findsOneWidget);
16+
expect(find.text('initial text'), findsOneWidget);
17+
18+
await tester.tap(find.byIcon(CupertinoIcons.xmark_circle_fill));
19+
await tester.pump();
20+
expect(find.text('initial text'), findsNothing);
21+
22+
await tester.enterText(find.byType(CupertinoSearchTextField), 'photos');
23+
await tester.pump();
24+
expect(find.text('photos'), findsOneWidget);
25+
});
26+
}

‎examples/api/test/cupertino/search_field/cupertino_search_field.1_test.dart

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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+
5+
import 'package:flutter/cupertino.dart';
6+
import 'package:flutter_api_samples/cupertino/search_field/cupertino_search_field.1.dart' as example;
7+
import 'package:flutter_test/flutter_test.dart';
8+
9+
void main() {
10+
testWidgets('Value changed callback updates entered text', (WidgetTester tester) async {
11+
await tester.pumpWidget(
12+
const example.SearchTextFieldApp(),
13+
);
14+
15+
expect(find.byType(CupertinoSearchTextField), findsOneWidget);
16+
17+
await tester.enterText(find.byType(CupertinoSearchTextField), 'photos');
18+
await tester.pump();
19+
expect(find.text('The text has changed to: photos'), findsOneWidget);
20+
21+
await tester.enterText(find.byType(CupertinoSearchTextField), 'photos from vacation');
22+
await tester.showKeyboard(find.byType(CupertinoTextField));
23+
await tester.testTextInput.receiveAction(TextInputAction.done);
24+
await tester.pump();
25+
expect(find.text('Submitted text: photos from vacation'), findsOneWidget);
26+
});
27+
}

‎packages/flutter/lib/src/cupertino/search_field.dart

Lines changed: 9 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -21,62 +21,24 @@ import 'text_field.dart';
2121
/// [controller]. For example, to set the initial value of the text field, use
2222
/// a [controller] that already contains some text such as:
2323
///
24-
/// {@tool snippet}
24+
/// {@tool dartpad}
25+
/// This examples shows how to provide initial text to a [CupertinoSearchTextField]
26+
/// using the [controller] property.
2527
///
26-
/// ```dart
27-
/// class MyPrefilledSearch extends StatefulWidget {
28-
/// const MyPrefilledSearch({Key? key}) : super(key: key);
29-
///
30-
/// @override
31-
/// State<MyPrefilledSearch> createState() => _MyPrefilledSearchState();
32-
/// }
33-
///
34-
/// class _MyPrefilledSearchState extends State<MyPrefilledSearch> {
35-
/// late TextEditingController _textController;
36-
///
37-
/// @override
38-
/// void initState() {
39-
/// super.initState();
40-
/// _textController = TextEditingController(text: 'initial text');
41-
/// }
42-
///
43-
/// @override
44-
/// Widget build(BuildContext context) {
45-
/// return CupertinoSearchTextField(controller: _textController);
46-
/// }
47-
/// }
48-
/// ```
28+
/// ** See code in examples/api/lib/cupertino/search_field/cupertino_search_field.0.dart **
4929
/// {@end-tool}
5030
///
5131
/// It is recommended to pass a [ValueChanged<String>] to both [onChanged] and
5232
/// [onSubmitted] parameters in order to be notified once the value of the
5333
/// field changes or is submitted by the keyboard:
5434
///
55-
/// {@tool snippet}
35+
/// {@tool dartpad}
36+
/// This examples shows how to be notified of field changes or submitted text from
37+
/// a [CupertinoSearchTextField].
5638
///
57-
/// ```dart
58-
/// class MyPrefilledSearch extends StatefulWidget {
59-
/// const MyPrefilledSearch({Key? key}) : super(key: key);
60-
///
61-
/// @override
62-
/// State<MyPrefilledSearch> createState() => _MyPrefilledSearchState();
63-
/// }
64-
///
65-
/// class _MyPrefilledSearchState extends State<MyPrefilledSearch> {
66-
/// @override
67-
/// Widget build(BuildContext context) {
68-
/// return CupertinoSearchTextField(
69-
/// onChanged: (String value) {
70-
/// print('The text has changed to: $value');
71-
/// },
72-
/// onSubmitted: (String value) {
73-
/// print('Submitted text: $value');
74-
/// },
75-
/// );
76-
/// }
77-
/// }
78-
/// ```
39+
/// ** See code in examples/api/lib/cupertino/search_field/cupertino_search_field.1.dart **
7940
/// {@end-tool}
41+
///
8042
class CupertinoSearchTextField extends StatefulWidget {
8143
/// Creates a [CupertinoTextField] that mimics the look and behavior of
8244
/// UIKit's `UISearchTextField`.

0 commit comments

Comments
 (0)