I'm building a Flutter application with this plugin flutter_typeahead: ^5.2.0, but i'm facing some issue while showing those selected items as only first item is selecting. When i try to select any items other than the first one callback onSuggestionSelected
returns nothing.
This us simplified code:
// view code
Padding(
padding: const EdgeInsets.symmetric(horizontal: 30.0),
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(bottom: 12.0),
child: Container(
decoration: BoxDecoration(
color: white,
borderRadius: BorderRadius.circular(20)),
child: Stack(children: [
TypeAheadField(
textFieldConfiguration:
TextFieldConfiguration(
controller: controller.txt,
decoration: InputDecoration(
filled: true,
fillColor: white,
border: OutlineInputBorder(
borderRadius:
BorderRadius.circular(30),
borderSide: const BorderSide(
color: white, width: 1)),
focusedBorder: OutlineInputBorder(
borderRadius:
BorderRadius.circular(30),
borderSide: const BorderSide(
color: white, width: 1)),
enabledBorder: OutlineInputBorder(
borderRadius:
BorderRadius.circular(30),
borderSide: const BorderSide(
color: white, width: 1)),
contentPadding:
const EdgeInsets.symmetric(
horizontal: 15, vertical: 15),
hintText: 'Enter your zip code',
hintMaxLines: 1,
hintStyle: const TextStyle(
fontFamily: secondaryFont,
letterSpacing: 0,
color: txtSecondary,
fontWeight: FontWeight.w400,
fontSize: 16,
fontStyle: FontStyle.normal,
),
),
),
suggestionsCallback: (pattern) async {
var suggestions = await controller
.fetchZipCodeSuggestions(pattern);
return suggestions;
},
itemBuilder: (context, suggestion) {
return ListTile(
title: Text(suggestion),
);
},
onSuggestionSelected: (suggestion) {
print(suggestion);
controller.addSelectedZipCode(suggestion);
},
),
const Positioned(
top: 12,
right: 15,
child: Icon(
Icons.home_filled,
color: iconColor,
))
]),
),
),
],
),
),
// controller code
final selectedZipCodes = <String>[];
void addSelectedZipCode(String zipCode) {
selectedZipCodes.add(zipCode);
update();
}
void removeSelectedZipCode(String zipCode) {
print('removed');
selectedZipCodes.remove(zipCode);
update();
}
Future<List<String>> fetchZipCodeSuggestions(String pattern) async {
if (pattern.length < 3) {
return [];
}
String apipage = "/someAPI.php";
Map mappedData = {'text': pattern};
var response = await sendDataServer(apipage, mappedData);
var servResJson = response.data;
var zipDB = zipcodeFromJson(servResJson);
List<String> suggestions = zipDB.zipcode;
print('Fetched Suggestions: $suggestions');
update();
return suggestions;
}
API was fetched data is working fine, but only first item is retuning from onSuggestionSelected
when tap on those suggested items
Use ignoreAccessibleNavigation
property to true.
Allows a bypass of a problem on Flutter 3.7+ with the accessibility through Overlay that prevents flutter_typeahead to register a click on the list of suggestions properly.