Flutter报Do not use BuildContexts across async gaps警告解决方法

Do not use BuildContexts across async gaps警告的触发逻辑非常直接：
在async标记的异步函数中，await会暂停当前函数执行，等待异步任务（比如网络检测、接口请求）返回结果，这段等待时间就是「异步间隙」。在这个间隙里，当前持有BuildContext的页面很可能已经被销毁（比如用户提前点返回、页面被系统回收），此时再拿着失效的context去弹提示、做路由跳转，不仅会触发警告，还可能导致内存泄漏、空指针报错。
你当前的代码有三个明显问题：

• 混用了async/await和.then()两种异步写法，嵌套回调里的context生命周期很难管控
• 所有输入校验的错误分支都没有加return，弹出错误提示后函数还会继续往下执行网络请求逻辑，属于隐藏bug
• 所有异步等待操作之后，都没有校验当前页面是否还存在，直接使用了context

1. 统一异步写法 #

全程用async/await代替.then()嵌套回调，代码逻辑更线性，方便做生命周期校验。

2. 异步间隙后强制校验挂载状态 #

每执行完一次await异步操作，在使用context之前，先判断当前页面是否还挂载在组件树上：

• Flutter 3.7及以上版本，直接判断if (!context.mounted) return;即可，StatelessWidget和StatefulWidget都支持
• 低于3.7版本的StatefulWidget，可以用State自带的if (!mounted) return;判断

3. 修正后的完整代码 #

修正后的注册函数 #

Future _registration() async {
    String name = _nameController.text.trim();
    String email = _emailController.text.trim();
    String password = _passwordController.text.trim();
    String phone = _phoneController.text.trim();

    // 输入校验，每个错误分支弹提示后直接return，终止后续逻辑
    if (name.isEmpty) {
      Utils.flushBarErrorMessage("Type your name", context);
      return;
    } 
    if (email.isEmpty) {
      Utils.flushBarErrorMessage("Type your email", context);
      return;
    } 
    if (!GetUtils.isEmail(email)) {
      Utils.flushBarErrorMessage("Type valid email address", context);
      return;
    } 
    if (password.isEmpty) {
      Utils.flushBarErrorMessage("Type your password", context);
      return;
    } 
    if (password.length < 6) {
      Utils.flushBarErrorMessage(
          "password can't be less than 6 characters", context);
      return;
    } 
    if (phone.isEmpty) {
      Utils.flushBarErrorMessage("Type your phone", context);
      return;
    }

    // 检测网络
    var connectivityResult = await Connectivity().checkConnectivity();
    // 异步间隙后校验挂载状态，页面已销毁就直接终止逻辑
    if (!context.mounted) return;

    if (connectivityResult != ConnectivityResult.mobile &&
        connectivityResult != ConnectivityResult.wifi) {
      Utils.flushBarErrorMessage("No Internet", context);
      return;
    }

    // 发起注册请求，用await代替原来的.then回调
    final value = await ApiCall.signUp(name, email, password, phone);
    // 网络请求等待时间更长，必须再次校验挂载状态
    if (!context.mounted) return;

    // 处理请求结果
    if (value.statusCode == 200) {
      final responseBody = json.decode(value.body);
      if (responseBody['success'] != null) {
        if (responseBody["success"]) {
          RegisterResponse.fromJson(responseBody);
          Navigator.pushNamed(context, VerifyUser.routeName);
          Utils.flushBarErrorMessage(
              'User Registered Successfully', context);
          if (kDebugMode) {
            print('User Registered Successfully');
          }
        } else {
          Utils.flushBarErrorMessage(
              responseBody["en_message"], context);
          if (kDebugMode) {
            print(responseBody.toString());
          }
        }
      }
    } else {
      Utils.flushBarErrorMessage('invalid data', context);
      if (kDebugMode) {
        print(json.decode(value.body).toString());
      }
    }
  }

按钮调用部分不需要修改，保持原有写法即可 #

ElevatedButton(
  onPressed: () {
    _registration();
  },
  child: const Text('SignUp')
)

工具方法不需要改动，只要保证传入的context是有效的就不会出问题 #

class Utils {
  static void flushBarErrorMessage(String message, BuildContext context) {
    showFlushbar(
        context: context,
        flushbar: Flushbar(
          forwardAnimationCurve: Curves.decelerate,
          margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
          padding: const EdgeInsets.all(15),
          titleColor: Colors.white,
          duration: const Duration(seconds: 3),
          borderRadius: BorderRadius.circular(10),
          reverseAnimationCurve: Curves.easeInOut,
          icon: const Icon(
            Icons.error,
            size: 28,
            color: Colors.white,
          ),
          flushbarPosition: FlushbarPosition.TOP,
          positionOffset: 20,
          message: message,
          backgroundColor: Colors.red,
        )..show(context));
  }
}

• 函数内部只要用到await关键字，就必须给函数加async标记，函数返回值为Future类型
• await只能等待Future类型的异步任务，同一段异步逻辑不要混用await和.then()，优先选await写法，代码可读性更高，逻辑不容易乱
• 所有await执行完成后，只要需要使用BuildContext，必须先做挂载状态校验，这是官方明确推荐的标准写法，可以100%解决跨异步间隙使用context的警告
• 输入校验这类同步逻辑，错误分支要及时return终止后续流程，避免无效的异步执行

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