Listview.builder with dynamic items-CodePudding

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?

CodePudding user response：

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.