development/flutter
development/flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter synced 2024-10-04 07:19:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Autocomplete dartpad examples fix (#77863)

Browse source 
Fixes the dartpad examples on the docs site.
This commit is contained in:
Justin McCandless 2021-03-17 15:50:53 -07:00 committed by GitHub
parent 637fb5b9be
commit 70aa045705
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 294 additions and 206 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
packages/flutter/lib/src/material/autocomplete.dart
View file

@ -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';
/// 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({

448
packages/flutter/lib/src/widgets/autocomplete.dart
View file

@ -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)
/// 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)
/// {@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';
/// ///
/// ```dart /// void main() => runApp(const AutocompleteExampleApp());
/// class AutocompleteFormExamplePage extends StatefulWidget { ///
/// const AutocompleteFormExamplePage({Key? key}) : super(key: key); /// class AutocompleteExampleApp extends StatelessWidget {
/// const AutocompleteExampleApp({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 State<AutocompleteFormExamplePage> { /// class AutocompleteFormExample extends StatefulWidget {
/// const AutocompleteFormExample({Key? key}) : super(key: key);
///
/// @override
/// AutocompleteFormExampleState createState() => AutocompleteFormExampleState();
/// }
///
/// class AutocompleteFormExampleState extends State<AutocompleteFormExample> {
/// 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)
/// ///
/// @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: () { /// child: const Text('Submit'),
/// 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'),
/// ),
/// ],
/// ), /// ),
/// ), /// ],
/// ), /// ),
/// ); /// );
/// } /// }
@ -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 RawAutocompleteSplitPage extends StatefulWidget { /// class RawAutocompleteSplit extends StatefulWidget {
/// const RawAutocompleteSplitPage({Key? key}) : super(key: key); /// const RawAutocompleteSplit({Key? key}) : super(key: key);
/// ///
/// @override /// @override
/// RawAutocompleteSplitPageState createState() => RawAutocompleteSplitPageState(); /// RawAutocompleteSplitState createState() => RawAutocompleteSplitState();
/// } /// }
/// ///
/// class RawAutocompleteSplitPageState extends State<RawAutocompleteSplitPage> { /// class RawAutocompleteSplitState 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(),
/// ); /// ),
/// }, /// );
/// ), /// },
/// ), /// ),
/// ), /// ),
/// ); /// );