how to handle textfields in flutter?

Question

I have the following text filed in flutter, i want to handle this like while user is going to enter data into this text field if user enters first two numbers than their will be inserted / automatically before user enters last two numbers.

Code

      Container(
              width: MediaQuery.of(context).size.width * 0.45,
              child: TextField(
                style: style,
                maxLength: 4,
                cursorColor: Colors.red,
                textAlign: TextAlign.left,
                keyboardType: TextInputType.datetime,
                decoration: InputDecoration(
                  filled: true,
                  fillColor: Color(0xFF1E1E1E),
                  hintText: 'MM/YY',
                  hintStyle: TextStyle(fontSize: 16, color: Colors.white),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(8),
                    borderSide: BorderSide(
                      width: 0,
                      style: BorderStyle.none,
                    ),
                  ),
                  contentPadding: EdgeInsets.all(16),
                ),
              ),
            ),

Answer 1

Just use the onChanged callback of the TextField widget. Here's a simple example to help you out:

String _expiryDate = '';

Container(
  width: MediaQuery.of(context).size.width * 0.45,
  child: TextField(
    style: style,
    maxLength: 5, // Increased maxLength to accommodate the slash character
    cursorColor: Colors.red,
    textAlign: TextAlign.left,
    keyboardType: TextInputType.datetime,
    decoration: InputDecoration(
      filled: true,
      fillColor: Color(0xFF1E1E1E),
      hintText: 'MM/YY',
      hintStyle: TextStyle(fontSize: 16, color: Colors.white),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8),
        borderSide: BorderSide(
          width: 0,
          style: BorderStyle.none,
        ),
      ),
      contentPadding: EdgeInsets.all(16),
    ),
    onChanged: (value) {
      // Remove any slashes from the entered value
      String sanitizedValue = value.replaceAll('/', '');

      // Add a slash after the first two numbers
      if (sanitizedValue.length >= 2 && sanitizedValue.length <= 4) {
        sanitizedValue = sanitizedValue.substring(0, 2) + '/' + sanitizedValue.substring(2);
      }

      // Update the TextField value
      setState(() {
        _expiryDate = sanitizedValue;
      });
    },
    controller: TextEditingController(text: _expiryDate),
  ),
),

So basically, what we're doing is using the onChanged callback to play around with the value that's being entered. First things first, we remove any slashes from the input to avoid having double slashes. Then, if the length of the cleaned-up value is somewhere between 2 and 4, we go ahead and slap a slash right after the first two numbers. And finally, we update the TextField's value by calling setState and passing in that cleaned-up value.

Answer 2

1. You can create a custom InputFormatter and write the logic for formatting text in the TextField.

2. There is a package called flutter_mask_text which saves you the stress of creating a custom InputFormatter. I added the link to the package below:

Flutter masked text

Sample demo for the package:

Create a controller:

var controller = new MaskedTextController(mask: '00/00');

Assign the controller to your TextField:

        Container(
              width: MediaQuery.of(context).size.width * 0.45,
              child: TextField(
                controller: controller, // new line
                style: style,
                maxLength: 4,
                cursorColor: Colors.red,
                textAlign: TextAlign.left,
                keyboardType: TextInputType.datetime,
                decoration: InputDecoration(
                  filled: true,
                  fillColor: Color(0xFF1E1E1E),
                  hintText: 'MM/YY',
                  hintStyle: TextStyle(fontSize: 16, color: Colors.white),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(8),
                    borderSide: BorderSide(
                      width: 0,
                      style: BorderStyle.none,
                    ),
                  ),
                  contentPadding: EdgeInsets.all(16),
                ),
              ),
            ),