Flutter人脸检测锁定插件face_detection_lock的使用

Flutter人脸检测锁定插件face_detection_lock的使用

一个用于iOS和Android的Flutter插件，通过面部识别来保护您的应用或部分页面。

特性

• 当未检测到人脸时，屏幕将被锁定。
• 通过回调函数可以获取解锁屏幕的人脸快照。

开始使用

首先，此插件使用了Google的Mk Kit进行面部识别。因此，您需要将项目连接到Firebase项目，并在Flutter项目的android/app/目录下放置google-services.json文件。

其次，在pubspec.yaml文件中添加camera依赖项。

iOS

该插件使用相机进行面部识别，因此请确保请求相机权限。

在ios/Runner/Info.plist中添加两行：

• 一个键为Privacy - Camera Usage Description，并附上使用描述。
• 另一个键为Privacy - Microphone Usage Description，并附上使用描述。

如果以文本形式编辑Info.plist，添加以下内容：

<key>NSCameraUsageDescription</key>
<string>your usage description here</string>
<key>NSMicrophoneUsageDescription</key>
<string>your usage description here</string>

Android

在android/app/build.gradle文件中将最低Android SDK版本更改为21（或更高）。

minSdkVersion 21

使用方法

如果您希望仅锁定某个页面或整个应用，则可以通过FaceDetectionLock包装需要锁定的页面或整个应用。

示例代码

import 'dart:developer';

import 'package:face_detection_lock/face_detection_lock.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:physical_security_app/main_app_content_placeholder.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]);
    return MaterialApp(title: 'Secure screen Demo', home: WidgetToggle());
  }
}

class WidgetToggle extends HookWidget {
  const WidgetToggle({super.key});

  @override
  Widget build(BuildContext context) {
    final isAbove = useState(false);
    return Scaffold(
      body: isAbove.value
          ? BlocProvider(
              create: (context) => FaceDetectionBloc(
                onFaceSnapshot: (faces) {
                  log(faces.toString());
                },
                // cameraController: _yourCameracontroller
              )..add(const FaceDetectionEvent.initializeCam()),
              child: FaceDetectionLock(
                isBlocInitializeAbove: isAbove.value,
                body: MainAppContentPlaceholder(),
              ),
            )
          : FaceDetectionLock(
              body: MainAppContentPlaceholder(),
            ),
      floatingActionButton: ElevatedButton(
        child: Text('Switch to isBlocInitialize = ${!isAbove.value}'),
        onPressed: () {
          isAbove.value = !isAbove.value;
        },
      ),
    );
  }
}

解释

在上述示例中，我们创建了一个简单的Flutter应用，其中包含一个切换按钮。当点击按钮时，应用会切换是否使用FaceDetectionBloc初始化。如果使用FaceDetectionBloc初始化，我们将能够通过回调函数获取解锁屏幕的人脸信息。

1. 创建应用:

   Future<void> main() async {
     WidgetsFlutterBinding.ensureInitialized();
     runApp(const MyApp());
   }
   

2. 设置应用的基本配置:

   class MyApp extends StatelessWidget {
     const MyApp({Key? key}) : super(key: key);
   
     @override
     Widget build(BuildContext context) {
       SystemChrome.setPreferredOrientations([
         DeviceOrientation.portraitUp,
         DeviceOrientation.portraitDown,
       ]);
       return MaterialApp(title: 'Secure screen Demo', home: WidgetToggle());
     }
   }
   

3. 创建可切换的页面:

   class WidgetToggle extends HookWidget {
     const WidgetToggle({super.key});
   
     @override
     Widget build(BuildContext context) {
       final isAbove = useState(false);
       return Scaffold(
         body: isAbove.value
             ? BlocProvider(
                 create: (context) => FaceDetectionBloc(
                   onFaceSnapshot: (faces) {
                     log(faces.toString());
                   },
                   // cameraController: _yourCameracontroller
                 )..add(const FaceDetectionEvent.initializeCam()),
                 child: FaceDetectionLock(
                   isBlocInitializeAbove: isAbove.value,
                   body: MainAppContentPlaceholder(),
                 ),
               )
             : FaceDetectionLock(
                 body: MainAppContentPlaceholder(),
               ),
         floatingActionButton: ElevatedButton(
           child: Text('Switch to isBlocInitialize = ${!isAbove.value}'),
           onPressed: () {
             isAbove.value = !isAbove.value;
           },
         ),
       );
     }
   }