Flutter TypeAheadField not showing results

Question

I am having some trouble displaying data from API ( https://en.wikipedia.org/w/rest.php/v1/search/title?q=bojack&limit=5 )

The API works on PostMan. I am using this plugin https://pub.dev/packages/flutter_typeahead

This is my Search page

Widget build(BuildContext context) {
    final TextEditingController _controller = TextEditingController();
    return  Scaffold(
      backgroundColor: Colors.grey[300],
      body:  Padding(
        padding: const EdgeInsets.all(10.0),

        child:TypeAheadField(
          textFieldConfiguration: TextFieldConfiguration(
            controller: _controller,
            textInputAction: TextInputAction.search,
            autofocus: true,
            decoration: const InputDecoration(
              border: OutlineInputBorder()
            )
          ),
          suggestionsCallback: (pattern) async {
            
            if (pattern != null && pattern.length > 0) {
              return await BackendService.getSuggestions(pattern);
            } else {
              return [];
            }
          },
          itemBuilder: (context, suggestion) {
            return ListTile(
              leading: const Icon(Icons.shopping_cart),
              title: Text('\$${suggestion}'),
            );
          },
          onSuggestionSelected: (suggestion) {
            Get.back();
          },

        )
      )
    );
  }

This is the Backend Class Service

class BackendService {
  
  static Future<Iterable<Object?>> getSuggestions(query) async {
    
    var res = await CallApi().wikipediaGet('search/title?q=$query&limit=5');

    var data = jsonDecode(res.body);
    print(data.runtimeType);

    return data;
    
  }
}

This is what I see on the emulator image

How can I show/fetch (new) results on the list when the user type on the input

Answer 1

You are getting api response in map and you are returning list from your getSuggestions function so you need to return list of pages key from map.

Refactor your backend service code to this

class BackendService {
  
  static Future<List<Object>> getSuggestions(query) async {
    
    var res = await CallApi().wikipediaGet('search/title?q=$query&limit=5');

    var data = jsonDecode(res.body);
    print(data.runtimeType);

    return data['pages'];
    
  }
}