How to create a list of Network images in Flutter

Question

I use "Carousel Pro" package to implement a carousel in my screen, in this Carousel class it need a list of images,

The syntax for Carousel class is

Carousel(
    images: [
      NetworkImage('https://cdn-images-1.medium.com/max/2000/1*GqdzzfB_BHorv7V2NV7Jgg.jpeg'),
      NetworkImage('https://cdn-images-1.medium.com/max/2000/1*wnIEgP1gNMrK5gZU7QS0-A.jpeg'),
      ExactAssetImage("assets/images/LaunchImage.jpg")
    ],
  )

i had a list of network image urls which is parsed from the json data, How ca i add the url list to the child 'images' of Carousel class.

Answer 1

It's easy just create a NetworkImage List and use it directly like this:

List<NetworkImage> images = List<NetworkImage>();
images.add(NetworkImage('url1');
images.add(NetworkImage('url2');

And in your Carousel should be like this

Carousel(
images: images
)

I hope this was helpful

Answer 2

This best way would be to create a list/array of your network images and either list them as such

List imageList = (http://cdn-images-1, http://cdn-images-2, http://cdn-images-3,)

Carousel(
    images: [
      NetworkImage(imageList[0]),
      NetworkImage(imageList[1]),
      NetworkImage(imageList[2]),
      ExactAssetImage("assets/images/LaunchImage.jpg")
    ],
  )

Or, use a ListView.builder to iterate through your list and use the index <- this would be ideal if you have a list that varies or may change during a view state.

ListView _buildList(context) {
    return ListView.builder(
                itemCount: imageList.length,
                itemBuilder: (context, int) {
            return Carousel(
                       images: [
                            NetworkImage(imageList[int]),
                            ExactAssetImage("assets/images/LaunchImage.jpg")
    ],
  );
      },
    );
  }

Answer 3

You can use map to make a list of NetworkImage:

images: imageURLs.map((String url) {
  return new NetworkImage(url));
}).toList(),

with imageURLs is the List url of your images

Answer 4

First of all create a List of NetworkImage:

List<NetworkImage> productImage = [];

Then you'll need to create a function that'll enable you to add the List of Strings of Network images to your productImage List.

static List<NetworkImage> productAssets(List<String> images) {
    List<NetworkImage> asset = List<NetworkImage>();

    for (String item in images) {
      asset.add(NetworkImage(item));
    }

    return asset;
  }

The function above takes the List of String of images and returns a List of Network images.

What you need to do now is to use the List (productAssets) to parse in the String of Network images URLs to add them to your Carousel images.

productImages: productAssets(['http://www.image1.com', 'http://www.image2.com']);

All you have to do now is to parse the productImages in your Carousel Widget

Carousel (
   images: productAssets,
)