現在很多app都有填寫驗證碼的需求，而這個驗證碼的UI流行非普通的輸入框(畢竟移動開發主要矛盾是設計師日益增長的天馬行空同落後的開發之間的矛盾)，作為跨平臺方案的Flutter自然也會用到這種控制元件。本著少造輪子，多copy的原則，想去找個驗證碼的控制元件直接用，但是蒐羅了一遍Github和SO都沒發現替代的控制元件。
沒有輪子，那就自己造！
首先分析下，常見的驗證碼UI有三種型別。
- 下劃線
- 寬鬆線框型（相鄰的矩形不相交）
- 貼合線框型（相鄰的矩形y軸相交）
雖然UI上有些差異，但是實際使用上大同小異。首先我們需要一個能夠接收輸入的Widget，那麼TextField再合適不過了。不過，TextField的繪製我們不能像Android裡面直接過載或者變成InVisible，那麼我們就把所有繪製的內容變成透明，這樣給使用者的表象就像空白的。
接下去的步驟就很簡單了，只需要把TextField接收到的輸入繪製在我們實際展示的Widget上。就像下面三張動圖一樣
其實核心思想很簡單，並不需要那麼多的理論。?
plugin已上傳到dart packages，大家可以新增下面程式碼使用
dependencies:
pin_input_text_field: ^0.0.1
複製程式碼歡迎PR和Issue，github.com/TinoGuo/pin…