Flutter TextFormField验证问题：弹窗未关闭与提示时机异常

问题1：点击ADD按钮弹窗不关闭 #

原因 #

你将_formKey绑定到了AlertDialog组件上，但FormState只能通过Form组件的Key获取。没有用Form包裹TextFormField的情况下，_formKey.currentState实际为null，导致validate()逻辑无法正常执行，自然不会触发弹窗关闭。

解决方法 #

添加Form组件包裹所有TextFormField，并将_formKey绑定到Form上，同时移除AlertDialog的key属性。

问题2：弹窗一弹出就显示红色必填提示 #

原因 #

你设置了autovalidateMode: AutovalidateMode.always，该模式会让输入框在渲染完成后立即执行验证并显示错误提示。

解决方法 #

将两个TextFormField的autovalidateMode改为AutovalidateMode.disabled，这样只有在手动触发表单验证（比如点击ADD按钮调用validate()）时，才会执行验证并显示错误提示。

修复后的完整代码 #

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'activity.dart';

final _formKey = GlobalKey<FormState>();

class ActivityForm extends StatelessWidget {
  final Activity act1 = Activity('', '');

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: const Text('Add Activity'),
      content: Form(
        key: _formKey,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextFormField(
              maxLength: 24,
              decoration: const InputDecoration(
                icon: Icon(Icons.sports_baseball),
                labelText: 'What do you want to do?',
              ),
              cursorColor: Colors.green[300],
              onChanged: (String? value) {
                act1.act = value!;
              },
              autovalidateMode: AutovalidateMode.disabled,
              validator: (String? value) => value!.isEmpty ? 'Fill this' : null,
            ),
            TextFormField(
              decoration: const InputDecoration(
                icon: Icon(Icons.notes_outlined),
                labelText: 'Details',
              ),
              keyboardType: TextInputType.multiline,
              minLines: 1,
              maxLines: 8,
              maxLength: 300,
              onChanged: (String? value){
                act1.detalis = value!;
              },
              autovalidateMode: AutovalidateMode.disabled,
              validator: (String? value) => value!.isEmpty ? 'Fill this' : null,
            ),
          ],
        ),
      ),
      actionsAlignment: MainAxisAlignment.spaceEvenly,
      actions: [
        TextButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Cancel'),
        ),
        TextButton(
          onPressed: (){
            if(_formKey.currentState!.validate()){
              debugPrint(act1.act);
              debugPrint(act1.detalis);
              Navigator.pop(context);
            }
          },
          child: const Text('ADD'),
        ),
      ],
    );
  }
}

额外建议 #

1. Dart规范要求类名首字母大写，建议将activityForm改为ActivityForm，activity类改为Activity。
2. 代码中act1.detalis疑似拼写错误，建议修正为act1.details。
3. 推荐使用TextEditingController管理输入内容，替代直接修改对象属性，代码可读性和维护性更好。

内容的提问来源于stack exchange，提问作者Kurczakooo