Flutter Provider报Undefined name 'context'错误的原因与修复方法

你在StatelessWidget的类成员属性定义位置调用context.read<LoginSignupData>()时，代码执行处于类实例初始化阶段，这个时机早于build方法执行，Widget还未完成挂载，不存在可用的BuildContext实例，因此会抛出Undefined name 'context'错误。
StatelessWidget中合法的context来源只有build方法传入的上下文参数、以及Builder等组件主动提供的上下文，类成员初始化阶段没有访问context的权限。

把需要提取的Provider实例、状态变量统一挪到build方法的开头位置定义，同时根据使用场景选择watch或read：

• 需要跟随状态变化自动触发UI重建的变量，用context.watch获取
• 仅在点击回调等事件中使用、不需要驱动UI刷新的逻辑，用context.read获取
• 可以直接把整个Provider实例存为局部变量，后续所有调用都直接用这个局部变量，完全避免重复写context.read<>/context.watch<>的冗长代码。

修复后的核心代码示例：

class LoginSignupSendingButton extends StatelessWidget {
  LoginSignupSendingButton({Key? key}) : super(key: key);

  // 删掉类成员位置错误的isSignup定义
  @override
  Widget build(BuildContext context) {
    // 在build开头统一获取Provider实例，需要响应UI刷新用watch
    final loginSignupData = context.watch<LoginSignupData>();
    final isSignup = loginSignupData.isSignup;

    return AnimatedPositioned(
      duration: const Duration(milliseconds: 500),
      curve: Curves.easeIn,
      top: isSignup ? 520 : 470,
      right: 0,
      left: 0,
      child: Center(
        child: Container(
          padding: const EdgeInsets.all(15),
          height: 90,
          width: 90,
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(50)),
          child: GestureDetector(
            onTap: () {
              // 事件回调里直接用提前定义的loginSignupData变量即可，不用再反复写context.read
              print('isSignup : ${loginSignupData.isSignup}');
              loginSignupData.isSignup ?
                loginSignupData.signUp(context) : loginSignupData.signIn(context);
              final isValid = loginSignupData.formKey.currentState!.validate();
              if (loginSignupData.isSignupValid && isValid) {
                loginSignupData.formKey.currentState!.save();
                Navigator.push(context, MaterialPageRoute(builder: (context) => const MyApp()));
              }
            },
            child: Container(
              decoration: BoxDecoration(
                gradient: const LinearGradient(
                    colors: [Colors.orange, Colors.red],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight),
                borderRadius: BorderRadius.circular(30),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.3),
                    spreadRadius: 1,
                    blurRadius: 1,
                    offset: const Offset(0, 1),
                  ),
                ],
              ),
              child: const Icon(
                Icons.arrow_forward,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

注意事项 #

• 不要用late修饰符强行在类成员位置定义context相关的变量，StatelessWidget在状态变化时会整体重建，成员位置存储的变量不会自动同步最新状态，会出现UI和数据不一致的bug。
• 如果使用StatefulWidget，也不要在initState生命周期中直接调用context.read/context.watch，这个生命周期阶段上下文同样未完成挂载，需要获取的话要么放在build方法中，要么放在WidgetsBinding.instance.addPostFrameCallback的回调里执行。

内容的提问来源于stack exchange，提问作者황희윤