如何处理颤振中的文本字段？

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

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),
                ),
              ),
            ),