Flutter中AlertDialog使用遇context未定义错误，求解决方案及触发方法

错误原因 #

你遇到的Undefined name 'context'错误，是因为_showAlertDialog方法中使用的context未被正确定义或传入。如果这个方法不在包含context的State类中，或者没有将context作为参数传递进来，就会触发该错误。

修复后的完整代码 #

以下是修复错误并实现点击ElevatedButton弹出弹窗的完整示例：

import 'package:flutter/material.dart';

class BookingPage extends StatefulWidget {
  const BookingPage({super.key});

  @override
  State<BookingPage> createState() => _BookingPageState();
}

class _BookingPageState extends State<BookingPage> {
  // 修复后的弹窗方法，直接使用State类的context
  Future<void> _showAlertDialog() async {
    return showDialog<void>(
      context: context, // 此处context来自State类的成员变量
      barrierDismissible: false, // 用户必须点击按钮才能关闭弹窗
      builder: (BuildContext dialogContext) { // 重命名参数避免命名混淆
        return AlertDialog(
          title: const Text('Cancel booking'),
          content: SingleChildScrollView(
            child: ListBody(
              children: const <Widget>[
                Text('Are you sure you want to cancel booking?'),
              ],
            ),
          ),
          actions: <Widget>[
            TextButton(
              child: const Text('No'),
              onPressed: () {
                Navigator.of(dialogContext).pop(); // 使用dialogContext关闭弹窗
              },
            ),
            TextButton(
              child: const Text('Yes'),
              onPressed: () {
                Navigator.of(dialogContext).pop();
                // 可在此添加取消预订的业务逻辑
              },
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Booking')),
      body: Center(
        // 点击按钮触发弹窗
        child: ElevatedButton(
          onPressed: _showAlertDialog,
          child: const Text('Cancel Booking'),
        ),
      ),
    );
  }
}

关键修复点 #

• 将方法放在State类中：把_showAlertDialog放在State子类里，直接使用State类自带的context成员变量。
• 避免context命名冲突：将builder的参数重命名为dialogContext，避免和外部context混淆，代码逻辑更清晰。
• 绑定按钮点击事件：在ElevatedButton的onPressed中直接传入_showAlertDialog方法，实现点击触发弹窗。

备选方案：方法不在State类中的情况 #

如果_showAlertDialog需要放在工具类等外部位置，可以通过传入context参数解决：

Future<void> _showAlertDialog(BuildContext context) async {
  return showDialog<void>(
    context: context,
    barrierDismissible: false,
    builder: (BuildContext dialogContext) {
      // 弹窗内容和上述示例一致
    },
  );
}

// 按钮调用方式：
ElevatedButton(
  onPressed: () => _showAlertDialog(context),
  child: const Text('Cancel Booking'),
)

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