I have an app with a feature that allows users to upload images, and later these images are used at various points through the app. I use imagePicker to get the images, with the following method:

onTap: () async {
                      ImagePicker _picker = ImagePicker();
                      final XFile? _image = await _picker.pickImage(
                        source: ImageSource.gallery,
                        imageQuality: 50,
                      );

                      if (_image == null) {
                        ScaffoldMessenger.of(context).showSnackBar(
                            SnackBar(content: Text('No image was selected.')));
                      }

                      if (_image != null) {
                        print('Uploading ...');
                        Container(
                          child: Center(child: CircularProgressIndicator()),
                        );
                        StorageRepository().updateImage(user, _image, index);
                      }
                    },

One example of a widget with weird image resizing is the following:

SizedBox(
                            height: MediaQuery.of(context).size.height / 1.4,
                            width: MediaQuery.of(context).size.width,
                            child: Stack(
                              children: [
                                Container(
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(15),
                                    boxShadow: [
                                      BoxShadow(
                                          color: Colors.grey,
                                          offset: Offset(3, 3),
                                          blurRadius: 3,
                                          spreadRadius: 3)
                                    ],
                                    image: DecorationImage(
                                      fit: BoxFit.fill,
                                      image: NetworkImage(voteUser!
                                          .imageUrls[state.imageUrlIndex]),
                                    ),
                                  ),
                                ),
                            ...
                             ),
                          ),

In this image, you can see the guy is stretched out, making the photo look weird.

My question is, how can I make an image that consistently looks good, but will not overflow the screen? I recognize cropping the image during the upload can help, however i would then have to set widgets with variable widths and heights rather than using mediaQuery, which runs the risk of overflowing the screen. Any ideas? thanks!

CodePudding user response：

use Boxfit.cover it will work.

fit: BoxFit.cover