Admob 横幅不会显示，除非我在 initState() 函数中放置断点

Question

我尝试按照 AdMob 教程进行操作

https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter#6

但我似乎无法让广告横幅正常工作。

使用当前设置的代码方式，横幅根本不显示。 但是，如果我在"_bannerAd.load();"，则广告加载并显示横幅。

我不知道为什么，所以任何帮助将不胜感激。

谢谢。

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:myapp/ad_helper_test.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'MyApp',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyAppHomePage(title: 'MyApp'),
);
}
}
class MyAppHomePage extends StatefulWidget {
const MyAppHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyAppHomePage> createState() => _MyAppHomePageState();
}
class _MyAppHomePageState extends State<MyAppHomePage> {
late BannerAd _bannerAd;
bool _isBannerAdReady = false;
@override
void initState() {
super.initState();
_bannerAd = BannerAd(
adUnitId: AdHelper.bannerAdUnitId,
request: const AdRequest(),
size: AdSize.banner,
listener: BannerAdListener(
onAdLoaded: (_) {
setState(() {
_isBannerAdReady = true;
});
},
onAdFailedToLoad: (ad, err) {
print('Failed to load a banner ad: ${err.message}');
_isBannerAdReady = false;
ad.dispose();
},
),
);
_bannerAd.load();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
buildAdWidget()
],
),
),
);
}
FutureBuilder<void> buildAdWidget() {
return FutureBuilder<void>(
future: _initGoogleMobileAds(),
builder: (BuildContext context, AsyncSnapshot<void> snapshot) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (_isBannerAdReady)
Align(
alignment: Alignment.topCenter,
child: SizedBox(
width: _bannerAd.size.width.toDouble(),
height: _bannerAd.size.height.toDouble(),
child: AdWidget(ad: _bannerAd),
),
),

const Text("Here goes the rest of the app"),
],
),
);
},
);
}

Future<InitializationStatus> _initGoogleMobileAds() {
return MobileAds.instance.initialize();
}
@override
void dispose() {
super.dispose();
_bannerAd.dispose();
}
}

Answer 1

根据文档，您需要在加载横幅之前初始化框架MobileAds.instance.initialize();。你正在做相反的事情。考虑使用初始化框架并在初始化时呈现主页的FutureBuilder包装主页，否则返回一些加载页面。

在教程中，他们使用路由处理此问题。这可能是一个公平的方式。

编辑

这未经测试，但它应该看起来像这样：

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:myapp/ad_helper_test.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'MyApp',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const DependencyLoader(),
);
}
}
class DependencyLoader extends StatelessWidget {
const DependencyLoader({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return FutureBuilder(
future: MobileAds.instance.initialize(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
MyAppHomePage(
title: 'MyApp',
);
} else {
/// Create a loading page of some sort
}
},
);
}
}
class MyAppHomePage extends StatefulWidget {
const MyAppHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyAppHomePage> createState() => _MyAppHomePageState();
}
class _MyAppHomePageState extends State<MyAppHomePage> {
late BannerAd _bannerAd;
bool _isBannerAdReady = false;
@override
void initState() {
super.initState();
_bannerAd = BannerAd(
adUnitId: AdHelper.bannerAdUnitId,
request: const AdRequest(),
size: AdSize.banner,
listener: BannerAdListener(
onAdLoaded: (_) {
setState(() {
_isBannerAdReady = true;
});
},
onAdFailedToLoad: (ad, err) {
print('Failed to load a banner ad: ${err.message}');
_isBannerAdReady = false;
ad.dispose();
},
),
);
_bannerAd.load();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[buildAdWidget()],
),
),
);
}
Widget buildAdWidget() {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (_isBannerAdReady)
Align(
alignment: Alignment.topCenter,
child: SizedBox(
width: _bannerAd.size.width.toDouble(),
height: _bannerAd.size.height.toDouble(),
child: AdWidget(ad: _bannerAd),
),
),
const Text("Here goes the rest of the app"),
],
),
);
}
@override
void dispose() {
super.dispose();
_bannerAd.dispose();
}
}