type 'List<BannerPic>' is not a subtype of type 'List<String>'

May 27, 2022

im calling an API which returns a lot of picture that i call it like this

Future<List<BannerPic>> _getGalleryBanner() async {
var data = await MainApi("url","", '', '', "getBannerImage");
var jsonData = json.decode(data);
var jsonParse = jsonData["data"];
List<BannerPic> bannerpic = [];

for (var u in jsonParse) {

  BannerPic bannerPic = BannerPic(
      u["number"],
      u["Picture"]
  );
  bannerpic.add(bannerPic);
}

return bannerpic;
}

and im trying to put it on a carousel, but i got an error like this :

type 'List<BannerPic>' is not a subtype of type 'List<String>'

and this is how i use the api feedback

FutureBuilder(
                            future: _getGalleryBanner(),
                            builder: (context, snapshot) {
                              if (snapshot.hasData) {
                                return CarouselImages(
                                  scaleFactor: 0.7,
                                  listImages: snapshot.data,
                                  height: 300.0,
                                  borderRadius: 30.0,
                                  cachedNetworkImage: true,
                                  verticalAlignment: Alignment.bottomCenter,
                                );
                              } else {
                                return DecoratedBox(
                                    decoration: BoxDecoration(
                                      color: Colors.white,
                                      borderRadius: BorderRadius.circular(1.h)
                                    )
                                );
                              }
                            },
                          )

i thought of because its already on List form i could just use it since it return :

List<BannerPic> bannerpic = [];

but i cant use it since it was not a type 'List<String>'

>Solution :

You have to get image url from the API.
try this code

Future<List<String>> _getGalleryBanner() async {
 var data = await MainApi("url","", '', '', "getBannerImage");
 var jsonData = json.decode(data);
 var jsonParse = jsonData["data"];
 List<String> bannerpic = [];
 for (var u in jsonParse) { 
  bannerpic.add(u["Picture"].toString);
 }
 return bannerpic;
}

FutureBuilder(
                        future: _getGalleryBanner(),
                        builder: (context, snapshot) {
                          if (snapshot.hasData) {
                            return CarouselImages(
                              scaleFactor: 0.7,
                              listImages: snapshot.data,
                              height: 300.0,
                              borderRadius: 30.0,
                              cachedNetworkImage: true,
                              verticalAlignment: Alignment.bottomCenter,
                            );
                          } else {
                            return DecoratedBox(
                                decoration: BoxDecoration(
                                  color: Colors.white,
                                  borderRadius: BorderRadius.circular(1.h)
                                )
                            );
                          }
                        },
                      )

Since you are need list of image URLs for CarouselImages
*make sure u["Picture"] contains image url.