How to create a list of Network images in Flutter

user_7732790 0
Viewed 8695

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.

carousel flutter-layout flutter list
4 Answers

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

user_114271870

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")
    ],
  );
      },
    );
  }
user_41396980

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

user_63240290

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,
)
user_102960000
Related