Want to add multiple images by extracting one method

Question

I wanted to add 3 circle image picker avatar and wanted to upload 3 different pictures in them but unfortunately not able to do that. I tried to do this by extracting the method and passing the image to the single extracted build method and in result the chosen one image is applied to all three avatars. Kindly help me get through it.

Below are the functions for picking image from gallery and camera :

 File _image;
  final Picker = ImagePicker();
  _imgFromCamera() async {

    final image = await Picker.pickImage(
        source: ImageSource.camera, imageQuality: 50
    );

    setState(() {
      _image = File(image.path);
    });
  }

  _imgFromGallery() async {
     final image = await  Picker.pickImage(
        source: ImageSource.gallery, imageQuality: 50
    );

    setState(() {
      _image = File(image.path);
    });
  }

Next is function for bottom sheet for picking the image either from gallery or camera:

void _showPicker(context) {
showModalBottomSheet(
    context: context,
    builder: (BuildContext bc) {
      return SafeArea(
        child: Container(
          child: new Wrap(
            children: <Widget>[
              new ListTile(
                  leading: new Icon(Icons.photo_library),
                  title: new Text('Photo Library'),
                  onTap: () {
                    _imgFromGallery();
                    Navigator.of(context).pop();
                  }),
              new ListTile(
                leading: new Icon(Icons.photo_camera),
                title: new Text('Camera'),
                onTap: () {
                  _imgFromCamera();
                  Navigator.of(context).pop();
                },
              ),
            ],
          ),
        ),
      );
    }
);

}

And here is the extracted method that I want to use for once for all three images:

GestureDetector buildGestureDetector(BuildContext context) {
return GestureDetector(
                    onTap: () {
                      _showPicker(context);
                    },
                    child: CircleAvatar(
                      radius: 53,
                      backgroundColor: Colors.black,
                      child: _image != null
                          ? ClipRRect(
                        borderRadius: BorderRadius.circular(50),
                        child: Image.file(
                          _image,
                          width: 100,
                          height: 100,
                          fit: BoxFit.fitHeight,
                        ),
                      )
                          : Container(
                        decoration: BoxDecoration(
                            color: Colors.grey[200],
                            borderRadius: BorderRadius.circular(50)),
                        width: 100,
                        height: 100,
                        child: Icon(
                          Icons.camera_alt,
                          color: Colors.grey[800],
                        ),
                      ),
                    ),
                  );

} }

And here is that extracted method is called inside widget :

 Row(
                children: [
                  Expanded(
                    child: buildGestureDetector(context),
                  ),
                ],
              ),

Kindly help me with applying 3 different pictures using this one extracted method and all the functions used once so that I don't need to go through all this process for all three pictures again and again.

score 1 · Accepted Answer · answered Feb 10 '22 at 01:51

1

The easiest way to handle this is of course passing "which avatar" info down to _imgFromCamera or _imgFromGallery . For example, if your 3 images have their own identities like 'A', 'B' and 'C',

onTap: () {
  _showPicker(context, 'A');
},

Then pass it to the _showPicker.

void _showPicker(context, id) {
...
  onTap: () {
     _imgFromGallery(id);   // Passed 'A' in this example
     Navigator.of(context).pop();
  }),
...

Then,

_imgFromGallery(id) async {
    final image = await  Picker.pickImage(
        source: ImageSource.gallery, imageQuality: 50
    );

    // Depends on the id, decide where and how to save the image.
    switch(id) {
      case 'A': setState(...); break;
      case 'B': saveIntoLocal(...); break;
      case 'C': uploadToServer(...); break;
      ....
    }
  }

answered Feb 10 '22 at 01:51

Hoon

637
5
10

You can see in both _imgFromCamera() and in _imgFromGallery() single File type variable _image is used in both functions setstate how could that variable differs in images? – Usama Bin Tahir Feb 10 '22 at 14:44
As you know, a single variable cannot take 3 images. Meaning, you have to deal with each differently. I cannot go too deeply because I don't know your project structure but the point is, passing down the image id down to the end can resolve your issue. For example, instead of using _image only, think of using List, Map, or even individual variables like _image1, _image2, _image3. – Hoon Feb 10 '22 at 20:05
I really appreciate your concern. But I am having an issue in passing multiple parameters in onTap: () { _showPIcker(context, 'A') } how can I pass multiple id here like 'B', 'C' because it's not applying picture on other avatars because only one parameters is passsed to _showPicker. – Usama Bin Tahir Feb 16 '22 at 12:29

Want to add multiple images by extracting one method

1 Answers1