Flutter中实现onTap触发插屏广告前显示圆形进度指示器的方案问询

修改思路 #

• 新增进度对话框展示逻辑，提示用户广告即将加载
• 调整点击事件流程：显示进度提示（持续2秒）→ 加载插屏广告 → 广告展示并监听关闭 → 广告关闭后跳转页面
• 给插屏广告添加FullScreenContentCallback，确保广告关闭/展示失败时都能正常跳转
• 保留原有的点击计数逻辑，仅偶数次点击触发广告流程，奇数次直接跳转

完整代码实现 #

1. 状态变量更新

在你的State类中补充状态变量：

int clickCount = 0;
bool _isLoadingAd = false;
InterstitialAd? _interstitialAd;

2. 核心方法实现

替换原有的_handleButtonClick和_loadInterstitialAd，新增流程控制和跳转方法：

void _handleButtonClick() async {
  clickCount++;
  if (clickCount % 2 == 0) {
    // 偶数次点击：执行进度提示+广告+跳转流程
    await _showProgressThenAdAndNavigate();
  } else {
    // 奇数次点击：直接跳转
    print('Button clicked: $clickCount times');
    _navigateToTwitterPage();
  }
}

/// 显示进度提示、加载广告、完成后跳转的统一流程
Future<void> _showProgressThenAdAndNavigate() async {
  // 弹出进度对话框，禁止外部关闭
  final progressDialog = showDialog(
    context: context,
    barrierDismissible: false,
    builder: (context) => const AlertDialog(
      content: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          CircularProgressIndicator(),
          SizedBox(height: 16),
          Text('广告即将展示，请稍候...'),
        ],
      ),
    ),
  );

  // 持续显示进度2秒
  await Future.delayed(const Duration(seconds: 2));

  setState(() {
    _isLoadingAd = true;
  });

  InterstitialAd.load(
    adUnitId: 'ca-app-pub-3940256099942544/1033173712', // 替换为你的实际广告单元ID
    request: const AdRequest(),
    adLoadCallback: InterstitialAdLoadCallback(
      onAdLoaded: (ad) {
        // 关闭进度对话框
        Navigator.of(context).pop();
        setState(() {
          _isLoadingAd = false;
        });
        _interstitialAd = ad;
        // 设置广告回调，监听关闭/展示失败事件
        _interstitialAd!.fullScreenContentCallback = FullScreenContentCallback(
          onAdDismissedFullScreenContent: (ad) {
            ad.dispose();
            _navigateToTwitterPage(); // 广告关闭后跳转
          },
          onAdFailedToShowFullScreenContent: (ad, error) {
            ad.dispose();
            print('广告展示失败: $error');
            _navigateToTwitterPage(); // 展示失败直接跳转
          },
        );
        _interstitialAd!.show();
      },
      onAdFailedToLoad: (error) {
        // 关闭进度对话框
        Navigator.of(context).pop();
        setState(() {
          _isLoadingAd = false;
        });
        print('插屏广告加载失败: $error');
        _navigateToTwitterPage(); // 加载失败直接跳转
      },
    ),
  );

  await progressDialog;
}

/// 统一跳转至Twitter二维码生成页
void _navigateToTwitterPage() {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => const TwitterQRCodeGeneratorPage(),
    ),
  );
}

3. 更新按钮点击事件

简化GestureDetector的onTap逻辑，移除原有的直接跳转：

GestureDetector(
  onTap: _handleButtonClick,
  child: Image.asset(
    'asset/Twitter.png',
    width: 110,
    height: 110,
  ),
),

关键说明 #

• 进度对话框仅在广告加载前显示，广告开始加载后自动关闭
• 广告加载/展示失败时，会自动关闭进度对话框并跳转页面，避免用户卡住
• 保留了原代码的点击计数逻辑，仅偶数次点击触发广告流程，符合原有业务逻辑

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