PinPut

100% 基于 Dart 且轻量级的 PIN 输入字段小部件。

此小部件占满父小部件的整个宽度，并以创建 PIN 码输入字段外观的方式布局文本框。它可以接受任何长度的字符串，并在所有字段填满时调用 onSubmit 方法。

pinput_demo

安装

从 pub 安装最新版本。

属性

属性 默认/含义
onSubmit @required Function
fieldsCount @required number
isTextObscure 假
文本样式 TextStyle(fontSize: 30)
spaceBetween 字段之间的间距，默认值：10.0
clearButtonIcon Icon(Icons.backspace, size: 30)
pasteButtonIcon Icon(Icons.content_paste, size: 30)
unFocusWhen 默认值为 False，设置为 True 可隐藏键盘
inputDecoration 能够设置字段的边框、内边距等样式...
keybaordType 数字
keyboardAction next
actionButtonEnabled 真
autoFocus 真

示例

导入包


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

void main() => runApp(PinPutTest());

class PinPutTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(
          primaryColor: Colors.green,
          hintColor: Colors.green,
        ),
        home: Scaffold(
            body: Builder(
          builder: (context) => Padding(
                padding: const EdgeInsets.all(40.0),
                child: Center(
                  child: PinPut(
                    fieldsCount: 4,
                    onSubmit: (String pin) => _showSnackBar(pin, context),
                  ),
                ),
              ),
        )));
  }

  void _showSnackBar(String pin, BuildContext context) {
    final snackBar = SnackBar(
      duration: Duration(seconds: 5),
      content: Container(
          height: 80.0,
          child: Center(
            child: Text(
              'Pin Submitted. Value: $pin',
              style: TextStyle(fontSize: 25.0),
            ),
          )),
      backgroundColor: Colors.greenAccent,
    );
    Scaffold.of(context).showSnackBar(snackBar);
  }
}

GitHub

https://github.com/Tkko/Flutter_PinPut