Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Sign in
Toggle navigation
F
Front-End
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
abdullh.alsoleman
Front-End
Commits
70aa0457
Unverified
Commit
70aa0457
authored
Mar 17, 2021
by
Justin McCandless
Committed by
GitHub
Mar 17, 2021
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Autocomplete dartpad examples fix (#77863)
Fixes the dartpad examples on the docs site.
parent
637fb5b9
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
294 additions
and
206 deletions
+294
-206
autocomplete.dart
packages/flutter/lib/src/material/autocomplete.dart
+44
-8
autocomplete.dart
packages/flutter/lib/src/widgets/autocomplete.dart
+250
-198
No files found.
packages/flutter/lib/src/material/autocomplete.dart
View file @
70aa0457
...
@@ -14,15 +14,33 @@ import 'text_form_field.dart';
...
@@ -14,15 +14,33 @@ import 'text_form_field.dart';
/// This example shows how to create a very basic Autocomplete widget using the
/// This example shows how to create a very basic Autocomplete widget using the
/// default UI.
/// default UI.
///
///
/// ```dart
imports
/// ```dart
main
/// import 'package:flutter/material.dart';
/// import 'package:flutter/material.dart';
/// ```
///
///
/// ```dart
/// void main() => runApp(const AutocompleteExampleApp());
///
/// class AutocompleteExampleApp extends StatelessWidget {
/// const AutocompleteExampleApp({Key? key}) : super(key: key);
///
/// @override
/// Widget build(BuildContext context) {
/// return MaterialApp(
/// home: Scaffold(
/// appBar: AppBar(
/// title: const Text('Autocomplete Basic'),
/// ),
/// body: const Center(
/// child: AutocompleteBasicExample(),
/// ),
/// ),
/// );
/// }
/// }
///
/// class AutocompleteBasicExample extends StatelessWidget {
/// class AutocompleteBasicExample extends StatelessWidget {
/// AutocompleteBasicExample({Key? key}) : super(key: key);
///
const
AutocompleteBasicExample({Key? key}) : super(key: key);
///
///
///
final
List<String> _kOptions = <String>[
///
static const
List<String> _kOptions = <String>[
/// 'aardvark',
/// 'aardvark',
/// 'bobcat',
/// 'bobcat',
/// 'chameleon',
/// 'chameleon',
...
@@ -52,11 +70,29 @@ import 'text_form_field.dart';
...
@@ -52,11 +70,29 @@ import 'text_form_field.dart';
/// This example shows how to create an Autocomplete widget with a custom type.
/// This example shows how to create an Autocomplete widget with a custom type.
/// Try searching with text from the name or email field.
/// Try searching with text from the name or email field.
///
///
/// ```dart
imports
/// ```dart
main
/// import 'package:flutter/material.dart';
/// import 'package:flutter/material.dart';
/// ```
///
///
/// ```dart
/// void main() => runApp(const AutocompleteExampleApp());
///
/// class AutocompleteExampleApp extends StatelessWidget {
/// const AutocompleteExampleApp({Key? key}) : super(key: key);
///
/// @override
/// Widget build(BuildContext context) {
/// return MaterialApp(
/// home: Scaffold(
/// appBar: AppBar(
/// title: const Text('Autocomplete Basic User'),
/// ),
/// body: const Center(
/// child: AutocompleteBasicUserExample(),
/// ),
/// ),
/// );
/// }
/// }
///
/// @immutable
/// @immutable
/// class User {
/// class User {
/// const User({
/// const User({
...
...
packages/flutter/lib/src/widgets/autocomplete.dart
View file @
70aa0457
...
@@ -78,12 +78,30 @@ typedef AutocompleteOptionToString<T extends Object> = String Function(T option)
...
@@ -78,12 +78,30 @@ typedef AutocompleteOptionToString<T extends Object> = String Function(T option)
/// This example shows how to create a very basic autocomplete widget using the
/// This example shows how to create a very basic autocomplete widget using the
/// [fieldViewBuilder] and [optionsViewBuilder] parameters.
/// [fieldViewBuilder] and [optionsViewBuilder] parameters.
///
///
/// ```dart imports
/// ```dart main
/// import 'package:flutter/widgets.dart';
/// import 'package:flutter/material.dart';
/// import 'package:flutter/material.dart';
/// ```
/// import 'package:flutter/widgets.dart';
///
/// void main() => runApp(const AutocompleteExampleApp());
///
/// class AutocompleteExampleApp extends StatelessWidget {
/// const AutocompleteExampleApp({Key? key}) : super(key: key);
///
/// @override
/// Widget build(BuildContext context) {
/// return MaterialApp(
/// home: Scaffold(
/// appBar: AppBar(
/// title: const Text('RawAutocomplete Basic'),
/// ),
/// body: const Center(
/// child: AutocompleteBasicExample(),
/// ),
/// ),
/// );
/// }
/// }
///
///
/// ```dart
/// class AutocompleteBasicExample extends StatelessWidget {
/// class AutocompleteBasicExample extends StatelessWidget {
/// const AutocompleteBasicExample({Key? key}) : super(key: key);
/// const AutocompleteBasicExample({Key? key}) : super(key: key);
///
///
...
@@ -152,12 +170,30 @@ typedef AutocompleteOptionToString<T extends Object> = String Function(T option)
...
@@ -152,12 +170,30 @@ typedef AutocompleteOptionToString<T extends Object> = String Function(T option)
/// This example is similar to the previous example, but it uses a custom T data
/// This example is similar to the previous example, but it uses a custom T data
/// type instead of directly using String.
/// type instead of directly using String.
///
///
/// ```dart imports
/// ```dart main
/// import 'package:flutter/widgets.dart';
/// import 'package:flutter/material.dart';
/// import 'package:flutter/material.dart';
/// ```
/// import 'package:flutter/widgets.dart';
///
/// void main() => runApp(const AutocompleteExampleApp());
///
/// class AutocompleteExampleApp extends StatelessWidget {
/// const AutocompleteExampleApp({Key? key}) : super(key: key);
///
/// @override
/// Widget build(BuildContext context) {
/// return MaterialApp(
/// home: Scaffold(
/// appBar: AppBar(
/// title: const Text('RawAutocomplete Custom Type'),
/// ),
/// body: const Center(
/// child: AutocompleteCustomTypeExample(),
/// ),
/// ),
/// );
/// }
/// }
///
///
/// ```dart
/// // An example of a type that someone might want to autocomplete a list of.
/// // An example of a type that someone might want to autocomplete a list of.
/// @immutable
/// @immutable
/// class User {
/// class User {
...
@@ -254,26 +290,44 @@ typedef AutocompleteOptionToString<T extends Object> = String Function(T option)
...
@@ -254,26 +290,44 @@ typedef AutocompleteOptionToString<T extends Object> = String Function(T option)
/// {@tool dartpad --template=freeform}
/// {@tool dartpad --template=freeform}
/// This example shows the use of RawAutocomplete in a form.
/// This example shows the use of RawAutocomplete in a form.
///
///
/// ```dart imports
/// ```dart main
/// import 'package:flutter/widgets.dart';
/// import 'package:flutter/material.dart';
/// import 'package:flutter/material.dart';
/// ```
/// import 'package:flutter/widgets.dart';
///
/// void main() => runApp(const AutocompleteExampleApp());
///
///
/// ```dart
/// class AutocompleteExampleApp extends StatelessWidget {
/// class AutocompleteFormExamplePage extends StatefulWidget {
/// const AutocompleteExampleApp({Key? key}) : super(key: key);
/// const AutocompleteFormExamplePage({Key? key}) : super(key: key);
///
///
/// @override
/// @override
/// AutocompleteFormExample createState() => AutocompleteFormExample();
/// Widget build(BuildContext context) {
/// return MaterialApp(
/// home: Scaffold(
/// appBar: AppBar(
/// title: const Text('RawAutocomplete Form'),
/// ),
/// body: const Center(
/// child: AutocompleteFormExample(),
/// ),
/// ),
/// );
/// }
/// }
///
/// class AutocompleteFormExample extends StatefulWidget {
/// const AutocompleteFormExample({Key? key}) : super(key: key);
///
/// @override
/// AutocompleteFormExampleState createState() => AutocompleteFormExampleState();
/// }
/// }
///
///
/// class AutocompleteFormExample
extends State<AutocompleteFormExamplePag
e> {
/// class AutocompleteFormExample
State extends State<AutocompleteFormExampl
e> {
/// final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
/// final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
/// final TextEditingController _textEditingController = TextEditingController();
/// final TextEditingController _textEditingController = TextEditingController();
/// String? _dropdownValue;
/// String? _dropdownValue;
/// String? _autocompleteSelection;
/// String? _autocompleteSelection;
///
///
///
final
List<String> _options = <String>[
///
static const
List<String> _options = <String>[
/// 'aardvark',
/// 'aardvark',
/// 'bobcat',
/// 'bobcat',
/// 'chameleon',
/// 'chameleon',
...
@@ -281,146 +335,139 @@ typedef AutocompleteOptionToString<T extends Object> = String Function(T option)
...
@@ -281,146 +335,139 @@ typedef AutocompleteOptionToString<T extends Object> = String Function(T option)
///
///
/// @override
/// @override
/// Widget build(BuildContext context) {
/// Widget build(BuildContext context) {
/// return Scaffold(
/// return Form(
/// appBar: AppBar(
/// key: _formKey,
/// title: const Text('Autocomplete Form Example'),
/// child: Column(
/// ),
/// children: <Widget>[
/// body: Center(
/// DropdownButtonFormField<String>(
/// child: Form(
/// value: _dropdownValue,
/// key: _formKey,
/// icon: const Icon(Icons.arrow_downward),
/// child: Column(
/// hint: const Text('This is a regular DropdownButtonFormField'),
/// children: <Widget>[
/// iconSize: 24,
/// DropdownButtonFormField<String>(
/// elevation: 16,
/// value: _dropdownValue,
/// style: const TextStyle(color: Colors.deepPurple),
/// icon: const Icon(Icons.arrow_downward),
/// onChanged: (String? newValue) {
/// hint: const Text('This is a regular DropdownButtonFormField'),
/// setState(() {
/// iconSize: 24,
/// _dropdownValue = newValue;
/// elevation: 16,
/// });
/// style: const TextStyle(color: Colors.deepPurple),
/// },
/// onChanged: (String? newValue) {
/// items: <String>['One', 'Two', 'Free', 'Four']
/// setState(() {
/// .map<DropdownMenuItem<String>>((String value) {
/// _dropdownValue = newValue;
/// return DropdownMenuItem<String>(
/// });
/// value: value,
/// },
/// child: Text(value),
/// items: <String>['One', 'Two', 'Free', 'Four']
/// );
/// .map<DropdownMenuItem<String>>((String value) {
/// }).toList(),
/// return DropdownMenuItem<String>(
/// validator: (String? value) {
/// value: value,
/// if (value == null) {
/// child: Text(value),
/// return 'Must make a selection.';
/// );
/// }
/// }).toList(),
/// return null;
/// validator: (String? value) {
/// },
/// if (value == null) {
/// ),
/// return 'Must make a selection.';
/// TextFormField(
/// }
/// controller: _textEditingController,
/// return null;
/// decoration: const InputDecoration(
/// },
/// hintText: 'This is a regular TextFormField',
/// ),
/// ),
/// TextFormField(
/// validator: (String? value) {
/// controller: _textEditingController,
/// if (value == null || value.isEmpty) {
/// return 'Can\'t be empty.';
/// }
/// return null;
/// },
/// ),
/// RawAutocomplete<String>(
/// optionsBuilder: (TextEditingValue textEditingValue) {
/// return _options.where((String option) {
/// return option.contains(textEditingValue.text.toLowerCase());
/// });
/// },
/// onSelected: (String selection) {
/// setState(() {
/// _autocompleteSelection = selection;
/// });
/// },
/// fieldViewBuilder: (BuildContext context, TextEditingController textEditingController, FocusNode focusNode, VoidCallback onFieldSubmitted) {
/// return TextFormField(
/// controller: textEditingController,
/// decoration: const InputDecoration(
/// decoration: const InputDecoration(
/// hintText: 'This is a
regular TextFormField
',
/// hintText: 'This is a
RawAutocomplete!
',
/// ),
/// ),
/// focusNode: focusNode,
/// onFieldSubmitted: (String value) {
/// onFieldSubmitted();
/// },
/// validator: (String? value) {
/// validator: (String? value) {
/// if (
value == null || value.isEmpty
) {
/// if (
!_options.contains(value)
) {
/// return '
Can\'t be empty
.';
/// return '
Nothing selected
.';
/// }
/// }
/// return null;
/// return null;
/// },
/// },
/// ),
/// );
/// RawAutocomplete<String>(
/// },
/// optionsBuilder: (TextEditingValue textEditingValue) {
/// optionsViewBuilder: (BuildContext context, AutocompleteOnSelected<String> onSelected, Iterable<String> options) {
/// return _options.where((String option) {
/// return Align(
/// return option.contains(textEditingValue.text.toLowerCase());
/// alignment: Alignment.topLeft,
/// });
/// child: Material(
/// },
/// elevation: 4.0,
/// onSelected: (String selection) {
/// child: SizedBox(
/// setState(() {
/// height: 200.0,
/// _autocompleteSelection = selection;
/// child: ListView.builder(
/// });
/// padding: const EdgeInsets.all(8.0),
/// },
/// itemCount: options.length,
/// fieldViewBuilder: (BuildContext context, TextEditingController textEditingController, FocusNode focusNode, VoidCallback onFieldSubmitted) {
/// itemBuilder: (BuildContext context, int index) {
/// return TextFormField(
/// final String option = options.elementAt(index);
/// controller: textEditingController,
/// return GestureDetector(
/// decoration: const InputDecoration(
/// onTap: () {
/// hintText: 'This is an RawAutocomplete!',
/// onSelected(option);
/// ),
/// focusNode: focusNode,
/// onFieldSubmitted: (String value) {
/// onFieldSubmitted();
/// },
/// validator: (String? value) {
/// if (!_options.contains(value)) {
/// return 'Nothing selected.';
/// }
/// return null;
/// },
/// );
/// },
/// optionsViewBuilder: (BuildContext context, AutocompleteOnSelected<String> onSelected, Iterable<String> options) {
/// return Align(
/// alignment: Alignment.topLeft,
/// child: Material(
/// elevation: 4.0,
/// child: SizedBox(
/// height: 200.0,
/// child: ListView.builder(
/// padding: const EdgeInsets.all(8.0),
/// itemCount: options.length,
/// itemBuilder: (BuildContext context, int index) {
/// final String option = options.elementAt(index);
/// return GestureDetector(
/// onTap: () {
/// onSelected(option);
/// },
/// child: ListTile(
/// title: Text(option),
/// ),
/// );
/// },
/// },
/// ),
/// child: ListTile(
/// ),
/// title: Text(option),
/// ),
/// );
/// },
/// ),
/// ElevatedButton(
/// onPressed: () {
/// FocusScope.of(context).requestFocus(new FocusNode());
/// if (!_formKey.currentState!.validate()) {
/// return;
/// }
/// showDialog<void>(
/// context: context,
/// builder: (BuildContext context) {
/// return AlertDialog(
/// title: const Text('Successfully submitted'),
/// content: SingleChildScrollView(
/// child: ListBody(
/// children: <Widget>[
/// Text('DropdownButtonFormField: "$_dropdownValue"'),
/// Text('TextFormField: "${_textEditingController.text}"'),
/// Text('RawAutocomplete: "$_autocompleteSelection"'),
/// ],
/// ),
/// ),
/// actions: <Widget>[
/// TextButton(
/// child: const Text('Ok'),
/// onPressed: () {
/// Navigator.of(context).pop();
/// },
/// ),
/// ),
/// );
/// },
/// ),
/// ),
/// ),
/// );
/// },
/// ),
/// ElevatedButton(
/// onPressed: () {
/// FocusScope.of(context).requestFocus(new FocusNode());
/// if (!_formKey.currentState!.validate()) {
/// return;
/// }
/// showDialog<void>(
/// context: context,
/// builder: (BuildContext context) {
/// return AlertDialog(
/// title: const Text('Successfully submitted'),
/// content: SingleChildScrollView(
/// child: ListBody(
/// children: <Widget>[
/// Text('DropdownButtonFormField: "$_dropdownValue"'),
/// Text('TextFormField: "${_textEditingController.text}"'),
/// Text('RawAutocomplete: "$_autocompleteSelection"'),
/// ],
/// ],
/// );
/// ),
/// },
/// ),
/// actions: <Widget>[
/// TextButton(
/// child: const Text('Ok'),
/// onPressed: () {
/// Navigator.of(context).pop();
/// },
/// ),
/// ],
/// );
/// );
/// },
/// },
///
child: const Text('Submit'),
///
);
///
)
,
///
}
,
///
]
,
///
child: const Text('Submit')
,
/// ),
/// ),
///
)
,
///
]
,
/// ),
/// ),
/// );
/// );
/// }
/// }
...
@@ -483,78 +530,83 @@ class RawAutocomplete<T extends Object> extends StatefulWidget {
...
@@ -483,78 +530,83 @@ class RawAutocomplete<T extends Object> extends StatefulWidget {
/// This examples shows how to create an autocomplete widget with the text
/// This examples shows how to create an autocomplete widget with the text
/// field in the AppBar and the results in the main body of the app.
/// field in the AppBar and the results in the main body of the app.
///
///
/// ```dart imports
/// ```dart main
/// import 'package:flutter/widgets.dart';
/// import 'package:flutter/material.dart';
/// import 'package:flutter/material.dart';
///
```
///
import 'package:flutter/widgets.dart';
///
///
/// ```dart
/// void main() => runApp(const AutocompleteExampleApp());
/// final List<String> _options = <String>[
///
/// class AutocompleteExampleApp extends StatelessWidget {
/// const AutocompleteExampleApp({Key? key}) : super(key: key);
///
/// @override
/// Widget build(BuildContext context) {
/// return const MaterialApp(
/// home: RawAutocompleteSplit(),
/// );
/// }
/// }
///
/// const List<String> _options = <String>[
/// 'aardvark',
/// 'aardvark',
/// 'bobcat',
/// 'bobcat',
/// 'chameleon',
/// 'chameleon',
/// ];
/// ];
///
///
/// class RawAutocompleteSplit
Page
extends StatefulWidget {
/// class RawAutocompleteSplit extends StatefulWidget {
/// const RawAutocompleteSplit
Page
({Key? key}) : super(key: key);
/// const RawAutocompleteSplit({Key? key}) : super(key: key);
///
///
/// @override
/// @override
/// RawAutocompleteSplit
PageState createState() => RawAutocompleteSplitPage
State();
/// RawAutocompleteSplit
State createState() => RawAutocompleteSplit
State();
/// }
/// }
///
///
/// class RawAutocompleteSplit
PageState extends State<RawAutocompleteSplitPage
> {
/// class RawAutocompleteSplit
State extends State<RawAutocompleteSplit
> {
/// final TextEditingController _textEditingController = TextEditingController();
/// final TextEditingController _textEditingController = TextEditingController();
/// final FocusNode _focusNode = FocusNode();
/// final FocusNode _focusNode = FocusNode();
/// final GlobalKey _autocompleteKey = GlobalKey();
/// final GlobalKey _autocompleteKey = GlobalKey();
///
///
/// @override
/// @override
/// Widget build(BuildContext context) {
/// Widget build(BuildContext context) {
/// return MaterialApp(
/// return Scaffold(
/// theme: ThemeData(
/// appBar: AppBar(
/// primarySwatch: Colors.blue,
/// // This is where the real field is being built.
/// ),
/// title: TextFormField(
/// title: 'Split RawAutocomplete App',
/// controller: _textEditingController,
/// home: Scaffold(
/// focusNode: _focusNode,
/// appBar: AppBar(
/// decoration: const InputDecoration(
/// // This is where the real field is being built.
/// hintText: 'Split RawAutocomplete App',
/// title: TextFormField(
/// controller: _textEditingController,
/// focusNode: _focusNode,
/// decoration: const InputDecoration(
/// hintText: 'Split RawAutocomplete App',
/// ),
/// onFieldSubmitted: (String value) {
/// RawAutocomplete.onFieldSubmitted<String>(_autocompleteKey);
/// },
/// ),
/// ),
/// onFieldSubmitted: (String value) {
/// RawAutocomplete.onFieldSubmitted<String>(_autocompleteKey);
/// },
/// ),
/// ),
///
body: Align(
///
),
///
alignment: Alignment.topLeft,
///
body: Align(
///
child: RawAutocomplete<String>(
///
alignment: Alignment.topLeft,
///
key: _autocompleteKey,
///
child: RawAutocomplete<String>(
///
focusNode: _focusNode
,
///
key: _autocompleteKey
,
///
textEditingController: _textEditingController
,
///
focusNode: _focusNode
,
///
optionsBuilder: (TextEditingValue textEditingValue) {
///
textEditingController: _textEditingController,
///
return _options.where((String option
) {
///
optionsBuilder: (TextEditingValue textEditingValue
) {
///
return option.contains(textEditingValue.text.toLowerCase());
///
return _options.where((String option) {
///
}).toList(
);
///
return option.contains(textEditingValue.text.toLowerCase()
);
/// }
,
/// }
).toList();
///
optionsViewBuilder: (BuildContext context, AutocompleteOnSelected<String> onSelected, Iterable<String> options) {
///
},
///
return Material(
///
optionsViewBuilder: (BuildContext context, AutocompleteOnSelected<String> onSelected, Iterable<String> options) {
///
elevation: 4.0,
///
return Material(
///
child: ListView(
///
elevation: 4.0,
///
children: options.map((String option) => GestureDetector
(
///
child: ListView
(
///
onTap: () {
///
children: options.map((String option) => GestureDetector(
///
onSelected(option);
///
onTap: () {
///
},
///
onSelected(option);
///
child: ListTile(
///
},
///
title: Text(option),
///
child: ListTile(
/// ),
///
title: Text(option
),
/// )
).toList()
,
/// ),
/// ),
/// )
).toList()
,
/// )
;
/// )
,
///
},
///
);
///
)
,
///
}
,
/// ),
/// ),
/// ),
/// ),
/// );
/// );
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment