개발하자

사용자가 Verification Code 입력 플러터에서 입력을 삭제하는 경우를 아는 방법

Cuire 2023. 2. 22. 03:50
반응형

사용자가 Verification Code 입력 플러터에서 입력을 삭제하는 경우를 아는 방법

나는 내 앱에 인증 코드를 입력하고 싶다. 나는 그것을 하기 위해 사용하고 있다. 그런데 사용자가 위젯에 입력한 번호를 삭제하면 제출 버튼을 비활성화 시킬 수 있는지 확인하는 방법을 모르겠습니다. 나는 다음과 같이 했다. 사용자가 입력한 번호를 필드에 완전히 입력한 후 삭제했는지 여부를 어떻게 알 수 있습니까? 감사합니다!

VerificationCodeInput(
 keyboardType: TextInputType.number,
 length: 4,
 onCompleted: (String value) {
  setState(() {
   full = true;
  });
 },
),


소스로 가서 코드 개발자가 만든 것을 볼 수 있습니다. 원하는 논리는 제공되지 않습니다.

따라서 이 패키지를 분기하여 필요한 것을 직접 구현할 수 있습니다.

예를 들어 나는 편집을 위해 한 번 더 검사를 시행하는 포크를 만들었다.

첨부된 화면과 같이 작동합니다.

코드에 구현하려면 이 새로운 패키지로 pubspec.yaml을 변경해야 합니다

dependencies:
  flutter:
    sdk: flutter
  flutter_verification_code: ^0.1.4

그리고 코드에서는 이렇게 사용할 수 있다

  body: Column(
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: Text(
            'Enter your code',
            style: TextStyle(fontSize: 20.0),
          ),
        ),
      ),
      VerificationCodeInput(
        keyboardType: TextInputType.number,
        length: 4,
        autofocus: false,
        onCompleted: (String value) {
          print(value);
          setState(() {
            _code = value;
          });
        },
        onEditing: (bool value) {
          setState(() {
            _onEditing = value;
          });
        },
      ),
      (_onEditing != true)
          ? Padding(
              padding: const EdgeInsets.all(8.0),
              child: Center(
                child: Text(
                  'Your code: $_code',
                ),
              ),
            )
          : Container(
              child: Text(
                'Please enter full code',
              ),
            ),
    ],

전체 예는 다음과 같습니다

(그리고 물론 독창적인 개발자들에게 큰 감사를 드립니다

enter image description here



FocusScope.of(context)의 변경 내용을 추가합니다.nextFocus(); 입력 값의 길이가 == 1이고 FocusScope.of(context)일 때.이전의Focus(); 값의 길이가 == 0일 때

TextFormField(
  onChanged: (value){
   if (value.length == 1){
     FocusScope.of(context).nextFocus();
   }else{
     FocusScope.of(context).previousFocus();
   }
  },
  decoration: InputDecoration(
  hintText: "0"
  ),
  style: Theme.of(context).textTheme.headline6,
  keyboardType: TextInputType.number,
  inputFormatters: [
    LengthLimitingTextInputFormatter(1),
    FilteringTextInputFormatter.digitsOnly
  ],
),

반응형