Flutter의 특정 위치에 하이픈으로 텍스트 필드를 만들 수 있습니까?

Question

다음과 같이 입력 텍스트 필드를 표시해야하는 UI를 만들고 있습니다.

이렇게 만들려고하는데 설레는 게 처음이라 할 수가 없어요. flutter에서이 요구 사항을 충족 할 수있는 위젯이 있나요? 아니면이 위젯을 어떻게 만들 수 있는지 안내해주세요.

Answer 1

이 flutter_masked_text 패키지를 사용하면 아래와 같이 할 수 있습니다. 그러면 사용자가 숫자를 입력 할 때 필요한 위치에 하이픈이있는 텍스트의 서식이 자동으로 지정됩니다.

class _MyWidgetState extends State<MyWidget> {
  MaskedTextController tc = MaskedTextController(mask: '00000-0000000-0');

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: tc,
      decoration: InputDecoration(
        hintText: 'e.g. 61101-1234524-1',
      ),
    );
  }
}

Answer 2

이것을 시도 할 수 있습니다. 한 행에 여러 텍스트 필드를 사용하려는 경우.

Container(
            width: 200,
            padding: EdgeInsets.all(8),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              border: Border.all(color: Colors.blue)
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                    width: 50,
                    child: TextField(
                      keyboardType: TextInputType.number,
                      focusNode: f1,
                      onChanged: (String newVal) {
                        if (newVal.length == 5) {
                          f1.unfocus();
                          FocusScope.of(context).requestFocus(f2);
                        }
                      },
                    )),
                Text(" - "),
                Container(
                    width: 70,
                    child: TextField(
                      keyboardType: TextInputType.number,
                      focusNode: f2,
                      onChanged: (String newVal) {
                        if (newVal.length == 7) {
                          f2.unfocus();
                          FocusScope.of(context).requestFocus(f3);
                        }
                        if(newVal == ''){
                          f2.unfocus();
                          FocusScope.of(context).requestFocus(f1);
                        }
                      },
                    )),
                Text(" - "),
                Container(
                    width: 10,
                    child: TextField(
                      keyboardType: TextInputType.number,
                      focusNode: f3,
                      onChanged: (String newVal) {
                        if (newVal.length == 1) {
                          f3.unfocus();
                        }
                        if(newVal == ''){
                          f3.unfocus();
                          FocusScope.of(context).requestFocus(f2);
                        }
                      },
                    )),
              ],
            ),
          ),

산출:

그러나 단일 TextField에서이를 수행하려면 다음과 같이해야합니다.

Container(
            width: 200,
            child: Center(
              child: TextFormField(
                keyboardType: TextInputType.number,
                inputFormatters: [
                  WhitelistingTextInputFormatter.digitsOnly,
                  new LengthLimitingTextInputFormatter(13),
                  new NumberFormatter()
                ],
              ),
            ),
          ),

//Custom InputFormatter
class NumberFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    var text = newValue.text;

    if (newValue.selection.baseOffset == 0) {
      return newValue;
    }

    var buffer = new StringBuffer();
    for (int i = 0; i < text.length; i++) {
      buffer.write(text[i]);
      var nonZeroIndex = i + 1;
      print(text.length);
      if (nonZeroIndex <= 5) {
        print("non");
        print(nonZeroIndex);
        if (nonZeroIndex % 5 == 0 && nonZeroIndex != text.length) {
          buffer.write('-'); // Add double spaces.
        }
      } else {
        if (nonZeroIndex % 12 == 0 && nonZeroIndex != text.length) {
          buffer.write('-'); // Add double spaces.
        }
      }
    }

    var string = buffer.toString();
    return newValue.copyWith(
        text: string,
        selection: new TextSelection.collapsed(offset: string.length));
  }
}

산출: