After get request, data isn't showing in my screen - flutter

Question

In this code data successfully adding to my ''items'' list.
But In the second code, when I call my ''items'' list, It looks empty. What should I do for displaying data?
import 'dart:convert';
import 'package:http/http.dart' as http;
class IceCream {
final String id;
final String? title;
final String? shortTitle;
final String? description;
final String? longDescription;
final double price;
final String imageUrl;
final double? kilos;
final double? review;
final int? reviewCount;
IceCream(
{required this.id,
this.title,
this.shortTitle,
this.description,
this.longDescription,
required this.price,
required this.imageUrl,
this.kilos,
this.review,
this.reviewCount});
}
class Products {
List<IceCream> _items = [];
List<IceCream> get items {
return [..._items];
}
Future<void> fetchProducts() async {
final url = Uri.parse(
'https://ice-cream-app-31dce-default-rtdb.europe-west1.firebasedatabase.app/icecreams.json');
try {
final response = await http.get(url);
// print(response.body);
final extractedData = json.decode(response.body) as Map<String, dynamic>;
if (extractedData.length == null) {
return;
}
final List<IceCream> loadedProduct = [];
extractedData.forEach((prodId, prodData) {
loadedProduct.add(IceCream(
id: prodId,
title: prodData['title'],
description: prodData['description'],
price: prodData['price'],
imageUrl: prodData['imageUrl'],
shortTitle: prodData['shortTitle'],
longDescription: prodData['longDescription'],
kilos: prodData['kilos'],
review: prodData['review'],
reviewCount: prodData['reviewCount']));
});
_items = loadedProduct;
//print(items);
} catch (error) {
print(error);
throw (error);
}
}
}
Second code:
import 'package:flutter/material.dart';
import 'package:ice_cream_ui_clone/model/ice_cream.dart';
import 'package:ice_cream_ui_clone/screens/detail_screen.dart';
import '../utils/constants.dart';
import 'add_item_button.dart';
class TopFlavoursList extends StatelessWidget {
#override
Widget build(BuildContext context) {
final cart = Products().items;
return Expanded(
flex: 2,
child: ListView.builder(
itemCount: cart.length,
scrollDirection: Axis.horizontal,
itemBuilder: (ctx, i) => GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (ctx) => DetailScreen(
item: cart[i],
)));
},
child: Card(
color: myLightPinkColor,
child: Padding(
padding: EdgeInsets.all(lowPadding),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Image.network(
cart[i].imageUrl,
height: midImageHeight,
width: midImageWidht,
),
SingleChildScrollView(
child: Column(
children: [
Text(cart[i].title!,
style:
Theme.of(context).textTheme.headline5),
SizedBox(
height: lowPadding,
),
Row(
children: [
Text("${cart[i].kilos.toString()} KG",
style: Theme.of(context)
.textTheme
.headline6),
SizedBox(
width: lowImageWidht,
),
Icon(
Icons.star,
color: myYellowColor,
),
Text(cart[i].review.toString(),
style: Theme.of(context)
.textTheme
.headline6)
],
),
Row(
children: [
Text("\$${cart[i].price.toString()}",
style: Theme.of(context)
.textTheme
.headline5),
SizedBox(
width: lowImageWidht,
),
AddItemButton(
buttonShape: const CircleBorder(),
)
],
)
],
),
)
],
)),
),
)),
);
}
}

Answer 1

I think the issue is with the "forEach" statment. Should be something more like
extractedData.forEach((data) {
loadedProduct.add(IceCream())
});
The function in the forEach should take one argument not 2