Flutter：使用 ImagePicker 插件选择图像后如何导航到新页面？答案

【问题标题】：Flutter: How do i navigate to a new page after an image is picked with the ImagePicker plugin?Flutter：使用 ImagePicker 插件选择图像后如何导航到新页面？
【发布时间】：2020-02-15 18:31:42
【问题描述】：

我正在使用 Image Picker 插件来选择图像。我想在选择图像后立即导航到新屏幕，但它不起作用。我收到一条错误消息，指出当前小部件树中不存在上下文。

下面是我的代码。

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,
            ),
          ),
        );
      }
    }
}

这样调用函数：

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

以下是我得到的错误：

FlutterError（查找已停用小部件的祖先是不安全的。在此时小部件的元素树的状态不再稳定。要在其 dispose() 方法中安全地引用小部件的祖先，请保存通过调用inheritFromWidgetOfExactType()来引用祖先小部件的 didChangeDependencies() 方法。）

【问题讨论】：

请出示完整代码。我们必须知道这个上下文来自哪里
能否请您也分享一下错误？
我已经编辑了帖子

标签： flutter dart flutter-dependencies imagepicker

【解决方案1】：

问题是context 如果小部件未构建在屏幕上（已安装），则无法使用。因此，您应该在小部件处于活动状态时存储对导航器的引用，然后您就不需要引用context。如果ImagePicker.pickImage() 等到它的Route 完全从堆栈中删除，您的代码将工作，但它没有，因此您的其余代码最终在小部件准备好之前运行。

我对您的代码进行了一些修改。这应该可以解决您的问题：

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,
                ),
          ),
        );

    }
  }

【讨论】：