Question 197087 in Flutter Question posted in
The official Flutter documentation can be found here.

flutter Image provider: NetworkImage, Image key: NetworkImage

I am trying to load an array of images inside a horizontal ListView.builder from an API fetching data from the server. The API returns an array inside another with the key profile_img.Below is what the API return looks like:

[

    {
    "id": "1",
    "profile_img": [
        [
            "https://website.com/image1.png",
            "https://website.com/image2.png"
        ]
    ],
    "vendor_tax_check": "Registered",
    "total_list": "Total bookings 3 in the next 8 days"
    }

    {
    "id": "2",
    "profile_img": [
        [
            "https://website.com/image1.png",
            "https://website.com/image2.png"
        ]
    ],
    "vendor_tax_check": "Registered",
    "total_list": "Total bookings 13 in the next 30 days"
    }

]

I got an error Image provider: NetworkImage("[https://website.com/image1.png, https://website.com/image2.png]", scale: 1.0) and Image key: NetworkImage("[https://website.com/image1.png, https://website.com/image2.png]", scale: 1.0) from the key profile_img above when I implemented in listview as seen below:

ListView.builder(
                 scrollDirection: Axis.horizontal,
                 itemCount: data == null ? 0 : data.length,
                 itemBuilder: (BuildContext context, int index) {
                   return   Column(
                     child:children[
                        Text(data[index]['id']),
                                ListView.builder(scrollDirection: Axis.horizontal,
                                                  itemCount:data == null ? 0 :data[index]["profile_img"].length,
                                                   itemBuilder: (BuildContext context, int index) {
                                                      return  Align(
                                                                alignment: Alignment.centerRight,
                                                                child:Container(
                                                                child:Image.network(data[index]["profile_img"].toString()),
                                                            ));
                                                      },
                                                    ),
                                                                

                                    ]
                                        );
                                        },)

At one point, I tried to add an index like => Image.network(data[index]["profile_img"][index].toString() above but it only displays one of the images and the other shows error RangeError (index): Invalid value: Only valid value is 0: 1. Please can anyone kindly help on how to solve this?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So I finally solved this myself and feel I should post the solution here in case anyone faces a similar issue, below is my solution:

    
ListView.builder(
                 scrollDirection: Axis.horizontal,
                 itemCount: data == null ? 0 : data.length,
                 itemBuilder: (BuildContext context, int index) {

// added below 
final item = data[index];
                   return   Column(
                     child:children[
                        Text(data[index]['id']),
                                ListView.builder(scrollDirection: Axis.horizontal,
                                                  itemCount:data == null ? 0 :item["profile_img"].length,
                                                   itemBuilder: (BuildContext context, int index) {
final subItem =
                                                                                item['profile_img'][subIndex];

                                                      return  Align(
                                                                alignment: Alignment.centerRight,
                                                                child:Container(
                                                                child:Image.network(subItem.toString()),
                                                            ));
                                                      },
                                                    ),
                                                                

                                    ]
                                        );
                                        },)

  2. 0

    The value for the key profile_img is :

    [
        [
            "https://website.com/image1.png",
            "https://website.com/image2.png"
        ]
    ]

    To get the first image, you need to do : profile_img[0][0] and not profile_img[0] as it is an array in an array. You can then do profile_img[0][1] to get the second image etc.

    You added that you tried with : Image.network(data[index]["profile_img"][index].toString(). But you forgot a [0] so it should be : Image.network(data[index]["profile_img"][0][index].toString().

    I hope that can help

    EDIT :

    Here is a fixed code wrapping every image in an array into a column

      return ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: data == null ? 0 : data.length,
        itemBuilder: (BuildContext context, int index) {
          return Column(children: [
            Text(data[index]['id']),
            ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: data == null ? 0 : data[index]["profile_img"].length,
              itemBuilder: (BuildContext context, int profileIndex) {
                List<String> images = [];
                for (int i = 0;
                    i < data[index]["profile_img"][profileIndex].length;
                    i++) {
                  images.add(data[index]["profile_img"][profileIndex][i]);
                }
                return Column(children: [
                  for (int i = 0; i < images.length; i++)
                    Align(
                        alignment: Alignment.centerRight,
                        child: Container(
                          child: Image.network(data[index]["profile_img"]
                                  [profileIndex][i]
                              .toString()),
                        ))
                ]);
              },
            ),
          ]);
        });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search