Flutter auto-suggest TextField - forms

Question

I am developing a Flutter app, which contains a TextFormField/TextField inside Form. One of the TextFields will be auto suggest/complete.
What is the proper widget to show a list of data when the TextField input changes?

Answer 1

Flutter has an upcoming AutoComplete feature and you can track its progress in this thread. Aside from using the mentioned packages in the comments, you can also try using RawAutocomplete for your Text[Form]Field while waiting for the AutoComplete feature to be released. You need to be on master channel to try this though.
Here's a sample following this demo.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var _textFieldHints = List<String>();
var _textFieldController;
#override
void dispose() {
super.dispose();
_textFieldController.dispose();
}
_addAutoFillText() {
if (_textFieldController.text.isEmpty) {
// Don't add input text if TextFormField is empty
debugPrint('_textFieldController.text is empty');
} else {
debugPrint('${_textFieldController.text} added');
setState(() {
// Add TextFormField String to List
_textFieldHints.add(_textFieldController.text);
// Clear TextFormField after adding
_textFieldController.clear();
});
debugPrint('_textFieldHints contains:');
_textFieldHints.sort();
_textFieldHints.forEach((text) {
debugPrint('$text');
});
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Container(
padding: EdgeInsets.all(16.0),
child: RawAutocomplete<String>(
optionsBuilder: (TextEditingValue textEditingValue) {
if (textEditingValue.text == null ||
textEditingValue.text == '') {
return const Iterable<String>.empty();
}
return _textFieldHints.where((String option) {
return option
.toLowerCase()
.contains(textEditingValue.text.toLowerCase());
});
},
onSelected: (String selection) {
debugPrint('$selection selected');
},
fieldViewBuilder: (BuildContext context,
TextEditingController textEditingController,
FocusNode focusNode,
VoidCallback onFieldSubmitted) {
_textFieldController = textEditingController;
return TextFormField(
controller: _textFieldController,
focusNode: focusNode,
onFieldSubmitted: (String value) {
onFieldSubmitted();
},
);
},
optionsViewBuilder: (BuildContext context,
AutocompleteOnSelected<String> onSelected,
Iterable<String> options) {
return Align(
alignment: Alignment.topLeft,
child: Material(
elevation: 4.0,
child: Container(
height: 200.0,
child: ListView.builder(
padding: EdgeInsets.all(8.0),
itemCount: options.length + 1,
itemBuilder: (BuildContext context, int index) {
if (index >= options.length) {
return TextButton(
child: const Text('clear'),
onPressed: () {
_textFieldController.clear();
},
);
}
final String option = options.elementAt(index);
return GestureDetector(
onTap: () {
onSelected(option);
},
child: ListTile(
title: Text(option),
),
);
},
),
),
),
);
},
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => _addAutoFillText(),
child: Icon(Icons.add),
),
);
}
}