Flutter TextField实现银行卡号输入

class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => new _TestPageState();
}

class _TestPageState extends State<TestPage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          Container(
            margin: EdgeInsets.symmetric(horizontal: 50),
            child: TextField(
              keyboardType: TextInputType.number,
              inputFormatters: [
                CardInputFormatter(),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

自定义TextInputFormatter限制输入内容

class CardInputFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    int newSelection = newValue.selection.baseOffset;
    int oldSelection = oldValue.selection.baseOffset;

    String newText = newValue.text;
    String oldText = oldValue.text;

    String pureNumbers = newText.replaceAll(RegExp(r'[^0-9]'), '');
    String cardNumbers = "";

    //每四位数中间插入空格
    for (var i = 0; i < pureNumbers.length; i++) {
      if (i > 0 && i % 4 == 0) {
        cardNumbers += ' ';
      }
      cardNumbers += pureNumbers[i];
    }

    //光标位置
    int selection;
    if (cardNumbers.length == oldText.length) {
      //文字长度没有变化
      selection = newSelection;
    } else {
      selection = oldSelection + cardNumbers.length - oldText.length;
    }

    return TextEditingValue(
      text: cardNumbers,
      selection: TextSelection.collapsed(offset: selection),
    );
  }
}