CODEWITHSUNDEEP
jsonflutterdart
Niroop Nife
Niroop Nife

Reputation: 376

How to fetch imagesfrom json and place it in carousel? Flutter

I am fetching all the details from a json file but unable to parse the images object and place it in a carousel slider. This is my json response

{
    "status": true,
    "record": [
        {
            "adid": "44",
            "adsubcatid": "5",
            "aduserid": "37",
            "adname": "vhvhvuf",
            "adcoverimg": "http://codecell.in/girrivi/assets/adcover/scaled_image_picker4508569292934546411.jpg",
            "addesc": "vhvyv",
            "ads_price": "9090",
            "ads_location": "Bengaluru",
            "created_date": "23/10/2020",
            "user_name": "nife",
            "images": "http://codecell.in/girrivi/assets/adimgs/scaled_image_picker4508569292934546411.jpg,http://codecell.in/girrivi/assets/adimgs/scaled_image_picker45085692929345464111.jpg"
        }
    ]
}

And i need to parse this images object.

"images": "http://codecell.in/girrivi/assets/adimgs/scaled_image_picker4508569292934546411.jpg,http://codecell.in/girrivi/assets/adimgs/scaled_image_picker45085692929345464111.jpg"

This is how i'm fetching the json

String images;
Future<String> getProductDetails() async {
    String productDetailsUrl = Constant.productDetailsUrl+widget.id;
    Map<String, String> headers = {'Content-Type' : 'application/json'};

    final response = await http.get(productDetailsUrl, headers: headers);
    if(response.statusCode == 200){
      jsonResponse = json.decode(response.body);
      setState(() {
        price = jsonResponse['record'][0]['ads_price'];
        title = jsonResponse['record'][0]['adname'];
        description = jsonResponse['record'][0]['addesc'];
        location = jsonResponse['record'][0]['ads_location'];
        publishedOn = jsonResponse['record'][0]['created_date'];
        postedBy = jsonResponse['record'][0]['user_name'];
        adId = jsonResponse['record'][0]['adid'];
        postedById = jsonResponse['record'][0]['aduserid'];
        images = jsonResponse['record'][0]['images'];
      });
    }
  }

And this is how I'm placing the images in carousel

Carousel(
                  images: [
                    NetworkImage(images == null
                        ? "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/600px-No_image_available.svg.png"
                        : carImg)
                  ],
                  dotSize: 4.0,
                  dotSpacing: 15.0,
                  dotColor: Colors.lightGreenAccent,
                  indicatorBgPadding: 5.0,
                  borderRadius: true,
                  moveIndicatorFromBottom: 180.0,
                  noRadiusForIndicator: true,
                )

Upvotes: 0

Views: 459

Answers (2)

Shri Hari L
Shri Hari L

Reputation: 4923

I think you could something like this,

images: images == null  ?
           [ NetworkImage("LOADING IMAGE HERE") ] :
           images.split(',').map((e) => 
                                   NetworkImage(e)
                                   ).toList();

Refer: https://api.flutter.dev/flutter/dart-core/String/split.html

Upvotes: 0

Dung Ngo
Dung Ngo

Reputation: 1472

You can use for..in function when you want to apply a List:

images: [
  for(var img in carImg)
    return NetworkImage(images == null
       ? "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/600px-No_image_available.svg.png"
       : img);
]

Upvotes: 1

Related Questions