Flutter空安全下ImagePicker传File?到第二页展示出现类型错误如何解决

• 核心为空安全类型不匹配：Image.file()构造函数要求传入非空File类型参数，但你的SecondPage中定义的image属性为可空File?类型，直接传入widget.image会触发类型校验报错
• 潜在逻辑隐患：现有跳转逻辑未判断_image是否赋值成功，用户取消拍摄、拍摄异常时_image仍为null，直接跳转也会触发空异常

方案1（推荐，从逻辑上避免空值） #

步骤1：第一页跳转前增加非空判断 #

修改按钮点击逻辑，确认图片获取成功后再跳转，避免空值传入第二页：

ElevatedButton(
  onPressed: () async {
    await getImage();
    // 确认_image非空再跳转
    if (_image != null) {
      Navigator.push(context, MaterialPageRoute(builder: (context) {
        // 提前判断非空后用!强制声明非空
        return SecondPage(image: _image!);
      }));
    }
  },
)

步骤2：修改第二页属性为非空类型 #

既然跳转前已经保证不会传入空值，直接把image改为必传非空属性：

class SecondPage extends StatefulWidget {
  // 改为非空File类型
  File image;

  // 构造函数明确要求必传非空参数
  SecondPage({
    Key? key,
    required this.image,
  }) : super(key: key);

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

步骤3：调整图片渲染代码 #

现在widget.image已经是非空类型，直接传入Image.file即可消除报错：

SizedBox(
  width: 300,
  height: 265,
  child: Image.file(widget.image),
),

方案2（兼容可空场景） #

如果你确实需要保留第二页image为可空类型，可以直接在渲染时做空值兼容：

SizedBox(
  width: 300,
  height: 265,
  child: widget.image != null 
    ? Image.file(widget.image!) 
    : const Icon(Icons.broken_image, size: 100),
)

你的getImage方法中重复申请了相机权限，可优化为单次申请判断，同时增加_pickedFile非空判断避免取路径时空异常：

Future getImage() async {
  PermissionStatus cameraStatus = await Permission.camera.request();
  if (cameraStatus.isGranted) {
    PickedFile? _pickedFile = await _picker.getImage(
        source: ImageSource.camera, maxHeight: 1920, maxWidth: 1080);
    if (_pickedFile != null) {
      setState(() {
        _image = File(_pickedFile.path);
      });
    }
  }
}

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