Flutter上你須要一個簡單實用的驗證碼輸入Widget

如今不少app都有填寫驗證碼的需求，而這個驗證碼的UI流行非普通的輸入框(畢竟移動開發主要矛盾是設計師日益增加的天馬行空同落後的開發之間的矛盾)，做爲跨平臺方案的Flutter天然也會用到這種控件。本着少造輪子，多copy的原則，想去找個驗證碼的控件直接用，可是蒐羅了一遍Github和SO都沒發現替代的控件。

沒有輪子，那就本身造！

首先分析下，常見的驗證碼UI有三種類型。

1. 下劃線

   

2. 寬鬆線框型（相鄰的矩形不相交）

   

3. 貼合線框型（相鄰的矩形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…