CODEWITHSUNDEEP
listfluttercarouselflutter-layout
Alvin John Babu
Alvin John Babu

Reputation: 2070

How to create a list of Network images in Flutter

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.

Upvotes: 2

Views: 11011

Answers (4)

Chichebe
Chichebe

Reputation: 598

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

Upvotes: 0

Younes Eddazi
Younes Eddazi

Reputation: 41

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

Upvotes: 4

hoangquyy
hoangquyy

Reputation: 2063

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

Upvotes: 1

Charles Jr
Charles Jr

Reputation: 9119

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

Upvotes: 1

Related Questions