I made this Custom Widget which is acting like autocompleting the text taken from Custom API call. Of course you can change some of the parameters inside the code in order to work with your API request, but the general idea is there.
The Custom Widget
[78a2b992-d340-421a-baa8-f784bac821bf.png]
This is the code
import '../../event/event_widget.dart';
import '../../person/person_widget.dart';
class AutoCompleteTextField extends StatefulWidget {
const AutoCompleteTextField({
Key key,
this.width,
this.height,
this.data,
}) : super(key: key);
final double width;
final double height;
final dynamic data;
@override
_AutoCompleteStateTextField createState() => _AutoCompleteStateTextField();
}
class _AutoCompleteStateTextField extends State {
final List _result = [];
@override
void initState() {
super.initState();
for (var result in widget.data) {
final User selectedItem = User(
id: result['ID'].toString(),
name: result['Name'],
image: result['Image'],
role: result['Role']);
_result.add(selectedItem);
}
}
@override
void dispose() {
// DO YOUR STUFF
super.dispose();
}
@override
Widget build(BuildContext context) {
return Center(
child: AutocompleteBasicUserExample(_result),
);
}
}
@immutable
class User {
const User({
this.id,
this.name,
this.image,
this.role,
});
final String id;
final String name;
final String image;
final String role;
@override
String toString() {
return '$name, $id, $image, $role';
}
@override
bool operator ==(Object other) {
if (other.runtimeType != runtimeType) {
return false;
}
return other is User &&
other.id == id &&
other.name == name &&
other.image == image &&
other.role == role;
}
@override
int get hashCode => hashValues(id, name, image, role);
}
class AutocompleteBasicUserExample extends StatefulWidget {
final List data;
const AutocompleteBasicUserExample(this.data);
static String _displayStringForOption(User option) => option.name;
@override
State createState() => _AutocompleteBasicUserExampleState();
}
class _AutocompleteBasicUserExampleState extends State {
@override
Widget build(BuildContext context) {
return Autocomplete(
displayStringForOption: AutocompleteBasicUserExample._displayStringForOption,
optionsBuilder: (TextEditingValue textEditingValue) {
if (textEditingValue.text == '') {
return const Iterable.empty();
}
return widget.data.where((User option) {
return option
.toString()
.toLowerCase()
.contains(textEditingValue.text.toLowerCase());
});
},
onSelected: (User selection) {
setState(() => FFAppState().search = false);
if (selection.role == 'Performances') {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => EventWidget(
eventID: selection.id,
),
),
);
print(['Performances', selection.id]);
} else if (selection.role == 'People') {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PersonWidget(
peopleID: selection.id,
),
),
);
print(['People', selection.id]);
}
debugPrint('You just selected ${AutocompleteBasicUserExample._displayStringForOption(selection)}');
debugPrint(widget.data.toString());
},
);
}
}
And this is how it will look like https://api.flutter.dev/flutter/material/Autocomplete-class.html