Flutter密码输入插件pinput的使用

Flutter Pinput 是一个用于创建密码输入框的插件，它提供了多种特性，如动画装饰切换、表单验证、SMS自动填充等。以下是关于如何使用这个插件的详细介绍。

功能特性

• 动画装饰切换：当状态改变时，输入框会平滑地进行动画过渡。
• 表单验证：可以为输入框添加自定义验证逻辑。
• SMS自动填充：支持iOS和Android上的短信验证码自动填充。
• 自定义光标：可以设置不同样式的光标。
• 从剪贴板复制：允许用户从剪贴板中粘贴内容。
• 震动反馈：提供触觉反馈以增强用户体验。
• 关闭键盘：完成输入后自动收起键盘。
• 更多功能：还包括标准粘贴选项、遮挡字符等功能。

快速开始

安装依赖

在pubspec.yaml文件中添加依赖：

dependencies:
  pinput: ^latest_version

然后运行命令安装依赖：

flutter pub get

创建默认样式

首先定义默认的主题样式：

final defaultPinTheme = PinTheme(
  width: 56,
  height: 56,
  textStyle: TextStyle(fontSize: 20, color: Color.fromRGBO(30, 60, 87, 1), fontWeight: FontWeight.w600),
  decoration: BoxDecoration(
    border: Border.all(color: Color.fromRGBO(234, 239, 243, 1)),
    borderRadius: BorderRadius.circular(20),
  ),
);

自定义其他状态

根据需要定义不同的状态样式（如聚焦、提交后的样式）：

final focusedPinTheme = defaultPinTheme.copyDecorationWith(
  border: Border.all(color: Color.fromRGBO(114, 178, 238, 1)),
  borderRadius: BorderRadius.circular(8),
);

final submittedPinTheme = defaultPinTheme.copyWith(
  decoration: defaultPinTheme.decoration.copyWith(
    color: Color.fromRGBO(234, 239, 243, 1),
  ),
);

使用Pinput组件

将所有配置组合起来并使用Pinput组件：

return Pinput(
  defaultPinTheme: defaultPinTheme,
  focusedPinTheme: focusedPinTheme,
  submittedPinTheme: submittedPinTheme,
  validator: (s) {
    return s == '2222' ? null : 'Pin is incorrect';
  },
  pinputAutovalidateMode: PinputAutovalidateMode.onSubmit,
  showCursor: true,
  onCompleted: (pin) => print(pin),
);

SMS自动填充

对于iOS设备，只需确保你正在使用真实设备而非模拟器，并且你的应用已经正确设置了权限即可实现自动填充功能。而对于Android设备，则可以通过Firebase Authentication或Google提供的SMS Retriever API和User Consent API来实现。

Firebase Authentication 示例

如果你正在使用Firebase Authentication，可以在verificationCompleted回调中设置controller的值：

await FirebaseAuth.instance.verifyPhoneNumber(
  verificationCompleted: (PhoneAuthCredential credential) {
    pinController.setText(credential.smsCode);
  },
  // ... other callbacks ...
);

使用SmartAuth包

如果不想使用Firebase，可以考虑使用smart_auth包作为替代方案。该包封装了Google的SMS Retriever API和User Consent API，简化了开发流程。

更多示例代码

完整的例子可以在GitHub仓库中的example目录下找到。这里包含了一个简单的应用程序，展示了如何结合各种特性一起工作。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Pinput Example')),
        body: Center(child: PinputExample()),
      ),
    );
  }
}

class PinputExample extends StatefulWidget {
  @override
  _PinputExampleState createState() => _PinputExampleState();
}

class _PinputExampleState extends State<PinputExample> {
  final TextEditingController pinController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    final defaultPinTheme = PinTheme(
      width: 56,
      height: 56,
      textStyle: TextStyle(fontSize: 20, color: Colors.black),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey),
        borderRadius: BorderRadius.circular(10),
      ),
    );

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Pinput(
          controller: pinController,
          defaultPinTheme: defaultPinTheme,
          onCompleted: (pin) => print("PIN entered: $pin"),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            print("Validate PIN");
          },
          child: Text("Validate"),
        ),
      ],
    );
  }
}

以上就是关于Flutter密码输入插件pinput的基本介绍及用法说明。希望这些信息能帮助到你！如果有任何疑问或者遇到问题，请随时查阅官方文档或参考官方提供的完整示例。