how to add images in Listview.builder in flutter web

Question

I am new to flutter. I want to add multiple images as well as single to flutter website which I am creating. I am unable to do that I watched many tutorials but nothing helped me out. that's why I came here. This is the stuff i have done so far...

final picker = ImagePicker();
List<File> images = [];
List<int> imageFiles = [];
void _imgFromGallery() async {
List<XFile>? files = await picker.pickMultiImage(
  imageQuality: 50,
);
if (files != null) {
  for (var element in files) {
    setState(() {
      images.add(File(element.path));
    });
  }
}

}

Here i am adding the images in ListView.Builder

Text(
                          'Attachments',
                          style: AppTextStyles.boldBlack,
                        ),
                        const SizedBox(
                          height: 10,
                        ),
                        images.isEmpty
                            ? const SizedBox()
                            : SizedBox(
                          height: 90,
                          child: ListView.builder(
                            shrinkWrap: true,
                            itemCount: images.length,
                            scrollDirection: Axis.horizontal,
                            itemBuilder: (context, index) {
                              return Row(
                                crossAxisAlignment:
                                CrossAxisAlignment.start,
                                children: [
                                  Image.file(
                                    images[index],
                                    height: 80,
                                    width: 80,
                                  ),
                                  GestureDetector(
                                    onTap: () {
                                      setState(() {
                                        images.remove(images[index]);
                                      });
                                    },
                                    child: const Icon(Icons.close),
                                  ),
                                ],
                              );
                            },
                          ),
                        ),
                        DottedBorder(
                          child: Container(
                            padding: const EdgeInsets.symmetric(
                              vertical: 25,
                              horizontal: 10,
                            ),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(10),
                            ),
                            child: Column(
                              children: [
                                Center(
                                  child: GestureDetector(
                                    onTap: () {
                                      _imgFromGallery();
                                    }, //
                                    child: const Text(
                                      'Upload Files',
                                      style: TextStyle(
                                        decoration: TextDecoration.underline,
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),

And the Output I want

beside my answer, other part of your code seems to be ok, what result do you get with that? — eamirho3ein, Oct 21 '22 at 07:53
@eamirho3ein i am getting this error. !kIsWeb "Image.file is not supported on Flutter Web. Consider using either Image.asset or Image.network instead." — Aqeel Mughal, Oct 21 '22 at 10:18

eamirho3ein · Accepted Answer · 2022-10-21T12:23:14.390

0

You should not call setState in your loop, try this:

if (files != null) {
  for (var element in files) {
    images.add(File(element.path));
  }
  setState(() {});
}

For your main issue in flutter web instead of Image.file you need to use Image.memory, so first change your piker result list to this:

final picker = ImagePicker();
List<Uint8List> images = [];// <----change this
List<int> imageFiles = [];
void _imgFromGallery() async {
List<XFile>? files = await picker.pickMultiImage(
  imageQuality: 50,
);
if (files != null) {
  for (var element in files) {
    images.add(await element.readAsBytes());// <----change this
  }
  setState(() {});
}

then show it like this:

Image.memory(// <----change this
    images[index],
    height: 80,
    width: 80,
)

edited Oct 21 '22 at 12:23

answered Oct 21 '22 at 07:22

eamirho3ein

16,619
2
12
23

i got this error after adding readAsBytes() The argument type 'Future' can't be assigned to the parameter type 'Uint8List'. – Aqeel Mughal Oct 21 '22 at 12:12
Are you need images to be a List of Files or it can be list of something else? – eamirho3ein Oct 21 '22 at 12:15
i want images to be shown in listview as shown in the Output file.. – Aqeel Mughal Oct 21 '22 at 12:18
1

I updated my answer, check it out. @AqeelMughal – eamirho3ein Oct 21 '22 at 12:23
was it what you want? @AqeelMughal – eamirho3ein Oct 21 '22 at 13:35

how to add images in Listview.builder in flutter web

1 Answers1