flutterflutter-dependenciessearch-suggestionpub.dev

Flutter flutter_typeahead selecting first option only in onSuggestionSelected


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


Solution

  • 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.