Autocomplete
sample.packages.flutter.lib.src.material.autocomplete.23.
This example shows how to create an Autocomplete widget with a custom type. Try searching with text from the name or email field.
import 'package:flutter/material.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
class User {
const User({
required this.email,
required this.name,
});
final String email;
final String name;
@override
String toString() {
return '$name, $email';
}
@override
bool operator ==(Object other) {
if (other.runtimeType != runtimeType) {
return false;
}
return other is User && other.name == name && other.email == email;
}
@override
int get hashCode => Object.hash(email, name);
}
class AutocompleteBasicUserExample extends StatelessWidget {
const AutocompleteBasicUserExample({Key? key}) : super(key: key);
static const List _userOptions = [
User(name: 'Alice', email: '[email protected]'),
User(name: 'Bob', email: '[email protected]'),
User(name: 'Charlie', email: '[email protected]'),
];
static String _displayStringForOption(User option) => option.name;
@override
Widget build(BuildContext context) {
return Autocomplete(
displayStringForOption: _displayStringForOption,
optionsBuilder: (TextEditingValue textEditingValue) {
if (textEditingValue.text == '') {
return const Iterable.empty();
}
return _userOptions.where((User option) {
return option
.toString()
.contains(textEditingValue.text.toLowerCase());
});
},
onSelected: (User selection) {
debugPrint('You just selected ${_displayStringForOption(selection)}');
},
);
}
}
SHARE: