Flutter生物识别认证插件pin_input_biometric_authenticator的使用

Flutter生物识别认证插件pin_input_biometric_authenticator的使用

特性

• 按键输入
• 生物识别认证
• 支持最新原生SDK

演示

在下面的GIF中，你可以看到黑色屏幕，这是当我点击屏幕上的生物识别图标时发生的。 屏幕录制器由于底层操作系统限制无法捕捉。

使用方法

首先，在 AndroidManifest.xml 文件中添加生物识别权限：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.example.app">
  <uses-permission android:name="android.permission.USE_BIOMETRIC"/>
</manifest>

然后使用 PinScreenWithBiometric 类来实现功能：

PinScreenWithBiometric(
  controller: textEditingController,
  textFieldLength: 4,
  authResultCallBack: (bool? result) {
    debugPrint("BIOMETRIC RESULT IS `$result`");
  },
),

完整示例

以下是一个完整的示例代码，展示了如何使用该插件：

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

void main() {
  // 初始化Flutter框架
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(home: HomeScreen());
  }
}

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

  final TextEditingController textEditingController = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('插件示例应用'),
      ),
      body: Center(
        child: Column(
          children: [
            PinInputBiometricAuthenticator(
              controller: textEditingController,
              textFieldLength: 6,
              authResultCallBack: (bool? result) {
                debugPrint("BIOMETRIC RESULT IS `$result`");

                // 弹出对话框展示结果
                showDialog(
                    context: context,
                    builder: (_) {
                      return SizedBox(
                        height: 200,
                        width: 200,
                        child: AlertDialog(
                          title: Center(
                              child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              result!
                                  ? Container(
                                      height: 50,
                                      width: 50,
                                      decoration: BoxDecoration(
                                          color: Colors.green,
                                          borderRadius:
                                              BorderRadius.circular(25)),
                                      child: const Icon(Icons.add))
                                  : Container(
                                      height: 50,
                                      width: 50,
                                      decoration: BoxDecoration(
                                          color: Colors.red,
                                          borderRadius:
                                              BorderRadius.circular(25)),
                                      child: const Icon(Icons.sms_failed)),
                              const SizedBox(
                                height: 10,
                              ),
                              Text(
                                  "生物识别 ${result ? '成功' : '失败'}"),
                            ],
                          )),
                          content: Text(
                              "你已经 ${result ? '成功' : '失败'} 进行了身份验证"),
                        ),
                      );
                    });
              },
            ),
          ],
        ),
      ),
    );
  }
}