Flutter花式玩转TextField，写一个验证码输入框超简单！

GitHub地址：github.com/yumi0629/Fl…

（写的比较急，代码还没整理好，很凌乱，emmm，果然还是元旦之后再整理吧，→_→）

（本方案暂时只支持数字，不支持英文字母、中文等）

国际惯例先上效果图：

需求分析

  这个验证码输入框的需求来源近日日群里有人提出了这么一个问题：像下面这种的控件该怎么写？

  乍一看这就是一个TextField，但似乎又有那么点不太一样？我冷静思考了一下，脑子里有两套解决方案：

• 1、复制一份TextField，魔改SDK。
• 2、用4个输入框组合；

  这两种方案，看着就觉得脑壳疼啊。
  先说第一种，点进源码我们可以看到TextField的实现链式关系为：TextField——>EditableText——>_Editable——>RenderEditable，而主要的绘制都集中在了RenderEditable中的paint()方法：

 @override
  void paint(PaintingContext context, Offset offset) {
    ······
    if (_hasVisualOverflow)
      context.pushClipRect(needsCompositing, offset, Offset.zero & size, _paintContents);
    else
    // 具体绘制内容，包括cursor和文字
      _paintContents(context, offset);
  }
  
void _paintContents(PaintingContext context, Offset offset) {
    ······
    // 绘制cursor
    if (_selection.isCollapsed && _showCursor.value && cursorColor != null) {
      _paintCaret(context.canvas, effectiveOffset);
    } else if (!_selection.isCollapsed && _selectionColor != null) {
        ······
      _paintSelection(context.canvas, effectiveOffset);
    }
    // 绘制文字
    _textPainter.paint(context.canvas, effectiveOffset);
  }

 
复制代码

  虽说生命不息，魔改不止，但是这一套魔改下来，emmmm，我选择拒绝！
  再说第二种，4个控件组合，这种方式在布局上确实会简单很多，但是，致命的问题在于，要自己处理用户的手势输入，以及cursor的位置移动等等，这个过程是十分复杂的，而且容易出错。
  众所周知，我小拉面是一个懒人，能走对角线的我绝对不拐弯，写代