Flutter - push back and forth an image from a page to another

Question

I'm quite new to flutter and I'm not sure how to approach the following problem.

------ WHAT I WANT TO DO ------

I have to screen which are as follows

SCREEN 1: Has a button which is going to open the gallery in order to select an image, the image after will be selected is going to be sent to the next screen.

SCREEN 2: A simple screen using this flutter package in order to crop the image. After the image has been crop I want to send it back to the first screen(to be placed in the place of the button) and afterward to have access to it on the first screen.

------ WHAT DID I DO ------

I create the first and second screen, and I've also made the button to open the gallery and send the photo to the second screen. The problem arises when I'm trying to send the cropped image back to screen 1, this just doesn't work.

SCREEN 1:

class RegisterPage extends StatefulWidget {
  @override
  _RegisterPageState createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ProfilePicButton(),
    );
  }
}

SCREEN 2:

class SimpleCropRoute extends StatefulWidget {
  final File imagePath;

  const SimpleCropRoute({Key key, this.imagePath}) : super(key: key);

  @override
  _SimpleCropRouteState createState() => _SimpleCropRouteState();
}

class _SimpleCropRouteState extends State<SimpleCropRoute> {
  final cropKey = GlobalKey<ImgCropState>();

  Future<Null> showImage(BuildContext context, File file) async {
    FileImage(file)
        .resolve(new ImageConfiguration())
        .addListener(ImageStreamListener((ImageInfo info, bool _) {
      print('-------------------------------------------$info');
    }));
    return showDialog<Null>(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
              title: Text(
                'Current screenshot：',
                style: TextStyle(
                    fontFamily: 'Roboto',
                    fontWeight: FontWeight.w300,
                    color: Theme.of(context).primaryColor,
                    letterSpacing: 1.1),
              ),
              content: Image.file(file));
        });
  }

  @override
  Widget build(BuildContext context) {
    final Map args = ModalRoute.of(context).settings.arguments;
    return Scaffold(
        appBar: AppBar(
          elevation: 0,
          title: Text(
            'Zoom and Crop',
            style: TextStyle(color: Colors.black),
          ),
          backgroundColor: Colors.white,
          leading: new IconButton(
            icon:
                new Icon(Icons.navigate_before, color: Colors.black, size: 40),
            onPressed: () => Navigator.of(context).pop(),
          ),
        ),
        body: Center(
          child: ImgCrop(
            key: cropKey,
            // chipRadius: 100,
            // chipShape: 'rect',
            maximumScale: 3,
            image: FileImage(widget.imagePath),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () async {
            final crop = cropKey.currentState;
            final croppedFile =
                await crop.cropCompleted(widget.imagePath, pictureQuality: 600);

            Navigator.pop(context);
            Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => ProfilePicButton(
                    image: croppedFile)));

            // showImage(context, croppedFile);
          },
          tooltip: 'Increment',
          child: Text('Crop'),
        ));
  }
}

THE BUTTON ITS SELF:

class ProfilePicButton extends StatefulWidget {
  final File image;

  const ProfilePicButton({Key key, this.image}) : super(key: key);

  @override
  _ProfilePicButtonState createState() => _ProfilePicButtonState();
}

class _ProfilePicButtonState extends State<ProfilePicButton> {
  File _image;
  final picker = ImagePicker();
  final cropKey = GlobalKey<ImgCropState>();

  void getImage() async {
    final pickedFile = await picker.getImage(source: ImageSource.gallery);
    setState(() {
      if (pickedFile != null) {
        _image = File(pickedFile.path);

        Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => SimpleCropRoute(
                      imagePath: _image)));
      }
    });
  }

  void _showActionSheet() {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return SafeArea(
            child: ListTile(
              leading: new Icon(Icons.photo_library),
              title: new Text("Galery"),
              onTap: () async {
                getImage();
              },
            ),
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      onPressed: _showActionSheet,
      child: Center(
        // child: _image == null ? Text('No image selected.') : Image.file(_image),
        child: _image == null ? Text('No image selected.') : Image.file(_image),
      ),
    );
  }
}

Can anyone help me to understand how can I send that image back to the first screen?

passing data through screens is quite trivial https://stackoverflow.com/questions/53861302/passing-data-between-screens-in-flutter but I recommend to use a state management of your choice (for a number of good reasons) — Francesco Iapicca, Sep 16 '20 at 20:22

score 0 · Answer 1 · answered Sep 17 '20 at 03:14

One thing I observed in your code is, that you are running pop and push. Which mean Push is never reached. Right now, your code is just loading the previous screen.

So, Remove this Navigator.pop(context); from floating action button onpressed event.

If you want to get the updated stuff, use Navigator.push to load the page with new values. It's like moving forward than backward.

Flutter - push back and forth an image from a page to another

1 Answers1