Flutter相机/相册选图后跨屏跳转自动展示图片的实现

• 原代码跳转第二页后紧跟的Navigator.of(context).pop()会直接弹出当前选图页面，打断正常的页面跳转流程，导致第二页根本没法正常展示
• 第二页Test2没有实现页面初始化时自动加载、渲染图片的逻辑，就算图片参数传过去了，页面也不会主动读取展示
• 原代码依赖当前页的_image状态变量传值，在异步选图、跳转的场景下容易出现取值为空的问题

1. 修正第一页的选图跳转逻辑 #

原代码中使用的ImagePicker.pickImage是image_picker包已废弃的旧静态方法，现在需通过ImagePicker实例调用选图方法，同时移除原代码中多余的页面弹出逻辑，选完图后直接把选中的图片实例作为参数传给第二页，避免依赖当前页的状态变量导致取值为空。
调整后的第一页代码如下：

Future<void> predictImagePickerGallery(BuildContext context) async {
  final picker = ImagePicker();
  // 从相册选取图片
  final selectedImage = await picker.pickImage(source: ImageSource.gallery);
  // 用户取消选图直接返回
  if (selectedImage == null) return;

  // 跳转第二页，直接把选中的图片实例传入
  await Navigator.of(context).push(
    MaterialPageRoute(
      builder: (context) => Test2(
        imageFile: selectedImage,
      ),
    ),
  );
}

2. 给第二页实现自动触发的图片展示逻辑 #

利用Flutter的页面生命周期特性，在第二页的initState方法里自动执行图片加载流程，这个方法会在页面被构建、跳转完成的瞬间自动触发，不需要用户做任何手动操作，完全匹配核心诉求。
第二页的完整实现代码：

class Test2 extends StatefulWidget {
  // 接收第一页传入的图片文件
  final XFile imageFile;
  const Test2({super.key, required this.imageFile});

  @override
  State<Test2> createState() => _Test2State();
}

class _Test2State extends State<Test2> {
  ImageProvider? targetImage;

  @override
  void initState() {
    super.initState();
    // 页面初始化时自动执行图片加载逻辑，无额外交互触发
    _prepareDisplayImage();
  }

  // 自动执行的图片加载方法
  void _prepareDisplayImage() {
    // 通过传入的图片路径生成可用于渲染的图片资源
    targetImage = FileImage(File(widget.imageFile.path));
    // 确认页面还在挂载状态再触发渲染
    if (mounted) setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("图片展示页")),
      body: Center(
        // 图片加载完成后直接渲染，未加载完成时显示加载状态
        child: targetImage == null
          ? const CircularProgressIndicator()
          : Image(image: targetImage!),
      ),
    );
  }
}

• 整个链路从用户选完图开始，到跳转第二页、自动加载并展示图片全程无人工干预
• 第二页的initState是框架自动调用的生命周期方法，不存在手动触发的延迟问题，跳转完成的瞬间就会执行图片准备逻辑

内容的提问来源于stack exchange，提问作者Mubashar