Flutter使用ImagePicker选图后CircleAvatar仅显示蓝色圆圈问题

现存问题 #

• CircleAvatar的radius参数设置为500，远超普通移动设备屏幕尺寸，会触发图片裁剪异常，仅显示纯色占位
• 未做相册权限适配，安卓、iOS系统未授予相册读取权限时，无法正常读取选中的图片文件
• 缺少空安全校验，用户取消选择图片时会直接触发空指针异常
• 新旧版本image_pickerAPI类型不匹配，最新版image_picker的pickImage返回值为XFile类型，代码中定义的PickedFile为旧版类型，会导致路径读取失败

修复后代码 #

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

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

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

class _TestScreenState extends State<TestScreen> {
  File? imageFile;
  final ImagePicker picker = ImagePicker();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: InkWell(
          onTap: () async {
            final XFile? pickedFile = await picker.pickImage(source: ImageSource.gallery);
            if (pickedFile != null) {
              setState(() {
                imageFile = File(pickedFile.path);
              });
            }
          },
          child: imageFile == null
              ? Image.asset(
                  "images/null_pfp.png",
                  width: 100,
                  height: 100,
                )
              : CircleAvatar(
                  radius: 50,
                  backgroundImage: FileImage(imageFile!),
                ),
        ),
      ),
    );
  }
}

必要平台配置 #

安卓端 #

在android/app/src/main/AndroidManifest.xml中添加权限声明：

<!-- 安卓12及以下版本读取权限 -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<!-- 安卓13及以上版本读取图片权限 -->
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />

iOS端 #

在ios/Runner/Info.plist中添加相册访问权限说明：

<key>NSPhotoLibraryUsageDescription</key>
<string>访问相册选择头像</string>

其他校验项 #

• 确认pubspec.yaml中已正确添加image_picker依赖
• 确认pubspec.yaml中已配置images/null_pfp.png对应的assets资源路径

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