Passing image from one screen to another screen in flutter

Question

on first screen ill upload image using camera and i have one button going to next screen. Here when the user clicks the button image should be sent to the second screen.

below is the code- its a container which captures image and below that is a next button.

Container(
                        width: 200,
                        height: 200,
                        decoration: BoxDecoration(
                          border: Border.all(width: 1, color: Colors.black),
                          borderRadius: const BorderRadius.all(
                            Radius.circular(8),
                          ),
                        ),
                        child: _image != null
                            ? Image.file(
                                File(_image.path),
                                width: 150,
                                height: 150,
                                fit: BoxFit.cover,
                              )
                            : AddImage(
                                icon: Icons.add_a_photo,
                                onClick: () => getImage(ImageSource.camera)),
                      ),

   const SizedBox(
                        height: 100.0,
                      ),
                      Padding(
                        padding: const EdgeInsets.only(top: 39, right: 10),
                        child: Align(
                          alignment: Alignment.bottomRight,
                          child: CustomNextButton(context),
                        ),
                      ),

this is the button widget-

Widget CustomNextButton(context) {
  return Container(
    //alignment: AlignmentDirectional.bottomEnd,
    width: 65,
    height: 40,

    child: ElevatedButton(
      onPressed: () {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => const SecondPage(image: image)),
        );
      },
      style: ElevatedButton.styleFrom(
        backgroundColor: const Color.fromARGB(255, 210, 210, 210),
      ),
      child: const Text(
        'Next',
        style: TextStyle(fontSize: 14, color: Colors.black),
      ),
    ),
  );
}

second screen code-

   final File image;  //////this is to recieve image.//////

below is the code where i want to show the recieved image

          Padding(
                        padding: const EdgeInsets.only(right: 8.0),
                        child: Container(
                          width: 150,
                          height: 200,
                          child: Image.file(image),
                        ),
                      ),

I have tried passing the image in button but it's not working. Please help, thanks in advance!!!

check the question i edited whole formatting of question, https://stackoverflow.com/posts/75078680/revisions — Harsh Manvar, Jan 11 '23 at 11:49

score 1 · Answer 1 · answered Jan 11 '23 at 06:05

1

Use XFile?

 void _openCamera(BuildContext context) async {
        final XFile? pickedFile = await ImagePicker().pickImage(
          source: ImageSource.camera,
        );
    
        if (pickedFile == null) return;
        Navigator.of(context)
            .push(MaterialPageRoute(builder: (_) => second(image: pickedFile)));
      }

In second screen set your image as

Image.file(File(image.path)),

answered Jan 11 '23 at 06:05

Urvashi kharecha

625
1
9
26

On the second screen it says the image i.e image.path undefined. child: Image.file(File(image.path)), – nanda yelgar Jan 11 '23 at 06:19

Passing image from one screen to another screen in flutter

1 Answers1