如何从图像源媒体 - 相机和图库中获取相应索引项的图像并显示在列表视图中

Question

我在使用 imagePicker 获取图像以在列表视图中工作时遇到问题。当您按下列表视图中的一个容器时，您应该能够从图库中选择一张图像。但是，它在列表视图中的整个列表中显示相同的图像。我认为应该使用索引来显示不同的图像。请提供任何建议代码示例！

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;

    });
  }

每个列表都有不同的图片上传

Answer 1

您应该创建文件列表并将图库图像存储在不同的索引上。

例如：-

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'),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          );
        });
  }
}