Bagaimana saya bisa membuat textfield dengan tanda hubung di tempat-tempat tertentu dari nomor masukan di flutter

Question

Saya membuat UI di mana saya harus menampilkan bidang teks input seperti ini:

Saya mencoba membuatnya seperti ini tetapi tidak dapat membuatnya karena saya baru berdebar. Apakah ada jenis widget yang akan memenuhi persyaratan ini dalam flutter atau Anda dapat membimbing saya bagaimana cara membuat widget yang satu ini.

Answer 1

Dengan menggunakan paket ini flutter_masked_text , Anda dapat melakukan ini seperti di bawah ini. Ini akan secara otomatis memformat teks dengan tanda hubung pada posisi yang diperlukan saat pengguna mengetikkan nomor tersebut.

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

Anda bisa mencobanya. jika Anda ingin menggunakan beberapa bidang teks secara berurutan.

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);
                        }
                      },
                    )),
              ],
            ),
          ),

Keluaran:

Tetapi jika Anda ingin melakukannya dalam satu BidangTeks, Anda harus melakukan sesuatu seperti ini:

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));
  }
}

Keluaran: