How can i make textfield with hyphen at certain places of input number in flutter

Question

I am making the UI in which i have to show the input text field like this:

I try to make it like this but unable to make as i am new to flutter. Is there any kind of widget that will fulfill this requirement in flutter or you can guide me how can i make this one widget.

Answer 1

You can try this. if you want to use multiple text field in a row.

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

Output:

But if you want to do that in single TextField then you should do something like this:

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

Output:

Answer 2

Using this package flutter_masked_text, you can do this as below. This will auto-format the text with the hyphens at required positions as the user types in the number.

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