Listview.builder with dynamic items

Question

I'm pretty new at Flutter and trying to make a simple app, where I fetch data with an API and trying to show the results.

This function is responsible to get the data (this function works fine, I get the data):

Connection connection = Connection();
  String textValue = '';
  Future<void> createlist() async {
    List<MoviesByTitle> movieTitle = [];
    String response = await connection.getMovieByTitle();
    var data = jsonDecode(response);
    var results = data['results'];
    for (int i = 0; i < results.length; i++) {
      movieTitle.add(
        MoviesByTitle(
          movieId: results[i]['id'],
          title: results[i]['original_title'],
          shortDescription: results[i]['overview'],
          year: results[i]['release_date'],
        ),
      );
    }
  }

And here comes the screen itself:

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Movies app"),
      ),
      body: Column(
        children: [
          TextField(
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Movie title',
            ),
            onSubmitted: (value) {
              textValue = value;
            },
            onChanged: (value) {
              textValue = value;
            },
          ),
          TextButton(
            onPressed: () {
              createlist();
            },
            child: Text("Press"),
          ),
          Expanded(
            child: ListView.builder(
                itemCount: 30,
                itemBuilder: (BuildContext context, int index) {
                  return Card(
                    child: Padding(
                      padding: const EdgeInsets.all(10.0),
                      child: Column(
                        children: [
                          Text("Movie title"),
                          Text("Short decscription"),
                        ],
                      ),
                    ),
                  );
                }),
          ),
        ],
      ),
      bottomNavigationBar: BottomMenu(),
    );
  }

What I want is: if the TextButton is pressed to show the data of the movies in separate cards. Somehow I can not find a way to create cards dynamically based on the data from the API (maybe I will wrap the ListView builder with a Visibility widget).

Is there any way to change the number of the card and their content dynamically?

Answer 1

You have added the items tothe list movieTitle.. you can use that as a reference to build the ui.. You can try

ListView.builder(
                itemCount: movieTitle.length,
                itemBuilder: (BuildContext context, int index) {
                  return Card(
                    child: Padding(
                      padding: const EdgeInsets.all(10.0),
                      child: Column(
                        children: [
                          Text("${movieTitle[index].title}"),
                          Text("${movieTitle[index].shortDescription}>"),
                        ],
                      ),
                    ),
                  );
                }),

Also you may have to move the movieTitle variable outside the fetch api method so it can be accessed from the ui part too.