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

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