Flutter: FutureBuilder issue - flutter

Question

Generated list is sending null future
class _HomePageState extends State<HomePage> {
AppStateViewModal appStateViewModal = AppStateViewModal();
late Future<List<PackageDataModal>> packageList;
#override
void initState() {
super.initState();
packageList = _getPackageList();
}
Future<List<PackageDataModal>> _getPackageList() async {
return await appStateViewModal.getPackages();
}
#override
Widget build(BuildContext context) {
return FutureBuilder(
future: packageList,
builder: (context,
AsyncSnapshot<List<PackageDataModal>> packageSnapshot) =>
packageSnapshot.hasData
? GridView.builder(
itemCount: packageSnapshot.data!.length,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1),
itemBuilder: (context, index) => CardView(
packageData: PackageDataModal(
title: packageSnapshot.data![index].title,
description: packageSnapshot.data![index].description,
packageId: packageSnapshot.data![index].packageId),
imageList: const <ImageDataModal>[
// Generate a "Imagelist" for every "packageId"
// packageId is "$index"
// I want to return "List<ImageDataModal>""
// But I am getting "Future<List<ImageDataModal>>""
// to fix it, i just need to "await" but build cant do "Async"
// What i am doing wrong ?
// ApiUrl is like /api/packages
// and after this
// ApiUrl is like /api/packages/$index/images as List
// BackEnd Services is sending back the data to widget
// I have seen with doing print statments
// First FutureBuilder is running fine but when it comes to next
// Data is not showing.
// Dummy ImageDataModal is working and shwoing the expected behaviour
],
),
)
: const Center(
child: CircularProgressIndicator(),
),
);
}
}
I was trying to Pass the Future to next Widget and then trying to use FutureBuilder but no success. Data is not reaching there.
class CardView extends StatefulWidget {
const CardView({Key? key, required this.imageList, required this.packageData})
: super(key: key);
final PackageDataModal packageData;
final Future<List<ImageDataModal>> imageList;
#override
State<CardView> createState() => _CardViewState();
}
class _CardViewState extends State<CardView> {
#override
Widget build(BuildContext context) {
return FutureBuilder<List<ImageDataModal>>(
future: widget.imageList,
builder: (context, imageSnapshot) => Card(
margin: const EdgeInsets.all(8.0),
child: Column(
children: [
CarouselSlider.builder(
itemCount: imageSnapshot.data!.length,
itemBuilder: (context, imageIndex, pageIndex) =>
CachedNetworkImage(
imageUrl: imageSnapshot.data![imageIndex].image,
placeholder: (context, text) => const Placeholder(),
),
options:
CarouselOptions(aspectRatio: 16 / 9, autoPlay: true),
),
Text(widget.packageData.title),
const SizedBox(height: 2),
Text(widget.packageData.description),
],
),
));
}
}
I checked the Service which is calling the api to fetch the data is working fine and i checked it that it is reaching the card_view_widget.dart file properly

Answer 1

First correct your card_view_widget to be null aware(Handle null list)
class CardView extends StatefulWidget {
const CardView({Key? key, this.imageList, required this.packageData})
: super(key: key);
final PackageDataModal packageData;
final Future<List<ImageDataModal>>? imageList;
#override
State<CardView> createState() => _CardViewState();
}
class _CardViewState extends State<CardView> {
#override
Widget build(BuildContext context) {
return FutureBuilder<List<ImageDataModal>>(
future: widget.imageList,
builder: (context, imageSnapshot) {
if (!imageSnapshot.hasData &&
imageSnapshot.connectionState == ConnectionState.waiting) {
return const Center(
child: CircularProgressIndicator(),
);
}
if (!imageSnapshot.hasData) {
return Text(
'No image found',
style: Theme.of(context).textTheme.subtitle1,
);
}
return Card(
margin: const EdgeInsets.all(8.0),
child: Column(
children: [
CarouselSlider.builder(
itemCount: imageSnapshot.data!.length,
itemBuilder: (context, imageIndex, pageIndex) =>
CachedNetworkImage(
imageUrl: imageSnapshot.data![imageIndex].image,
placeholder: (context, text) => const Placeholder(),
),
options: CarouselOptions(aspectRatio: 16 / 9, autoPlay: true),
),
Text(widget.packageData.title),
const SizedBox(height: 2),
Text(widget.packageData.description),
],
),
);
},
);
}
}
let me know of other errors

Answer 2

I found the solution. My data model, which is Model.fromjson, was mapping the wrong key. I was getting the HTTP response properly, but it was sending the null data to the Future<List>.
It was String itemId, but I changed it previously and forgot to do the fix to String packageId as I was getting the JSON string.