Flutter 新版 SDK 调用 ImagePicker 从相册选图报错如何解决？

核心错误原因 #

• 新版image_picker库的pickImage方法返回类型为XFile?，旧版返回的PickedFile已经废弃，直接将XFile强转为File属于类型不匹配错误
• 用late修饰_image变量，该修饰符要求变量在使用前必须完成非空赋值，不允许为null，但后续代码还在判断_image == null，逻辑冲突
• 未处理用户取消选择图片的空值场景

修复步骤 #

1. 修正变量声明 #

将_image的声明修改为可空类型，去掉late修饰：

File? _image;

2. 修正图片选择逻辑 #

XFile转File需要通过路径构造，同时添加空判断处理用户取消选图的场景：

Future<void> _getImage() async {
  final XFile? pickerImage = await _picker.pickImage(source: ImageSource.gallery);
  // 判空，用户未选择图片时不执行后续逻辑
  if (pickerImage != null) {
    setState(() {
      _image = File(pickerImage.path);
    });
  }
}

3. 可选：补充平台权限配置 #

如果还存在权限导致的崩溃，需要添加对应平台的权限声明：

• Android端：在android/app/src/main/AndroidManifest.xml的<manifest>标签下添加存储权限：

  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  

• iOS端：在ios/Runner/Info.plist的<dict>标签下添加相册访问权限：

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

完整修复后代码 #

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

class CreatePage extends StatefulWidget {
  const CreatePage({Key? key}) : super(key: key);

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

class _CreatePageState extends State<CreatePage> {
  final ImagePicker _picker = ImagePicker();
  File? _image; 
  // 若你的业务中没有用到createText控制器可以直接删除相关代码，避免dispose报错
  // final TextEditingController createText = TextEditingController();

  @override
  void dispose() {
    // createText.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _buildBody(), 
      floatingActionButton: FloatingActionButton(
        onPressed: _getImage,
        backgroundColor: Colors.blue,
        child: const Icon(Icons.add_a_photo),
      ),
    );
  }

  Widget _buildBody() {
    return SingleChildScrollView( 
      child: Column(
        children: [
          _image == null ? const Text("No Image") : Image.file(_image!),
        ],
      ),
    );
  }

  Future<void> _getImage() async {
    final XFile? pickerImage = await _picker.pickImage(source: ImageSource.gallery);
    if (pickerImage != null) {
      setState(() {
        _image = File(pickerImage.path);
      });
    }
  }
}

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