直播軟體app開發，flutter 驗證碼輸入框的簡單封裝

直播軟體app開發，flutter 驗證碼輸入框的簡單封裝

封裝驗證碼輸入框

自定義一個CustomOtpInput 類，繼承自 StatelessWidget

CustomOtpInput 需要接收 TextEditingController 和 autoFocus 控制

設計輸入需要展示的樣式

onChanged 文字內容改變之後，需要自動跳轉到下一步

基於上面的四點，我們來看一下完整的程式碼

class CustomOtpInput extends StatelessWidget {
  final TextEditingController controller;
  final bool autoFocus;
  const CustomOtpInput(
      {Key? key, required this.controller, required this.autoFocus})
      : super(key: key);
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 50,
      height: 60,
      child: TextField(
        autofocus: autoFocus,
        controller: controller,
        // 專案主題色
        cursorColor: Theme.of(context).primaryColor,
        decoration: const InputDecoration(
          border: OutlineInputBorder(),
          counterText: '',
        ),
        onChanged: (value) {
          if (value.length == 1) {
            FocusScope.of(context).nextFocus();
          }
        },
      ),
    );
  }
}

使用方法

Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          CustomOtpInput(
              controller: model.controller1, autoFocus: model.focusBool1),
          CustomOtpInput(
              controller: model.controller2, autoFocus: model.focusBool2),
          CustomOtpInput(
              controller: model.controller3, autoFocus: model.focusBool3),
          CustomOtpInput(
              controller: model.controller4, autoFocus: model.focusBool4),
        ],
      )

 以上就是 直播軟體app開發，flutter 驗證碼輸入框的簡單封裝，更多內容歡迎關注之後的文章