Come posso creare un campo di testo con trattino in determinati punti del numero di input in flutter

Question

Sto realizzando l'interfaccia utente in cui devo mostrare il campo di testo di input in questo modo:

Cerco di farlo in questo modo, ma non riesco a farlo perché sono nuovo a svolazzare. C'è qualche tipo di widget che soddisferà questo requisito in flutter o puoi guidarmi come posso creare questo widget.

Answer 1

Usando questo pacchetto flutter_masked_text , puoi farlo come di seguito. Questo formatterà automaticamente il testo con i trattini nelle posizioni richieste mentre l'utente digita il numero.

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

Puoi provare questo. se si desidera utilizzare più campi di testo in una riga.

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

Produzione:

Ma se vuoi farlo in un singolo TextField, dovresti fare qualcosa del genere:

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

Produzione: