Flutter实现跳转外部链接前展示插屏广告的方法

现有代码的核心问题 #

• 直接调用await StartApp.showInterstitialAd()无法真正等待广告全流程完成：该方法仅触发广告展示动作，本身不是绑定广告加载、展示、关闭全生命周期的可等待Future，方法执行后会立刻返回，不等广告走完就会执行后续的链接跳转逻辑
• 缺少广告加载兜底逻辑：用户点击按钮时如果广告还未加载完成，硬触发展示会导致广告无法正常弹出，出现跳转已经完成、广告才延迟弹出的错位问题

正确实现步骤 #

1. 封装可等待的广告流程 #

因为StartApp插屏广告的状态是靠回调触发的，需要借助Completer把异步回调转成可等待的Future，才能实现“广告流程完全结束后再执行跳转”的时序控制。
首先引入对应的依赖：

import 'dart:async';
// 定义全局变量承接插屏广告的完成状态
Completer? _interstitialAdCompleter;

2. 绑定插屏广告全生命周期回调 #

在应用初始化阶段，给StartApp的插屏广告设置所有状态分支的监听，确保不管广告走哪个流程，都能通知到等待中的逻辑：

StartApp.setInterstitialCallbacks(
  // 广告加载成功后自动展示
  onInterstitialDidLoad: () {
    StartApp.showInterstitialAd();
  },
  // 广告被关闭/用户看完后触发流程完成
  onInterstitialDidClose: () {
    if (_interstitialAdCompleter != null && !_interstitialAdCompleter!.isCompleted) {
      _interstitialAdCompleter!.complete();
    }
    // 提前预加载下一次的广告，减少后续点击的等待时间
    StartApp.loadInterstitial();
  },
  // 广告加载失败时直接放行跳转逻辑，避免卡住交互
  onInterstitialFailedLoad: () {
    if (_interstitialAdCompleter != null && !_interstitialAdCompleter!.isCompleted) {
      _interstitialAdCompleter!.complete();
    }
  },
);

3. 改造按钮点击逻辑 #

调整点击事件的时序，真正等待广告全流程结束后再执行链接跳转：

buttonactionL: () async {
  // 每次点击新建一个Completer实例承接本次的广告流程
  _interstitialAdCompleter = Completer();
  // 触发广告加载（如果之前已经预加载完成，会直接走展示流程）
  StartApp.loadInterstitial();
  // 真正阻塞等待广告全流程完成，直到收到关闭/加载失败的回调
  await _interstitialAdCompleter!.future;

  // 广告流程完全结束后再执行跳转
  String url = "https://google.com";
  await _launchURL(url);
}

关键注意点 #

• 所有广告分支都要覆盖完成状态：不能只在广告展示成功、用户关闭的分支触发Completer完成，加载失败、广告弹出异常的分支也要手动完成回调，不然会出现按钮点击后跳转逻辑永久卡住、无响应的问题
• 提前预加载广告：不要等用户点击按钮的瞬间才开始加载广告，建议在页面初始化、应用启动阶段就提前加载好插屏广告，用户点击时可以直接展示，减少交互等待感
• 做好状态判空：每次触发Completer完成前，要判断实例是否为空、是否已经被完成，避免回调重复触发抛出异常

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