Flutter TextField Autocomplete
A Flutter package for TextField Autocomplete
![pub package]version_badge
Usage
import 'package:flutter_textfield_autocomplete/flutter_textfield_autocomplete.dart';
List<String> _typesOfBreed = []; // here you can declare your list instance.
GlobalKey<TextFieldAutoCompleteState<String>> _textFieldAutoCompleteKey =
new GlobalKey(); // just copy paste this declaration.
@override
void initState() {
super.initState();
_getPetBreeds(); // init the method where your list is populated
}
// get the data from api and populate your list.
// this is just an example method. Declare the method your own
_getPetBreeds() async {
try {
final _petService = PetService();
var result = await _petService.getBreeds();
var breeds = json.decode(result.body);
breeds['breeds'].forEach((breed) {
setState(() {
_typesOfBreed.add(breed['title']);
});
});
} catch (e) {
setState(() {
_isLoading = false;
});
return e.toString();
}
}
// design the container section your own
Container(
height: 58,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
),
child: TextFieldAutoComplete(
decoration: InputDecoration(
enabledBorder: new OutlineInputBorder(
borderSide: BorderSide(color: borderColor),
),
focusedBorder: new OutlineInputBorder(
borderSide: BorderSide(color: borderColor),
),
labelText:
"${getTranslated(context, 'pet_breed_app') ?? 'Pet breed'}",
hintText:
"${getTranslated(context, 'pet_breed_app') ?? 'Pet breed'}",
floatingLabelBehavior: FloatingLabelBehavior.always,
hintStyle: TextStyle(
color: secondaryColorWithOpacity,
fontSize: hintTextSize,
fontFamily: 'Roboto',
fontWeight: FontWeight.w300,
),
),
clearOnSubmit: false,
controller: _breed,
itemSubmitted: (String item) {
print('selected breed $item');
_breed!.text = item;
print('selected breed 2 ${_breed!.text}');
},
key: _textFieldAutoCompleteKey,
suggestions: _typesOfBreed,
itemBuilder: (context, String item) {
return Container(
padding: EdgeInsets.all(20),
child: Row(
children: [
Text(
item,
style: TextStyle(color: Colors.black),
)
],
),
);
},
itemSorter: (String a, String b) {
return a.compareTo(b);
},
itemFilter: (String item, query) {
return item
.toLowerCase()
.startsWith(query.toLowerCase());
}),
),