mask for IP v4 Address

[insinfo]

Hi, I would like to mask IP Address in TextFormField. The following code is partially written and does not work. Please advice.

new MaskTextInputFormatter(mask: '#.#.#.#',
    filter: {
      '#': new RegExp(r'^([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$')
    }); 
...
For each value, the number should be between 0-255.

[tsctrl]

any update? i am having same issue

[GuilhermeAlecrim7K]

Using the RegEx provided by @insinfo , the result is that whatever number is inputted into the field, the RegEx is matched. This means that the outcome in the TextField is always the same, four single digits separated by '.'.

I spent some time thinking about it and I do not believe there is a solution to accurately display the IPv4 mask.

Think about the following addresses:

25.1.3.67 251.3.6.7

Both are valid adresses and contain the same set of digits in the same order but are completely different. Since both values are valid, what criteria should be used for the mask? It is something only the user can define.

The best option would be to render a Row containing 4 TextFormField and a Text to display the dot. You should componentize the TextFormField since it can have the exact same properties.

Here's a sample:

import 'package:flutter/material.dart';

class TextFormFieldRow extends StatelessWidget {
  const TextFormFieldRow({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        for (var i = 0; i < 4; i++) ...[
          SizedBox(
            height: 40,
            width: 50,
            // Customize TextFormField here
            child: Center(child: TextFormField()),
          ),
          Text('.'),
        ]
      ]..removeLast(),
    );
  }
}