Flutter: How do i navigate to a new page after an image is picked with the ImagePicker plugin?

Question

I'm using the Image Picker plugin to pick an image. I would like to navigate to a new screen immediately after an image is picked but it's not working. I'm getting an error that states that the context doesn't exist in the current widget tree.

Below is my code.

pickImage(BuildContext context) async {
    File pickedImage = await ImagePicker.pickImage(source: ImageSource.camera);
    if (pickedImage != null) {
      print(pickedImage.path);
      if (this.mounted) {
        await Navigator.of(context).push(
          MaterialPageRoute(
            builder: (context) => ViewStory(
              localImagePath: pickedImage.path,
            ),
          ),
        );
      }
    }
}

Call the function like this:

IconButton(
              onPressed: () => pickImage(context),
              icon: Icon(
                Icons.camera_alt,
                color: CustomColors.primary,
                size: 100,
              ),
            ),

Below is the error I'm getting:

FlutterError (Looking up a deactivated widget's ancestor is unsafe. At this point the state of the widget's element tree is no longer stable. To safely refer to a widget's ancestor in its dispose() method, save a reference to the ancestor by calling inheritFromWidgetOfExactType() in the widget's didChangeDependencies() method.)

Please show the full code. We have to know where this context is coming from — Rodrigo Bastos, Oct 18 '19 at 18:51

score 6 · Accepted Answer · answered Oct 19 '19 at 00:30

The problem is that context can't be used if the widget is not built on the screen (mounted). So you should store a reference to your navigator while the widget is active and then you won't need to reference context afterward. Your code would work if ImagePicker.pickImage() waited until its Route was completely removed from the stack, but it doesn't, so the rest of your code ends up running before the widget is ready.

I made some edits to your code. This should solve your problem:

pickImage(BuildContext context) async {
    final navigator = Navigator.of(context);
    File pickedImage = await ImagePicker.pickImage(source: ImageSource.camera);
    if (pickedImage != null) {
      print(pickedImage.path);
        await navigator.push(
          MaterialPageRoute(
            builder: (context) =>
                ViewStory(
                  localImagePath: pickedImage.path,
                ),
          ),
        );

    }
  }

Flutter: How do i navigate to a new page after an image is picked with the ImagePicker plugin?

1 Answers1