Flutter相机功能插件 fl_camera 的使用

fl_camera 是一个支持 Android 和 iOS 平台的相机插件，其中 Android 使用 CameraX 实现。该插件主要提供了原生相机预览的封装和消息通道。

权限配置

iOS

在 Info.plist 文件中添加以下权限描述：

<key>NSCameraUsageDescription</key>
<string>是否允许FlCamera使用你的相机？</string>

主要组件

1. 相机预览 (Camera preview)

   • 使用 FlCamera() 组件。

2. 相机消息通道 (Camera message channel)

   • 使用 FlCameraEvent() 组件。

3. 相机控制器 (Camera method)

   • 使用 FlCameraController() 控制器。

4. 预览框方形遮罩 (Preview box square mask)

   • 使用 ScannerBox() 组件。

5. 预览框线条遮罩 (Preview box line mask)

   • 使用 ScannerLine() 组件。

示例代码

下面是一个完整的示例，展示了如何使用 fl_camera 插件实现相机功能，并请求相机权限。

完整示例 Demo

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:permission_handler/permission_handler.dart';
import 'camera_page.dart'; // 假设这是包含相机页面的文件

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlCamera Example',
      theme: ThemeData.light(useMaterial3: true),
      darkTheme: ThemeData.dark(useMaterial3: true),
      home: const App(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('FlCamera Example')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: () async {
              final bool permission = await getPermission(Permission.camera);
              if (permission) {
                Navigator.push(context, MaterialPageRoute(builder: (_) => const CameraPage()));
              }
            },
            child: const Text('Open the camera'),
          ),
          ElevatedButton(
            onPressed: () async {
              final bool permission = await getPermission(Permission.camera);
              if (permission) {
                Navigator.push(context, MaterialPageRoute(builder: (_) => const ScannerBoxPage()));
              }
            },
            child: const Text('扫码框浮层'),
          ),
          ElevatedButton(
            onPressed: () async {
              final bool permission = await getPermission(Permission.camera);
              if (permission) {
                Navigator.push(context, MaterialPageRoute(builder: (_) => const ScannerLinePage()));
              }
            },
            child: const Text('线条浮层'),
          ),
        ],
      ),
    );
  }
}

Future<bool> getPermission(Permission permission) async {
  PermissionStatus status = await permission.status;
  if (status.isGranted) {
    return true;
  } else {
    status = await permission.request();
    if (!status.isGranted) openAppSettings();
    return status.isGranted;
  }
}

相机页面示例 (camera_page.dart)

假设你有一个单独的文件 camera_page.dart，内容如下：

import 'package:flutter/material.dart';
import 'package:fl_camera/fl_camera.dart';

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

  [@override](/user/override)
  _CameraPageState createState() => _CameraPageState();
}

class _CameraPageState extends State<CameraPage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Camera Page')),
      body: Center(
        child: FlCamera(), // 使用 FlCamera 组件显示相机预览
      ),
    );
  }
}

扫码框页面示例 (scanner_box_page.dart)

import 'package:flutter/material.dart';
import 'package:fl_camera/src/shade/scanner_box.dart';

class ScannerBoxPage extends StatelessWidget {
  const ScannerBoxPage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Scanner Box Page')),
      body: Center(
        child: ScannerBox(), // 使用 ScannerBox 组件显示扫码框
      ),
    );
  }
}

线条浮层页面示例 (scanner_line_page.dart)

import 'package:flutter/material.dart';
import 'package:fl_camera/src/shade/scanner_line.dart';

class ScannerLinePage extends StatelessWidget {
  const ScannerLinePage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Scanner Line Page')),
      body: Center(
        child: ScannerLine(), // 使用 ScannerLine 组件显示线条浮层
      ),
    );
  }
}