android - 如何处理Flutter中的文字栏位？

Question

我有以下文本，我想像这样处理:如果用户输入前两个数字，则用户将在此文本字段中输入数据，然后在用户输入最后两个数字之前自动插入 / 。
代码

      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

您可以创建自定义的InputFormatter并在TextField中编写用于格式化文本的逻辑。

有一个名为flutter_mask_text的软件包，可减轻创建自定义InputFormatter的压力。我将链接添加到下面的包中:

Flutter masked text

软件包的示例演示:
创建一个 Controller :

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

将 Controller 分配给您的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),
                ),
              ),
            ),