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.

Answer 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;
      ....
    }
  }