如何在Flutter中实现从相册与相机选取图片的功能？

要实现从相册/相机选取图片的功能，我们可以借助image_picker插件快速完成，以下是完整的实现步骤和代码：

1. 添加依赖 #

在项目的pubspec.yaml文件中添加image_picker依赖：

dependencies:
  flutter:
    sdk: flutter
  image_picker: ^1.0.4 # 建议使用最新版本

执行flutter pub get安装依赖。

2. 配置平台权限 #

Android 配置 #

在android/app/src/main/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" />

iOS 配置 #

在ios/Runner/Info.plist中添加权限描述：

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

3. 完整页面代码 #

修改原Productdetails页面代码，添加图片选择逻辑和UI展示：

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

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

  @override
  State<Productdetails> createState() => _ProductdetailsState();
}

class _ProductdetailsState extends State<Productdetails> {
  // 存储选中的图片
  XFile? _selectedImage;
  final ImagePicker _picker = ImagePicker();

  // 弹出图片来源选择对话框
  void _showImagePickerDialog() {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('选择图片来源'),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ListTile(
              leading: const Icon(Icons.camera_alt),
              title: const Text('相机拍摄'),
              onTap: () {
                Navigator.pop(context);
                _getImageFromCamera();
              },
            ),
            ListTile(
              leading: const Icon(Icons.photo_library),
              title: const Text('从相册选择'),
              onTap: () {
                Navigator.pop(context);
                _getImageFromGallery();
              },
            ),
          ],
        ),
      ),
    );
  }

  // 从相机获取图片
  Future<void> _getImageFromCamera() async {
    final XFile? image = await _picker.pickImage(source: ImageSource.camera);
    if (image != null) {
      setState(() {
        _selectedImage = image;
      });
    }
  }

  // 从相册获取图片
  Future<void> _getImageFromGallery() async {
    final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
    if (image != null) {
      setState(() {
        _selectedImage = image;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orange,
        title: const Text('商品详情'),
        titleTextStyle: const TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 22,
            wordSpacing: 2.5,
            color: Colors.black),
        centerTitle: true,
        actions: [
          IconButton(onPressed: () {}, icon: const Icon(Icons.save)),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              '商品图片',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 20),
            // 图片选择区域
            GestureDetector(
              onTap: _showImagePickerDialog,
              child: Container(
                width: double.infinity,
                height: 200,
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: _selectedImage != null
                    ? Image.file(
                        File(_selectedImage!.path),
                        fit: BoxFit.cover,
                      )
                    : const Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Icon(Icons.add_a_photo, size: 40, color: Colors.grey),
                          SizedBox(height: 10),
                          Text('点击选择图片', style: TextStyle(color: Colors.grey)),
                        ],
                      ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

功能说明 #

• 点击图片区域弹出选择对话框，支持相机拍摄和相册选择两种方式
• 选中图片后实时展示在页面的图片区域内
• 已适配Android和iOS的权限申请逻辑

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