本文正在参与「金石计划」

---

本文翻译自：pinput | Flutter Package (flutter-io.cn)

译时版别：2.2.31

---

Tornike 和 伟大的贡献者们 带来的 Flutter Pinput

该 Flutter 包用于便利创立可定制的 Pin 码（短信验证码）输入组件，设计者甚至不需求在 Figma 中画出。

假如运用的 Flutter 版别低于 3.7.0 ，需求运用 Pinput 的 2.2.21 版别

友情提示： 告诉你的PM你需求一周的时刻来完结该特性，然后就能够和朋友们去游玩了。

特性

• 切换动画
• 表单验证
• iOS 渠道的 SMS （短信）主动填充
• Android 渠道的 SMS （短信）主动填充
• 规范光标
• 自定义光标
• 光标动画
• 从剪贴板复制
• 可用于自定义键盘
• 规范的张贴选项
• 含糊字符
• 含糊组件
• 触觉反馈
• 完结后封闭键盘
• 美观的示例

支撑

欢迎 PR

讨论频道

Github 上的示例运用有多个模板可选。

别忘了给个 Star ⭐

演示

实况演示	圆角带暗影	圆角带光标

圆角填充	底部光标	填充

开始

Pin 有六个状况default 、focused 、submitted 、following 、disabled 、error ，能够指定主题参数自定义每个状况。 Pin 会主动地在状况间进行丝滑的动画。

PinTheme Class

特点	默许/类型
width	56.0
height	60.0
textStyle	TextStyle()
margin	EdgeInsetsGeometry
padding	EdgeInsetsGeometry
constraints	BoxConstraints

可如下运用规范的 Pinput

Widget buildPinPut() {
  return Pinput(
    onCompleted: (pin) => print(pin),
  );
}

假如想要自定义，首要创立defaultPinTheme 。

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),
  ),
);

假如想要一切的 Pin 都是相同的，则不需求传递任何主题参数，否则需求从defaultPinTheme 创立focusedPinTheme 、submittedPinTheme 、followingPinTheme 、errorPinTheme 。

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),
  ),
);

把一切内容整合在一起：

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),
  ),
);
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

开箱即用，点一下键盘上方的 PIN 码

Android

假如是在运用firebase_auth，需求把 androidSmsAutofillMethod 设置为 AndroidSmsAutofillMethod.none ，并在verificationCompleted 的回调中设置 controller 的值。下面是示例代码：

    Pinput(
      androidSmsAutofillMethod: AndroidSmsAutofillMethod.none,
      controller: pinController,
    );

在 verificationCompleted回调中设置 pinController 的值：

    await FirebaseAuth.instance.verifyPhoneNumber(
      verificationCompleted: (PhoneAuthCredential credential) {
        pinController.setText(credential.smsCode);
      },
      verificationFailed: (FirebaseAuthException e) {},
      codeSent: (String verificationId, int? resendToken) {},
      codeAutoRetrievalTimeout: (String verificationId) {},
    );

---

假如没有运用 firebase_auth ，那有两个选项，SMS Retriever API和SMS User Consent API 。

SmartAuth是在 Flutter 上运用这些 API 的封装，它提供 Pinput 的主动填充。

SMS Retriever API

要运用 Retriever API 需求signature （签名）运用，Pinput 会计算 Hash 值并在控制台打印出来， SMS 码会被主动处理，不需求用户的交互。

留意 Signature （签名）运用在调试模式和发布模式会有差异

return Pinput(
  androidSmsAutofillMethod:  AndroidSmsAutofillMethod.smsRetrieverApi,
);

打印签名的示例：Pinput: App Signature for SMS Retriever API Is: kg+TZ3A5qzS

SMS User Consent API

不需求 Signature （签名）运用，用户会被提示承认阅读信息。

return Pinput(
  androidSmsAutofillMethod:  AndroidSmsAutofillMethod.smsUserConsentApi,
);

SmartAuth

假如主动填充支撑无法满足需求，能够运用SmartAuth 完结主动填充，也就是能够经过显现原生 Android 对话框启用电话号码。

无需增加 SmartAuth 依赖，它已经被增加了

参阅更多示例模板

技巧

• Controller

/// 创立 Controller  
final pinController = TextEditingController();  
/// 编码设置文本
pinController.setText('1222');  
/// 增加输入字符，假如在运用自定义键盘，这是有用的。
pinController.append('1', 4);  
/// 删去最后一个字符
pinController.delete();  
/// 不能在 build 办法中调用 setText 、 append 、 delete ，这儿只是阐明。
return Pinput(  
  controller: pinController,  
);  

• 焦点

/// 创立 FocusNode  
final pinputFocusNode = FocusNode();  
/// 让 pinput 获得焦点
pinputFocusNode.requestFocus();  
/// 让 pinput 失掉焦点
pinputFocusNode.unfocus();  
/// 不能在 build 办法中调用 requestFocus 、 unfocus ，这儿只是阐明。
return Pinput(  
  focusNode: pinputFocusNode,  
);  

• 验证

/// 创立 key
final formKey = GlobalKey<FormState>();
/// 手动验证
/// 不能在 build 办法中调用 validate ，这儿只是阐明。
formKey.currentState!.validate();
return Form(
  key: formKey,
  child: Pinput(
    // 没有验证器
    // 假如设置为 True ，不论验证器返什么成果都会是过错状况。
    forceErrorState: true,
    // 文本会在 Pinput 下面显现
    errorText: 'Error',
    /// ------------
    /// 有验证器
    /// 会在用户点击键盘的完结按钮或完结 Pinput 输入后主动验证。
    pinputAutovalidateMode: PinputAutovalidateMode.onSubmit,
    validator: (pin) {
      if (pin == '2224') return null;
      /// 文本会在 Pinput 下面显现
      return 'Pin is incorrect';
    },
  ),
);

特点

本部分未翻译，特点项目较多，参阅源码。

---

本文正在参与「金石计划」