Flutter中ElevatedButton点击后无响应问题求助

问题场景 #

有两个TextFormField（用于输入name和age），输入内容后点击Send按钮完全没有响应，相关代码如下：

编辑页代码 #

class UserForm extends StatefulWidget {
  const UserForm({Key? key}) : super(key: key);

  @override
  State<UserForm> createState() => _UserFormState();
}

class _UserFormState extends State<UserForm> {
  final formKey = GlobalKey<FormState>();
  final nameController = TextEditingController();
  final ageController = TextEditingController();

  @override
  void dispose() {
    super.dispose();
    nameController.dispose();
    ageController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: formKey,
      child: Padding(
        padding: const EdgeInsets.all(10.0),
        child: Column(
          children: [
            TextFormField(
              decoration: const InputDecoration(),
              controller: nameController,
            ),
            TextFormField(
              decoration: const InputDecoration(),
              controller: ageController,
            ),
            ElevatedButton(
              child: const Text('Send'),
              onPressed: () {
                context.read<UserProvider>().updateUserInfo(
                      name: nameController.text,
                      age: ageController.text,
                    );
              },
            )
          ],
        ),
      ),
    );
  }
}

个人资料页展示代码 #

Consumer<UserProvider>(builder: (context, user, _) {
  return Text('Name: ${user.data.name}, Age: ${user.data.age}');
})

用户类及状态管理代码 #

class UserProvider extends ChangeNotifier {
  final _user = User();

  User get data => _user;

  void updateUserInfo({String? name, String? age}) {
    _user
      ..name = name ?? ''
      ..age = age ?? '';

    notifyListeners();
  }
}

class User {
  String name = '';
  String age = '';
}

main.dart状态注册代码 #

@override
Widget build(BuildContext context) {
  return ChangeNotifierProvider(
    create: (context) => UserProvider(),

排查方向与解决思路 #

这类按钮无响应的问题，常见原因及排查点包括：

• 作用域问题：确保UserForm和展示用的Consumer都处于同一个ChangeNotifierProvider的作用域内。需要检查ChangeNotifierProvider是否完整包裹了MaterialApp，否则上下文无法正确获取到状态实例，示例正确写法：

@override
Widget build(BuildContext context) {
  return ChangeNotifierProvider(
    create: (context) => UserProvider(),
    child: const MaterialApp(
      home: YourRootPage(),
    ),
  );
}

• 热重载缓存异常：Flutter热重载有时会导致状态管理的上下文绑定出现异常，这种情况下冷启动项目或重建项目就能解决，这也是本次问题的核心解决途径。
• 表单验证缺失：代码中定义了formKey但未做验证逻辑，虽然这不会直接导致按钮无响应，但建议在按钮点击时添加验证：

onPressed: () {
  if(formKey.currentState?.validate() ?? false){
    context.read<UserProvider>().updateUserInfo(
          name: nameController.text,
          age: ageController.text,
        );
  }
},

最终解决结果 #

从零重新创建相同项目后问题自动解决，无需添加Navigator.push语句。

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