Flutter相机打开与操作插件open_camera_flutter的使用

Flutter相机打开与操作插件open_camera_flutter的使用

简介

open_camera_flutter 是一个用于在 Flutter 应用中控制设备相机的插件。它允许开发者轻松地打开相机并捕获照片。本文将展示如何使用 open_camera_flutter 插件来实现这一功能。

使用步骤

1. 添加依赖

首先，在项目的 pubspec.yaml 文件中添加 open_camera_flutter 和 permission_handler 依赖：

dependencies:
  open_camera_flutter: ^版本号
  permission_handler: ^版本号

然后运行以下命令以更新依赖项：

flutter pub get

2. 初始化状态和权限请求

在 main.dart 文件中，初始化插件并请求相机权限。以下是完整的示例代码：

import 'dart:io';
import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:open_camera_flutter/open_camera_flutter.dart';
import 'package:permission_handler/permission_handler.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';
  final _openCameraFlutterPlugin = OpenCameraFlutter();
  String imagePath = ""; // 保存捕获的照片路径

  @override
  void initState() {
    super.initState();
    initPlatformState(); // 初始化平台信息
    requestPermission(); // 请求相机权限
  }

  // 请求相机权限
  requestPermission() async {
    Map<Permission, PermissionStatus> statuses = await [
      Permission.camera,
    ].request();
  }

  // 获取平台版本信息
  Future<void> initPlatformState() async {
    String platformVersion;
    try {
      platformVersion = await _openCameraFlutterPlugin.getPlatformVersion() ?? 'Unknown platform version';
    } on Exception {
      platformVersion = 'Failed to get platform version.';
    }

    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Open Camera Plugin Example'),
        ),
        body: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          padding: const EdgeInsets.all(16),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              // 显示当前平台版本
              Center(
                child: Text('Running on: $_platformVersion\n'),
              ),
              // 捕获照片按钮
              ElevatedButton(
                onPressed: () async {
                  if (await Permission.camera.request().isGranted) {
                    capturePhoto(); // 调用拍照方法
                  } else {
                    log("camera permission not granted"); // 权限未授予时的日志记录
                  }
                },
                child: const Text('Capture Image'),
              ),
              const SizedBox(height: 100), // 添加间距
              const Text('Image Path:'), // 显示照片路径
              Text(imagePath), // 动态更新照片路径
            ],
          ),
        ),
      ),
    );
  }

  // 捕获照片
  capturePhoto() async {
    imagePath = await _openCameraFlutterPlugin.capturePhoto() ?? "";
    setState(() {}); // 更新 UI
  }
}

运行效果

运行上述代码后，您将看到一个简单的 Flutter 页面，包含以下元素：

1. 平台版本信息：显示当前运行的平台版本。
2. 捕获照片按钮：点击按钮后会尝试打开相机并捕获照片。
3. 照片路径显示：成功捕获照片后，会在页面上显示照片的存储路径。

注意事项

1. 权限管理：确保在 Android 和 iOS 设备上正确配置权限。例如，在 Android 的 AndroidManifest.xml 中添加以下权限：

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

2. 动态权限请求：在 iOS 上，还需要在 Info.plist 文件中添加描述信息：

   <key>NSCameraUsageDescription</key>
   <string>We need access to your camera to take photos.</string>