flutter - 如何解决 Flutter/Admob 的问题 "Ad.load to be called before AdWidget is inserted into the tree"问题？

Question

我在 Flutter 上使用 google_mobile_ads: ^1.1.0 版本，并观看此处的视频:

https://www.youtube.com/watch?v=m0d_pbgeeG8

除了对视频的一些小更改(我想与最新的 API 更改相比，还没有完全更新)之外，我现在有以下代码:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final initFuture = MobileAds.instance.initialize();
  final adState = AdState(initFuture);
  await SystemChrome.setPreferredOrientations(<DeviceOrientation>[
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown
  ]).then((_) => runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => Something()),
        ...some other ChangeNotifierProvider...,
        Provider<AdState>(create: (_) =>  adState)
      ],
      child: const MyApp()
    ),
  ));
}

与AdState:

import 'dart:io';

import 'package:google_mobile_ads/google_mobile_ads.dart';

class AdState {
  Future<InitializationStatus> initialisation;

  AdState(this.initialisation);

  String get bannerAdUnitId => Platform.isAndroid
      ? 'ca-app-pub-3940256099942544/6300978111'
      : 'ca-app-pub-3940256099942544/2934735716'; // ios

  BannerAdListener get adListener => _adListener;

  final BannerAdListener _adListener = BannerAdListener(

    // Called when an ad is successfully received.
    onAdLoaded: (Ad ad) => print('Ad loaded: ${ad.adUnitId}.'),

    onAdClosed: (Ad ad) {
      ad.dispose();
      print('Ad closed: ${ad.adUnitId}.');
    },

    // Called when an ad request failed.
    onAdFailedToLoad: (Ad ad, LoadAdError error) {
      ad.dispose();
      print('Ad failed to load: : ${ad.adUnitId}, $error');
    },

    // Called when an ad opens an overlay that covers the screen.
    onAdOpened: (Ad ad) => print('Ad opened: ${ad.adUnitId}.'),

    // Called when an impression occurs on the ad.
    onAdImpression: (Ad ad) => print('Ad impression: ${ad.adUnitId}.'),
  );
}

然后在主页小部件状态类中:

BannerAd? banner;

@override
  void didChangeDependencies() {
    super.didChangeDependencies();
    final adState = Provider.of<AdState>(context);
    adState.initialisation.then((status) {
      setState(() {
        banner = BannerAd(
            adUnitId: adState.bannerAdUnitId,
            size: AdSize.banner,
            request: const AdRequest(),
            listener: adState.adListener
        )..load();
      });
    });
  }

@override
Widget build(BuildContext context) {
...somewhere in the middle...
if (banner == null)
  const SizedBox(height: 50)
else
  SizedBox (height:50, child: AdWidget(ad: banner!)),
....
}

我收到的错误是:

AdWidget requires Ad.load to be called before AdWidget is insertedinto the tree

load() 方法在上面的 didChangeDependency() 方法中被调用，但它当然返回一个 Future 所以我认为它仍然可能当 build() 运行时不在那里。我该如何解决这个问题？

Answer 1

只有在 BannerAd 加载后(而非 BannerAd 不为空)之后，您才能使用 AdWidget。

因此，尝试使用 flag 来表示加载状态，如以下代码片段所示:

BannerAd? banner;
bool _bannerIsLoaded = false;

@override
  void didChangeDependencies() {
    super.didChangeDependencies();
    final adState = Provider.of<AdState>(context);
    adState.initialisation.then((status) {
      setState(() {
        banner = BannerAd(
            adUnitId: adState.bannerAdUnitId,
            size: AdSize.banner,
            request: const AdRequest(),
            listener: adState.adListener
        )..load();
       
        _bannerIsLoaded = true;
      });
    });
  }

@override
Widget build(BuildContext context) {
...somewhere in the middle...
if (banner != null && _bannerIsLoaded)
  SizedBox (height:50, child: AdWidget(ad: banner!)),
else
  const SizedBox(height: 50)
  
....
}