Listview.builder with dynamic items - flutter

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.