Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Autocomplete Text Field in Flutter
import 'package:flutter/material.dart';
import 'package:flutter_typeahead/flutter_typeahead.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'ShaderMask Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Dough Demo'),
),
body: FormWidget(),
);
}
}
class FormWidget extends StatefulWidget {
@override
_FormWidgetState createState() => _FormWidgetState();
}
class _FormWidgetState extends State<FormWidget> {
final TextEditingController input = TextEditingController();
String selected = "";
@override
Widget build(BuildContext context) {
return Form(
child: Column(
children: <Widget>[
Image.network(
"https://pbs.twimg.com/media/EcOnvabUEAEXY7O?format=jpg&name=medium"),
Spacer(flex: 1),
Text(
"Selected Platform $selected",
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700),
),
Spacer(flex: 1),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Text('What is your favorite platform?'),
TypeAheadFormField(
textFieldConfiguration: TextFieldConfiguration(
decoration: InputDecoration(labelText: 'Platform'),
controller: this.input,
),
//Search and return found values
suggestionsCallback: (pattern) => platforms.where(
(item) =>
item.toLowerCase().contains(pattern.toLowerCase()),
),
itemBuilder: (_, item) => ListTile(title: Text(item)),
onSuggestionSelected: (query) {
this.input.text = query;
setState(() {
selected = query;
});
},
),
],
),
),
Spacer(flex: 5),
],
),
);
}
}
var platforms = ["Flutter", "Android", "iOS", "Mac", "React", "Cordova"];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment