Flutter中使用新版image_picker预览选取图片的方法

1. 添加依赖 #

在pubspec.yaml中添加最新版的image_picker依赖：

dependencies:
  flutter:
    sdk: flutter
  image_picker: ^1.0.4 # 可替换为pub上的最新版本

执行flutter pub get完成依赖安装。

2. 配置权限 #

不同平台需要配置对应的权限才能访问相机或相册：

• iOS：在Info.plist中添加权限描述：

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

• Android：在AndroidManifest.xml中添加权限（适配不同系统版本）：

  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" /> <!-- Android 13+ -->
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32" /> <!-- Android 12及以下 -->
  

3. 核心代码实现 #

创建一个StatefulWidget，完整实现图片选择与预览逻辑：

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

class ImagePickerDemo extends StatefulWidget {
  const ImagePickerDemo({super.key});

  @override
  State<ImagePickerDemo> createState() => _ImagePickerDemoState();
}

class _ImagePickerDemoState extends State<ImagePickerDemo> {
  final ImagePicker _picker = ImagePicker();
  XFile? _selectedImage;

  // 通用图片选择方法，支持相机/相册源
  Future<void> _pickImage(ImageSource source) async {
    final XFile? photo = await _picker.pickImage(
      source: source,
      imageQuality: 80, // 可选：设置图片压缩质量（0-100）
      maxWidth: 1000, // 可选：限制图片最大宽度
    );
    if (photo != null) {
      setState(() {
        _selectedImage = photo;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('图片选择与预览')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 预览选中的图片
            _selectedImage != null
                ? Container(
                    width: 300,
                    height: 300,
                    decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
                    child: Image.file(
                      File(_selectedImage!.path),
                      fit: BoxFit.cover,
                    ),
                  )
                : const Text('未选择图片'),
            const SizedBox(height: 20),
            // 选择图片按钮组
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () => _pickImage(ImageSource.camera),
                  child: const Text('拍照'),
                ),
                const SizedBox(width: 20),
                ElevatedButton(
                  onPressed: () => _pickImage(ImageSource.gallery),
                  child: const Text('从相册选择'),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

关键说明 #

• 新版image_picker返回的XFile可通过File(_selectedImage!.path)转换为本地文件对象，直接传入Image.file组件实现预览。
• pickImage方法支持imageQuality、maxWidth等参数，可按需压缩图片，避免内存占用过高。

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