Flutter相机覆盖层插件flutter_camera_overlay_new的使用

Flutter相机覆盖层插件flutter_camera_overlay_new的使用

支持Android 13

此包提供了一个简单的相机覆盖层，用于辅助拍摄文档，如身份证、护照和驾驶执照等。

默认ISO卡格式

ISO标准

  • cardID1 - 大多数银行卡和身份证
  • cardID2 - 法国及其他国家的身份证、签证
  • cardID3 - 美国政府身份证
  • simID000 - SIM卡

示例图片

开始使用

首先导入该文件：

import 'package:flutter_camera_overlay_new/flutter_camera_overlay_new.dart';

使用默认样式

CameraOverlay(
    snapshot.data!.first, // 摄像头描述
    CardOverlay.byFormat(format), // 卡片格式
    (XFile file) => print(file.path), // 回调函数
    info: 'Position your ID card within the rectangle and ensure the image is perfectly readable.', // 提示信息
    label: 'Scanning ID Card'); // 标签

待办事项

  • 添加数据捕获（卡号等）
  • 自动边缘检测与捕获

完整示例代码

以下是使用flutter_camera_overlay_new的完整示例代码：

import 'package:camera/camera.dart';
import 'package:flutter/material.dart';
import 'package:flutter_camera_overlay_new/flutter_camera_overlay.dart';
import 'package:flutter_camera_overlay_new/model.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(
    ExampleCameraOverlay(),
  );
}

class ExampleCameraOverlay extends StatefulWidget {
  [@override](/user/override)
  State<ExampleCameraOverlay> createState() => _ExampleCameraOverlayState();
}

class _ExampleCameraOverlayState extends State<ExampleCameraOverlay> {
  late List<CameraDescription> cameras;

  [@override](/user/override)
  void initState() {
    super.initState();
    initializeCameras();
  }

  Future<void> initializeCameras() async {
    // await Permission.camera.request();
    cameras = await availableCameras();
    setState(() {}); // 刷新界面以更新摄像头列表
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: cameras.isEmpty
          ? const Center(
              child: Text(
                'No camera found',
                style: TextStyle(color: Colors.white),
              ),
            )
          : CameraOverlay(
              cameras.first, // 选择第一个摄像头
              CardOverlay.byFormat(OverlayFormat.cardID2), // 使用cardID2格式
              loadingWidget: Container(
                color: Colors.white,
              ), // 加载时显示白色背景
              (XFile file) {}, // 拍摄后的回调
              info: 'Position your business ID card within the rectangle and ensure the image is perfectly readable.', // 提示信息
              label: 'Scanning Business Card', // 标签
            ),
    );
  }
}

更多关于Flutter相机覆盖层插件flutter_camera_overlay_new的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter相机覆盖层插件flutter_camera_overlay_new的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter项目中使用flutter_camera_overlay_new插件的示例代码。这个插件可以帮助你在相机预览上添加覆盖层，比如拍照按钮、录像按钮或者其它自定义视图。请注意，实际使用时需要确保插件已经在pubspec.yaml文件中正确添加并安装。

首先，确保在你的pubspec.yaml文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_camera_overlay_new: ^最新版本号  # 替换为实际最新版本号

然后，运行flutter pub get来安装依赖。

接下来，是一个简单的示例代码，展示如何使用flutter_camera_overlay_new插件：

import 'package:flutter/material.dart';
import 'package:camera/camera.dart';
import 'package:flutter_camera_overlay_new/flutter_camera_overlay_new.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CameraApp(),
    );
  }
}

class CameraApp extends StatefulWidget {
  @override
  _CameraAppState createState() => _CameraAppState();
}

class _CameraAppState extends State<CameraApp> {
  late CameraController _controller;
  late List<CameraDescription> _availableCameras;

  @override
  void initState() {
    super.initState();
    availableCameras().then((availableCameras) {
      setState(() {
        _availableCameras = availableCameras;
        _controller = CameraController(availableCameras[0], ResolutionPreset.high);
        _controller.initialize().then((_) {
          if (mounted) setState(() {});
        });
      });
    }).catchError((err) {
      print('Error accessing cameras: $err');
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Camera with Overlay'),
      ),
      body: _controller.value.isInitialized
          ? Center(
              child: CameraPreview(_controller)
          )
          : Container(),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          try {
            await _controller.takePicture();
          } catch (e) {
            print(e);
          }
        },
        child: Icon(Icons.camera),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: CameraOverlay(
        controller: _controller,
        overlayWidgets: [
          CameraOverlayButton(
            icon: Icons.photo_camera,
            onTap: () async {
              try {
                await _controller.takePicture();
              } catch (e) {
                print(e);
              }
            },
          ),
          CameraOverlayButton(
            icon: Icons.videocam,
            onTap: () {
              // Handle video recording here
            },
          ),
          // Add more overlay widgets as needed
        ],
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 初始化相机：在initState方法中，我们请求可用的相机列表，并初始化第一个相机。
  2. 显示相机预览：在build方法中，如果相机已经初始化，我们使用CameraPreview小部件显示相机预览。
  3. 添加覆盖层：使用CameraOverlay小部件添加覆盖层，并定义了两个按钮（拍照和录像），当用户点击这些按钮时，会触发相应的动作。

请注意，这个示例假设你已经添加了camera插件来访问设备的相机。你可以在pubspec.yaml中添加以下依赖：

dependencies:
  camera: ^0.10.0+1  # 替换为实际最新版本号

同时，请确保在Android的AndroidManifest.xml和iOS的Info.plist中添加了必要的相机权限。

这个示例是一个基本的实现，你可以根据需求进行进一步的自定义和扩展。

回到顶部