Flutter - convert dropdownformfield to autocompleteFormField - flutter

Question

I have a dropdownFormField which takes data from snapshot and working fine.
now the data has grown bigger, as such want to change it to autocompleteFormField.
The code for dropdownFormField I am using is like this:
Container(
height: 50.0,
padding: EdgeInsets.only(
left: 15, right: 15, top: 5),
child: DropdownButtonHideUnderline(
child: ButtonTheme(
child: FutureBuilder(
future: _testkit,
builder: (context,
AsyncSnapshot<TestkitList> snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
return Text('none');
case ConnectionState.waiting:
return Center(
child:
CircularProgressIndicator());
case ConnectionState.active:
return Text('');
case ConnectionState.done:
if (snapshot.hasError) {
return Text(
'error',
// '${snapshot.error}',
style: TextStyle(
color: Colors.red),
);
} else {
return DropdownButtonFormField<
String>(
hint:
Text("Select Testkit Name"),
value: _selectedTestkit,
onChanged: (newValue) async {
_selectedTestkit = newValue;
_selectedTestType =
await getTestType();
setState(() {});
print(
"the below line is printed in dropdownfield");
print(_selectedTestType);
},
validator: (value) => value ==
null
? 'Please select the Testkit'
: null,
items: (snapshot.data.data)
.map((item) =>
DropdownMenuItem<
String>(
child: Text(
item.attributes.name
.length >
30
? item
.attributes
.name
.substring(
0, 30)
: item
.attributes
.name,
),
value: item.id,
))
.toList(),
);
}
}
}),
)),
),
Now plugin example for autocompleteFormField is like below:
SimpleAutocompleteFormField<Person>(
decoration: InputDecoration(labelText: 'Person', border: OutlineInputBorder()),
suggestionsHeight: 80.0,
itemBuilder: (context, person) => Padding(
padding: EdgeInsets.all(8.0),
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Text(person!.name, style: TextStyle(fontWeight: FontWeight.bold)),
Text(person.address)
]),
),
onSearch: (search) async => people
.where((person) =>
person.name.toLowerCase().contains(search.toLowerCase()) ||
person.address.toLowerCase().contains(search.toLowerCase()))
.toList(),
itemFromString: (string) {
final matches = people.where((person) => person.name.toLowerCase() == string.toLowerCase());
return matches.isEmpty ? null : matches.first;
},
onChanged: (value) => setState(() => selectedPerson = value),
onSaved: (value) => setState(() => selectedPerson = value),
validator: (person) => person == null ? 'Invalid person.' : null,
)
somehow I am not able to make it pickup and work as whether I am using classname TestkitList' or snapshot.data.data' replacing the person which is in my case is a future.

Answer 1

You could flutter-typeahead package
https://pub.dev/packages/flutter_typeahead/install
TypeAheadField(
textFieldConfiguration: TextFieldConfiguration(
autofocus: true,
style: DefaultTextStyle.of(context).style.copyWith(
fontStyle: FontStyle.italic
),
decoration: InputDecoration(
border: OutlineInputBorder()
)
),
suggestionsCallback: (pattern) async {
return await BackendService.getSuggestions(pattern);
},
itemBuilder: (context, suggestion) {
return ListTile(
leading: Icon(Icons.shopping_cart),
title: Text(suggestion['name']),
subtitle: Text('\$${suggestion['price']}'),
);
},
onSuggestionSelected: (suggestion) {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => ProductPage(product: suggestion)
));
},
)