I’m working on a Flutter application where I need to fetch and display a list of movies based on user input in a search field. The TextEditingController should trigger an API call to fetch movie data and update the ListView with the results. However, the list remains empty even after the API call is made.

Here’s my code:

import 'package:flutter/material.dart';
// Assume these classes are defined elsewhere
import 'api_call.dart';
import 'constants.dart';
import 'movie_model.dart';
import 'search_tile.dart';

class SearchMovies extends StatefulWidget {
  const SearchMovies({super.key});

  @override
  State<SearchMovies> createState() => _SearchMoviesState();
}

class _SearchMoviesState extends State<SearchMovies> {
  String text = '';
  List<MovieModel> searchMoviesList = [];
  final TextEditingController _searchController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _searchController.addListener(_onTextChanged);
  }

  @override
  void dispose() {
    _searchController.removeListener(_onTextChanged);
    _searchController.dispose();
    super.dispose();
  }

  void _onTextChanged() {
    fetchMovies(_searchController.text);
  }

  Future<void> fetchMovies(String query) async {
    if (query.isEmpty) {
      setState(() {
        searchMoviesList.clear();
      });
      return;
    }

    try {
      print('Fetching movies for query: $query');
      var movieResponse = await ApiCall(Constants.search + query).getData();
      print('API response: $movieResponse');
      setState(() {
        searchMoviesList.clear();
        List<dynamic> movieResults = movieResponse['results'];
        for (var element in movieResults) {
          searchMoviesList.add(MovieModel.fromJson(element));
        }
        print('Updated searchMoviesList: $searchMoviesList');
      });
    } catch (error) {
      print('Error fetching movies: $error');
      setState(() {
        searchMoviesList.clear();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Column(
          children: [
            TextFormField(
              controller: _searchController,
              onChanged: (value) {
                setState(() {
                  text = value;
                });
              },
              decoration: const InputDecoration(
                hintText: 'Search for movies',
                focusedBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.red),
                ),
              ),
            ),
          ],
        ),
      ),
      body: ListView.builder(
        itemCount: searchMoviesList.length,
        itemBuilder: (BuildContext context, int index) {
          return SearchTile(searchMoviesList: searchMoviesList, index: index);
        },
      ),
    );
  }
}



I have tried debugging the fetchmovies() methods. But 'movieResponse'-used to store API result, is giving empty list. I am expecting that after every character result list to be updated. API used:  static String search = 'https://api.themoviedb.org/3/search/movie?api_key=XXXXXXX&query=';