使用image_picker 1.1.2选取图片后页面无法显示图片的问题

核心问题分析 #

你代码里的File? image;定义在build方法内部，每次调用setState触发UI重建时，build方法会重新执行，这个变量会被重新初始化为null，导致选完图后刚赋值就被重置，自然看不到图片。

修复步骤 #

• 将图片变量移到State类成员位置：把File? image;从build方法里拿出来，放到State类的顶部作为成员变量，这样每次UI重建时不会被重置。
• 处理用户取消选择的场景：不要直接强制解包picked!，用户可能会取消选择，这会触发空指针异常，需要先判断picked是否不为空。
• 确保权限配置正确：Android和iOS需要在配置文件中添加相册访问权限，否则可能无法正常读取图片。

修正后的代码示例 #

// 把image变量移到State类成员位置
File? image;

@override
Widget build(BuildContext context) {
  Future pick() async {
    final ImagePicker picker = ImagePicker();
    final picked = await picker.pickImage(source: ImageSource.gallery);
    // 处理用户取消选择的情况
    if (picked == null) return;
    File file = File(picked.path);
    setState(() {
      image = file;
    });
  }

  return Scaffold(
    backgroundColor: Colors.white,
    appBar: AppBar(
      foregroundColor: Colors.white,
      backgroundColor: const Color.fromRGBO(34, 30, 204, 50),
      title: Text('new'.tr()),
    ),
    body: Container(
      padding: const EdgeInsets.only(top: 20, right: 10, left: 10),
      child: Center(
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const SizedBox(width: 20),
                image == null
                    ? const Text('No photo')
                    : Image.file(
                        image!,
                        width: 100,
                        height: 100,
                        fit: BoxFit.fill,
                      ),
                IconButton(onPressed: pick, icon: const Icon(Icons.photo))
              ],
            ),
            Form(
              key: key3,
              child: Expanded(
                child: ListView(
                  children: [...],
                ),
              ),
            )
          ],
        ),
      ),
    ),
  );
}

权限配置补充 #

• Android：在android/app/src/main/AndroidManifest.xml中添加：

  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
  <!-- 针对Android 13以下版本，添加旧权限 -->
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32" />
  

• iOS：在ios/Runner/Info.plist中添加：

  <key>NSPhotoLibraryUsageDescription</key>
  <string>需要访问相册选择图片</string>
  

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