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

Flutter – How to get Image from imagesource media – camera&gallery for respective Index Items and show in a list View

I have a problem getting images using imagePicker to work in a listview. When you press one of the containers in the listview you should be able to choose an image from the gallery. But, it’s show same image for the whole list in listview. I think it’s should use index for different the image shown. Any suggestions code examples please!

final ImagePicker picker = ImagePicker();

 ListView.builder(
                itemCount: chilList!.length,
                
                itemBuilder: (context, i) {
return ElevatedButton(
                              style: ElevatedButton.styleFrom(
                                  primary: Colors.blueAccent),
                              onPressed: () {
                                myAlert(i);
                              },
                              child: Text('Upload Image'),
                            ),
                            image != null
                                ? Padding(
                                    padding: const EdgeInsets.symmetric(
                                        horizontal: 20),
                                    child: ClipRRect(
                                      borderRadius: BorderRadius.circular(8),
                                      child: Image.file(
                                        //to show image, you type like this.
                                        File(image!.path),
                                        fit: BoxFit.cover,
                                        width:
                                            MediaQuery.of(context).size.width,
                                        height: 300,
                                      ),
                                    ),
                                  )
                                : Text(
                                    '',
                                    style: TextStyle(fontSize: 20),
                                  ),
})

void myAlert(i) {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
            title: Text('Please choose media to select'),
            content: Container(
              height: MediaQuery.of(context).size.height / 6,
              child: Column(
                children: [
                  ElevatedButton(
                    style: ElevatedButton.styleFrom(primary: Colors.blueAccent),
                    //if user click this button, user can upload image from gallery
                    onPressed: () {
                      Navigator.pop(context);
                      getImage(ImageSource.gallery, i);
                    },
                    child: Row(
                      children: [
                        Icon(Icons.image),
                        Text('From Gallery'),
                      ],
                    ),
                  ),
                  ElevatedButton(
                    style: ElevatedButton.styleFrom(primary: Colors.blueAccent),
                    //if user click this button. user can upload image from camera
                    onPressed: () {
                      Navigator.pop(context);
                      getImage(ImageSource.camera, i);
                    },
                    child: Row(
                      children: [
                        Icon(Icons.camera),
                        Text('From Camera'),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          );
        });
  }

Future getImage(ImageSource media, i) async {
    
    var img = await picker.pickImage(source: media);

    setState(() {
      image = img;

    });
  }

Every list with different image upload

Tags:

2

Answers


  1. 0

    You should create a list of files and store gallery images on different indices.

    For Example :-

    import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

class DemoSampleClass extends StatefulWidget {
  @override
  _DemoSampleClassState createState() => _DemoSampleClassState();
}

class _DemoSampleClassState extends State<DemoSampleClass> {
  List<File?> imageList = List<File?>.filled(10, null); // Assuming 10 items
  final picker = ImagePicker();

  Future getImage(ImageSource media, i) async {

    var img = await picker.pickImage(source: media);
    if (img != null) {
      setState(() {
        imageList[i] = File(img.path);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: imageList.length, // Adjust itemCount as per your list size
        itemBuilder: (context, i) {
          return Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              children: [
                ElevatedButton(
                  onPressed: () {
                    myAlert(i); // Pick image for the specific index
                  },
                  child: Text('Upload Image'),
                ),
                imageList[i] != null
                    ? Padding(
                  padding: const EdgeInsets.symmetric(
                      horizontal: 20),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(8),
                    child: Image.file(
                      //to show image, you type like this.
                      File(imageList[i]!.path),
                      fit: BoxFit.cover,
                      width:
                      MediaQuery.of(context).size.width,
                      height: 300,
                    ),
                  ),
                )
                    : Text(
                  '',
                  style: TextStyle(fontSize: 20),
                ),
              ],
            ),
          );
        },
      ),
    );
  }

  void myAlert(i) {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            shape:
            RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
            title: Text('Please choose media to select'),
            content: Container(
              height: MediaQuery.of(context).size.height / 6,
              child: Column(
                children: [
                  ElevatedButton(
                    style: ElevatedButton.styleFrom(backgroundColor: Colors.blueAccent),
                    //if user click this button, user can upload image from gallery
                    onPressed: () {
                      Navigator.pop(context);
                      getImage(ImageSource.gallery, i);
                    },
                    child: Row(
                      children: [
                        Icon(Icons.image),
                        Text('From Gallery'),
                      ],
                    ),
                  ),
                  ElevatedButton(
                    style: ElevatedButton.styleFrom(backgroundColor: Colors.blueAccent),
                    //if user click this button. user can upload image from camera
                    onPressed: () {
                      Navigator.pop(context);
                      getImage(ImageSource.camera, i);
                    },
                    child: Row(
                      children: [
                        Icon(Icons.camera),
                        Text('From Camera'),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          );
        });
  }
}
    Login or Signup to reply.
  2. 0

    If i not wrong, the issue you’re facing comes from using a single image variable for all the items in your ListView. Since image is shared, every item ends up displaying the same image. You need to maintain a separate image for each item in the list. This can be done by creating a list to hold images, where each index corresponds to a specific item in the list.

    for example:

    final ImagePicker picker = ImagePicker();
List<File?> images = []; 

@override
void initState() {
  super.initState();
  images = List<File?>.filled(chilList!.length, null);
}

ListView.builder(
  itemCount: chilList!.length,
  itemBuilder: (context, i) {
    return Column(
      children: [
        ElevatedButton(
          style: ElevatedButton.styleFrom(primary: Colors.blueAccent),
          onPressed: () {
            myAlert(i);
          },
          child: Text('Upload Image'),
        ),
        images[i] != null
          ? Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(8),
                child: Image.file(
                  images[i]!,
                  fit: BoxFit.cover,
                  width: MediaQuery.of(context).size.width,
                  height: 300,
                ),
              ),
            )
          : Text(
              '',
              style: TextStyle(fontSize: 20),
            ),
      ],
    );
  },
);

void myAlert(int i) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
        title: Text('Please choose media to select'),
        content: Container(
          height: MediaQuery.of(context).size.height / 6,
          child: Column(
            children: [
              ElevatedButton(
                style: ElevatedButton.styleFrom(primary: Colors.blueAccent),
                onPressed: () {
                  Navigator.pop(context);
                  getImage(ImageSource.gallery, i); 
                },
                child: Row(
                  children: [
                    Icon(Icons.image),
                    Text('From Gallery'),
                  ],
                ),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(primary: Colors.blueAccent),
                onPressed: () {
                  Navigator.pop(context);
                  getImage(ImageSource.camera, i); 
                },
                child: Row(
                  children: [
                    Icon(Icons.camera),
                    Text('From Camera'),
                  ],
                ),
              ),
            ],
          ),
        ),
      );
    },
  );
}

Future<void> getImage(ImageSource media, int i) async {
  var img = await picker.pickImage(source: media);

  if (img != null) {
    setState(() {
      images[i] = File(img.path);
    });
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search