How to bind API response network image in carousel_slider?

Viewed 170

I want to Display Network Images from API Response in carousel_slider.

{
  "responseCode": 200,
  "responseMessage": "Success",
  "data": null,
  "dataList": [
    {
      "createdate": "02-12-2021 04:21 PM",
      "updatedate": "02-12-2021 04:21 PM",
      "createdByName": null,
      "lastModifiedByName": null,
      "createdById": 1,
      "lastModifiedById": null,
      "id": 1,
      "imgName": "Top-1.jpg",
      "imgUniqueName": "Top-1.jpg",
      "imgTitle": "test",
      "imgDesc": "test",
      "imgPath": "/neoimages/bannerimage/Top-1.jpg",
      "isDelete": false
    },
    {
      "createdate": "03-12-2021 11:38 AM",
      "updatedate": "03-12-2021 11:38 AM",
      "createdByName": null,
      "lastModifiedByName": null,
      "createdById": 1,
      "lastModifiedById": null,
      "id": 2,
      "imgName": "B1.jpg",
      "imgUniqueName": "B1.jpg",
      "imgTitle": "test",
      "imgDesc": "test",
      "imgPath": "/neoimages/bannerimage/B1.jpg",
      "isDelete": false
    },
    {
      "createdate": "03-12-2021 11:41 AM",
      "updatedate": "03-12-2021 11:41 AM",
      "createdByName": null,
      "lastModifiedByName": null,
      "createdById": null,
      "lastModifiedById": null,
      "id": 3,
      "imgName": "B2.jpg",
      "imgUniqueName": "B2.jpg",
      "imgTitle": "test",
      "imgDesc": "test",
      "imgPath": "/neoimages/bannerimage/B2.jpg",
      "isDelete": false
    },
    {
      "createdate": "03-12-2021 11:41 AM",
      "updatedate": "03-12-2021 11:41 AM",
      "createdByName": null,
      "lastModifiedByName": null,
      "createdById": null,
      "lastModifiedById": null,
      "id": 4,
      "imgName": "B3.jpg",
      "imgUniqueName": "B3.jpg",
      "imgTitle": "test",
      "imgDesc": "test",
      "imgPath": "/neoimages/bannerimage/B3.jpg",
      "isDelete": false
    },
    {
      "createdate": "03-12-2021 11:41 AM",
      "updatedate": "03-12-2021 11:41 AM",
      "createdByName": null,
      "lastModifiedByName": null,
      "createdById": null,
      "lastModifiedById": null,
      "id": 5,
      "imgName": "Expl-logo.png",
      "imgUniqueName": "1638511726056_Expl-logo.png",
      "imgTitle": "test",
      "imgDesc": "test",
      "imgPath": "/neoimages/bannerimage/B3.jpg",
      "isDelete": false
    }
  ],
  "excelDataList": null,
  "totalRecords": 5,
  "pageRecords": 0,
  "currentPageNumber": 0,
  "totalPages": 0
}

As above imgpath is image path and Base URL is http://143.110.248.5:20080.

Below is my Model class for Image.

class ImageModel {
  String? imgName;
  String? imgPath;
  // ImageModel(this.imgName);

  static ImageModel? fromHashMap(dynamic map) {
    if (map == null) return null;
    ImageModel result = new ImageModel();
    result.imgName = map["imgName"];
    result.imgPath = map["imgPath"];

    return result;
  }

  static List<ImageModel> fromArrayOfHashMap(dynamic jsonArray) {
    List<ImageModel> list = [];
    if (jsonArray != null) {
      for (var jsonObject in jsonArray) {
        list.add(fromHashMap(jsonObject)!);
      }
    }
    return list;
  }
}

I got the Proper response by Function which i created.

So how i can display Images in carousel_slider?

Please Help. Thank you.

1 Answers
CarouselSlider.builder(
    itemCount: list.length,
    itemBuilder: (BuildContext context, int itemIndex, int 
    pageViewIndex) =>
     Container(
        child: Image.network("http://143.110.248.5:20080${list[index]["imgPath"]}"),
   ),
)
Related