相机拍摄组件：wechat_camera_picker

大前端 Flutter AssetPicker AssetEntityImage

发布时间 : 2025-09-28 00:00

字数:882 阅读 :

是什么
核心方法：pickFromCamera
CameraPickerConfig
入门案例

是什么

wechat_camera_picker 是一个 类似微信的相机拍摄组件。
拍摄完成后会返回一个 AssetEntity，和 wechat_assets_picker 保持一致，因此两者可以无缝结合。
你可以只用它来 拍照/录视频，也可以和 wechat_assets_picker 配合做一个 完整的“微信式图片选择 + 拍摄”体验。

核心方法：pickFromCamera

CameraPicker.pickFromCamera是入口方法，用来调起相机：

final AssetEntity? entity = await CameraPicker.pickFromCamera(
  context,
  // 拍摄参数配置
  pickerConfig: const CameraPickerConfig(),
);

返回值：AssetEntity?

null → 用户取消
AssetEntity → 用户成功拍了一张照片/录了一段视频

CameraPickerConfig

配置拍摄的参数。常用字段有：

字段	类型	说明
`enableRecording`	`bool`	是否允许录制视频（默认 `false`，只拍照）
`enableAudio`	`bool`	是否录音（录视频时）
`onlyEnableRecording`	`bool`	只允许录视频（禁用拍照）
`enableTapRecording`	`bool`	允许点击录制（默认长按录制）
`maximumRecordingDuration`	`Duration?`	最大录制时长
`theme`	`ThemeData`	相机 UI 主题
`resolutionPreset`	`ResolutionPreset`	相机分辨率（默认 `medium`）
`preferredLensDirection`	`CameraLensDirection`	默认打开的摄像头（前置/后置）

入门案例

安装

# 权限校验
flutter pub add permission_handler
# 选择资源
flutter pub add wechat_assets_picker
# 相机
flutter pub add wechat_camera_picker

配置

IOS

ios/Runner/Info.plist：

<key>NSCameraUsageDescription</key>
<string>需要相机权限来拍照</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>需要访问照片权限以选择图片</string>
<key>NSMicrophoneUsageDescription</key>
<string>需要访问麦克风进行录音或语音识别</string>

ios/Podfile

## dart: PermissionGroup.camera
'PERMISSION_CAMERA=1',

## dart: PermissionGroup.microphone
'PERMISSION_MICROPHONE=1',

## dart: PermissionGroup.photos
'PERMISSION_PHOTOS=1',

Android

AndroidManifest.xml

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

<!-- 如果你要兼容 Android 12 以下，还要加 -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"
    android:maxSdkVersion="32" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"
    android:maxSdkVersion="29" />

代码

import 'package:flutter/material.dart';
import 'package:wechat_assets_picker/wechat_assets_picker.dart';
import 'package:wechat_camera_picker/wechat_camera_picker.dart';
import 'package:permission_handler/permission_handler.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Wechat Picker + Camera Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const WechatPickerDemo(),
    );
  }
}

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

  @override
  State<WechatPickerDemo> createState() => _WechatPickerDemoState();
}

class _WechatPickerDemoState extends State<WechatPickerDemo> {
  final List<AssetEntity> _assets = []; // 保存已选择/拍摄的资源

  /// 请求相册和相机权限
  Future<bool> _requestPermissions() async {
    final photoStatus = await Permission.photos.request();
    final cameraStatus = await Permission.camera.request();
    final micStatus = await Permission.microphone.request(); // 录视频时需要

    if (photoStatus.isGranted &&
        cameraStatus.isGranted &&
        micStatus.isGranted) {
      return true;
    } else {
      openAppSettings();
      return false;
    }
  }

  /// 打开相册选择器
  Future<void> _pickFromGallery() async {
    final hasPermission = await _requestPermissions();
    if (!hasPermission) return;

    final result = await AssetPicker.pickAssets(
      context,
      pickerConfig: const AssetPickerConfig(
        requestType: RequestType.image, // 只选图片
        maxAssets: 5,
      ),
    );

    if (result != null) {
      setState(() => _assets.addAll(result));
    }
  }

  /// 打开相机
  Future<void> _pickFromCamera() async {
    // 检查权限
    final hasPermission = await _requestPermissions();
    if (!hasPermission) return;

    final entity = await CameraPicker.pickFromCamera(
      context,
      pickerConfig: const CameraPickerConfig(
        enableRecording: true, // 支持拍视频
        enableAudio: true, // 录视频时需要
        maximumRecordingDuration: Duration(seconds: 15), // 最长录制时长 15 秒
      ),
    );

    if (entity != null) {
      setState(() => _assets.add(entity));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Wechat Assets + Camera Picker")),
      body: Column(
        children: [
          // 按钮区
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 相册选择按钮
              ElevatedButton(
                onPressed: _pickFromGallery,
                child: const Text("选择图片"),
              ),
              const SizedBox(width: 16),
              // 相机按钮
              ElevatedButton(
                onPressed: _pickFromCamera,
                child: const Text("拍照/录视频"),
              ),
            ],
          ),
          const SizedBox(height: 20),

          // 资源展示区
          Expanded(
            child: GridView.builder(
              padding: const EdgeInsets.all(8),
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3, // 三列网格
                crossAxisSpacing: 4,
                mainAxisSpacing: 4,
              ),
              itemCount: _assets.length,
              itemBuilder: (_, index) {
                final asset = _assets[index];
                return AssetEntityImage(
                  asset,
                  thumbnailSize: const ThumbnailSize.square(200),
                  fit: BoxFit.cover,
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}