jeudi 4 novembre 2021

flutter) How to use multiple images_pickers on one screen

I'm going to create several containers that can contain images. This image container is made to be added through a button and ListView.builder. So I'm trying to put each image in this image container, but there's a problem.

When an image is selected through picker_image, the same image is put in all containers. And when I select an image, it doesn't apply directly to the container and the image is output from the newly created container.

I use image_picker: ^0.6.7 and image_picker_for_web: ^0.1.0. (I tested on Web)

body part code

  //image
  var _pickedImage; 
  var _pickWebImage; //web test
  PickedFile _image;

  bool addImageSelete = false;
  bool isWeb = false; //check platform

  //image picker
  final picker = ImagePicker();

  //image container list (add press button)
  List<InkWell> _detailImageList = [];

          //image picker container list
          Container(
            height: isWeb ? 300 : MediaQuery.of(context).size.width * 2 / 5,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                //Add image container 
                Expanded(
                  child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    shrinkWrap: true,
                    // physics: NeverScrollableScrollPhysics(),
                    itemBuilder: (context, index) {
                      return _detailImageList[index];
                    },
                    itemCount: _detailImageList.length,
                  ),
                ),
              ],
            ),
          ),
          //add image container list 
         _addButton(),

image container widget code

  Widget _detailImage() {
//test
PickedFile _detailImageFile;

return InkWell(
  onTap: () async {
    //alert (seleted 'add image' or 'remove image')
    await _seletedDialogBox(context);
    //after alert seleted
    if (addImageSelete)
      _getImage(_detailImageFile, source: ImageSource.gallery);

    setState(() {
      addImageSelete = false;
    });
  },
  child: Container(
    margin: EdgeInsets.symmetric(horizontal: 10),
    width: MediaQuery.of(context).size.width * 2 / 5,
    height: MediaQuery.of(context).size.width * 2 / 5,

    child: _pickedImage == null
        ? Center(
            child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                "Not Image Yet",
              ),
            ],
          ))

        //output image
        : isWeb
            ? _pickedImage
            
            : Image.file(
                _pickedImage,
                fit: BoxFit.cover,
              ),
  ),
);

}

image_picker method

   Future<void> _getImage(PickedFile imageTest, {ImageSource source}) async {
    imageTest = await picker.getImage(source: source); 
    //test
    setState(() {
      if (imageTest != null) {
        if (isWeb) {
          _pickedImage = Image.network(
            imageTest.path,
            fit: BoxFit.cover,
          );
        } else {
          _pickedImage = File(imageTest.path);
        }
      }
    });
  }

I think image_picker should be created using the list like the container, can I know how to do this?

Thank you.




Aucun commentaire:

Enregistrer un commentaire