Flutter点击bottomSheet图标无法打开相机/图库图片选择器

核心错误定位 #

图片选择器无法触发的根本原因是：底部弹窗内相机、图库按钮的onPressed回调中，仅定义了pickImage异步函数，从未实际调用执行该函数，点击事件没有触发任何图片选择逻辑，因此无报错也无响应。
除此之外代码还存在两个关联问题：选中图片后头像不会更新、缺少原生平台权限配置。

分步修复方法 #

1. 修正函数调用逻辑，抽离公共选择方法 #

不要在按钮点击回调里重复定义函数，先在State类中编写统一的图片选择方法：

File? image;

/// 统一图片选择方法，传入来源（相机/图库）
Future<void> pickImage(ImageSource source) async {
  final XFile? pickedFile = await ImagePicker().pickImage(source: source);
  if (pickedFile == null) return;
  setState(() {
    image = File(pickedFile.path);
  });
  // 选择完成后自动关闭底部弹窗
  Navigator.pop(context);
}

然后替换bottomSheet组件中两个IconButton的onPressed配置，直接调用上述方法：

• 相机按钮：

IconButton(
  iconSize: 70,
  icon: const Icon(Icons.camera),
  onPressed: () => pickImage(ImageSource.camera),
),

• 图库按钮：

IconButton(
  iconSize: 70,
  icon: const Icon(Icons.image),
  onPressed: () => pickImage(ImageSource.gallery),
),

2. 修复头像渲染逻辑 #

当前CircleAvatar固定加载默认资源图，选中图片后不会更新，修改其backgroundImage配置，优先加载用户选择的本地图片：

CircleAvatar(
  radius: 80.0,
  backgroundImage: image != null
      ? FileImage(image!)
      : AssetImage("assets/DefaultImage.png") as ImageProvider,
),

3. 补全原生平台权限配置 #

如果完成上述两步后功能仍异常，检查对应平台的权限配置：

• Android配置：打开android/app/src/main/AndroidManifest.xml，在<application>标签前添加权限声明：
  若targetSdkVersion < 33：

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

  若targetSdkVersion >= 33：

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

• iOS配置：打开ios/Runner/Info.plist，在<dict>标签内添加权限描述：

  <key>NSCameraUsageDescription</key>
  <string>需访问相机拍摄头像</string>
  <key>NSPhotoLibraryUsageDescription</key>
  <string>需访问相册选择头像</string>
  

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