Flutter警告：Do not use BuildContexts across async gaps解析与解决

一、警告含义 #

这个警告是Flutter的安全提示：不要在异步操作完成后使用之前保存的BuildContext。因为异步操作（比如网络请求、系统状态检查）执行期间，对应的Widget可能已经被销毁（比如用户返回上一页、页面跳转），此时使用旧的Context会导致内存泄漏、UI崩溃或不可预期的行为。

二、触发原因 #

你的代码里showCategory方法存在多处风险点：

1. 将BuildContext传入Service层，在await Connectivity().checkConnectivity()异步操作完成后，直接用这个Context调用UI方法；
2. ApiCall.getCategory().then(...)的异步回调中，依然使用之前的Context操作加载框、错误提示；
3. 无网络分支里的UI操作同样在异步检查后执行，都存在Context已失效的可能。

三、解决方案 #

核心思路：业务逻辑与UI操作分离，Service层只处理数据和状态管理，UI层根据Service的状态变化执行UI操作，彻底避免在异步流程中传递和使用Context。

步骤1：改造CategoryService，移除Context依赖 #

在Service中添加状态变量（加载状态、错误信息），专注处理数据请求逻辑，不直接操作UI：

class CategoryService extends ChangeNotifier {
  List<Data> list = [];
  bool isLoading = false;
  String? errorMessage;

  showCategory() async {
    // 触发加载状态，通知UI更新
    isLoading = true;
    errorMessage = null;
    notifyListeners();
    
    var connectivityResult = await (Connectivity().checkConnectivity());
    if (connectivityResult == ConnectivityResult.mobile ||
        connectivityResult == ConnectivityResult.wifi) {
      try {
        final value = await ApiCall.getCategory();
        if (value.statusCode == 200) {
          final responseBody = json.decode(value.body);
          if (responseBody["success"] != null) {
            if (responseBody["success"]) {
              CategoryModel categoryModel = CategoryModel.fromJson(responseBody);
              list.clear();
              list.addAll(categoryModel.data ?? []);
            } else {
              errorMessage = responseBody["en_message"];
            }
          } else {
            errorMessage = responseBody["error"];
          }
        } else {
          errorMessage = 'Invalid Data';
        }
      } catch (onError) {
        log("my Error");
        debugPrint(onError.toString());
        errorMessage = '请求失败，请重试';
      }
    } else {
      errorMessage = 'No Internet';
    }
    
    // 结束加载，通知UI更新
    isLoading = false;
    notifyListeners();
  }
}

步骤2：改造HomeScreen，监听状态处理UI #

在UI层监听Service的isLoading和errorMessage状态，使用当前有效的Context执行UI操作：

class _HomeScreenState extends State<HomeScreen> {
  late CategoryService categoryService;
  bool isCalled = false;

  @override
  void initState() {
    super.initState();
    // 在帧回调中执行异步请求，避免build方法重复触发
    WidgetsBinding.instance.addPostFrameCallback((_) {
      categoryService = Provider.of<CategoryService>(context, listen: false);
      if (!isCalled) {
        isCalled = true;
        categoryService.showCategory();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    categoryService = Provider.of<CategoryService>(context);
    
    // 处理加载状态
    if (categoryService.isLoading) {
      Utils.showLoader(context);
    } else {
      Utils.hideLoader(context);
    }
    
    // 处理错误提示，用帧回调避免build中直接修改UI
    if (categoryService.errorMessage != null) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        Utils.flushBarErrorMessage(categoryService.errorMessage!, context);
        // 清空错误信息，防止重复显示
        categoryService.errorMessage = null;
        categoryService.notifyListeners();
      });
    }

    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
        centerTitle: true,
      ),
      body: Column(
        children: [
          const Align(
            alignment: Alignment.centerLeft,
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 15),
              child: Text('Category'),
            ),
          ),
          const SizedBox(height: 10),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 15),
            child: GridView.builder(
              itemCount: categoryService.list.length,
              shrinkWrap: true,
              primary: false,
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                crossAxisSpacing: 8,
                mainAxisSpacing: 10,
              ),
              itemBuilder: (context, index) => Center(
                child: GridCategory(
                  category: categoryService.list[index],
                ),
              ),
            ),
          ),
          const SizedBox(height: 20),
        ],
      ),
    );
  }
}

额外注意点 #

1. 不要在build方法中直接调用异步方法：原代码在build里触发请求，会导致每次build都可能重复执行，改用initState+帧回调更安全；
2. 统一使用await替代then：原代码混用两种异步写法，改成全await结构更清晰易维护；
3. 临时规避方案（仅限State类中）：如果必须在异步后用Context，先检查mounted属性：

   if (mounted) {
     Utils.showLoader(context);
   }
   

   但这只是临时方案，状态分离的写法才是长期可靠的解决方式。

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