Flutter输入验证码插件input_code_field的使用

Flutter输入验证码插件input_code_field的使用

InputCodeControl小部件提供了一个用于输入PIN码、短信验证码以及其他认证码的文本字段。它还可以用于输入高度格式化的输入，例如日期和时间。该小部件支持退格键盘按钮。

支持开发 ☕

开发和维护此插件需要时间和精力。如果您觉得这个插件有用，并且愿意表达您的感激之情，可以考虑进行捐赠。您的贡献有助于确保插件的持续开发和改进。🚀

您可以进行捐赠并买杯咖啡以保持发展势头：

您的支持至关重要，每一份捐赠都深受欢迎。感谢您帮助使这个插件变得更好！🙏

使用

InputCodeControl处理代码字段的所有逻辑、验证和状态管理。它还存储当前值和下一个字段的索引指针。

InputCodeField是一个具有下划线的标准文本字段，可以通过InputCodeDecoration进行自定义。它支持启用和禁用字段、遮蔽输入以及设置字段的大小、颜色和其他属性。

final InputCodeControl codeControl = InputCodeControl(inputRegex: '^[0-9]*$');

InputCodeField(
  control: codeControl,
  count: 6,
  inputType: TextInputType.number,
  decoration: InputCodeDecoration(
    focusColor: Colors.blueGrey,
  ),
),

手动自定义

为了更好地视觉控制，您可以使用itemBuilder回调来构建自定义字段项。要获取给定索引处的字符，可以使用InputCodeControl对象上的[]操作符。要检查给定索引处的项是否处于焦点状态，可以使用InputCodeControl.isFocused(index)方法。要检查整个小部件是否处于焦点状态，可以使用InputCodeControl.hasFocus方法。

InputCodeField(
  control: codeControl,
  itemBuilder: (context, index) => CustomCodeItem(
    char: control.stringCode.code[index],
    fieldFocused: codeControl.hasFocus,
    itemFocused: codeControl.isFocused(index),
  ),
);

class CustomCodeItem extends StatelessWidget {
  final String char;
  final bool fieldFocused;
  final bool itemFocused;

  const CustomCodeItem({
    Key? key,
    this.char = '',
    this.fieldFocused = false,
    this.itemFocused = false,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      width: 42.0,
      height: 42.0,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(6.0),
        color: fieldFocused ? (itemFocused ? Colors.grey : Colors.grey.withOpacity(0.5)) : Colors.grey.withOpacity(0.25),
        border: Border.all(color: itemFocused ? Colors.black : Colors.grey),
      ),
      child: Center(
        child: Text(
          char,
          style: Theme.of(context).primaryTextTheme.headline4,
        ),
      ),
    );
  }
}

为了获得完全的视觉控制，可以使用builder回调来构建整个输入小部件。InputCodeField和InputCodeControl将继续处理所有输入逻辑和键盘操作。

InputCodeField(
  control: codeControl,
  builder: (context) => CustomCodeField(
    control: codeControl,
  ),
);

class CustomCodeField extends StatelessWidget {
  final InputCodeControl control;

  const CustomCodeField({
    Key? key,
    required this.control,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    final List<Widget> items = [];

    for (int i = 0; i < control.count; i++) {
      if (i > 0 && i % 3 == 0) {
        items.add(Container(
          margin: EdgeInsets.symmetric(horizontal: 24.0),
          height: 32.0,
          width: 2.0,
          color: control.hasFocus ? Colors.green : Colors.blueGrey,
        ));

        items.add(Container(
          height: 42,
          width: 1.0,
          color: Colors.blueGrey,
        ));
      }

      items.add(Expanded(
        child: Container(
          height: 42.0,
          color: control.isFocused(i, true) ? Colors.greenAccent.withOpacity(0.25) : Colors.transparent,
          child: Center(
            child: Text(
              control[i],
              style: Theme.of(context).primaryTextTheme.headline4,
            ),
          ),
        ),
      ));

      if (i < control.count - 1) {
        items.add(Container(
          height: 42,
          width: 1.0,
          color: Colors.blueGrey,
        ));
      }
    }

    return ClipRRect(
      borderRadius: BorderRadius.circular(16.0),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(16.0),
          border: Border.all(color: control.hasFocus ? Colors.green : Colors.blueGrey),
        ),
        child: Row(
          children: items,
        ),
      ),
    );
  }
}