使用google_mobile_ads导航到屏幕时出现严重故障

Question

在包含广告的应用程序中的屏幕之间导航时，升级到Flutter 2.8.1会导致闪烁。特别是，当从另一个有横幅广告的屏幕导航到新屏幕时，会发生闪烁。当注释掉横幅时，闪烁会消失。

使用Flutter 2.5.3无法解决此问题。

这个问题最初是在谷歌广告移动flutter中提出的，但经过进一步调查，现在认为是flutter SDK的问题。

要产生问题，请使用google_mobile_ads: 1.0.1和Flutter 2.8.0运行所附的应用程序代码。

@maheshmnj 制作的视频样本、代码样本和颤振医生-v输出

代码示例：

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(home: HomeScreen());
}
}

class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Expanded(child: ListView.builder(itemBuilder: (context, index) {
return ListTile(
title: Text('Item $index'),
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) {
return const ProducDetailPage();
}));
},
);
})),
const CustomBannerAd()
],
),
);
}
}
class ProducDetailPage extends StatelessWidget {
const ProducDetailPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Produc Detail'),
),
body: Column(children: const [
SizedBox(
height: 150,
child: Placeholder(
color: Colors.red,
),
),
SizedBox(
height: 150,
child: Placeholder(
color: Colors.green,
),
),
CustomBannerAd()
]));
}
}
class CustomBannerAd extends StatefulWidget {
const CustomBannerAd({Key? key}) : super(key: key);
@override
_CustomBannerAdState createState() => _CustomBannerAdState();
}
class _CustomBannerAdState extends State<CustomBannerAd> {
BannerAd? _anchoredAdaptiveAd;
var _isLoaded = false;
late Orientation _currentOrientation;
@override
void didChangeDependencies() {
super.didChangeDependencies();
_currentOrientation = MediaQuery.of(context).orientation;
_loadAd();
}
@override
void dispose() {
super.dispose();
_anchoredAdaptiveAd?.dispose();
}
Future<void> _loadAd() async {
await _anchoredAdaptiveAd?.dispose();
if (mounted) {
setState(() {
_anchoredAdaptiveAd = null;
_isLoaded = false;
});
}
final AnchoredAdaptiveBannerAdSize? size =
await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
MediaQuery.of(context).size.width.truncate());
if (size == null) {
debugPrint('Unable to get height of anchored banner.');
return;
}
_anchoredAdaptiveAd = BannerAd(
adUnitId: Platform.isAndroid
? 'ca-app-pub-3940256099942544/6300978111'
: 'ca-app-pub-3940256099942544/2934735716',
size: size,
request: const AdRequest(
nonPersonalizedAds: false,
),
listener: BannerAdListener(
onAdLoaded: (Ad ad) {
debugPrint("Ad loaded");
if (mounted) {
setState(() {
_anchoredAdaptiveAd = ad as BannerAd;
_isLoaded = true;
});
}
},
onAdFailedToLoad: (Ad ad, LoadAdError error) {
debugPrint('$BannerAd failedToLoad: $error');
ad.dispose();
},
onAdOpened: (Ad ad) => debugPrint('$BannerAd onAdOpened.'),
onAdClosed: (Ad ad) => debugPrint('$BannerAd onAdClosed.'),
),
);
return _anchoredAdaptiveAd?.load();
}
@override
Widget build(BuildContext context) {
return OrientationBuilder(builder: (context, orientation) {
if (_currentOrientation == orientation &&
_anchoredAdaptiveAd != null &&
_isLoaded) {
return Container(
color: Colors.transparent,
width: _anchoredAdaptiveAd!.size.width.toDouble(),
height: _anchoredAdaptiveAd?.size.height.toDouble(),
child: AdWidget(ad: _anchoredAdaptiveAd!),
);
}
// Reload the ad if the orientation changes.
if (_currentOrientation != orientation) {
_currentOrientation = orientation;
_loadAd();
}
return const SizedBox.shrink();
});
}
}

有什么解决方案吗？

屏幕截图和视频

Answer 1

使用以下内容更改google_mobile_ads插件：

google_mobile_ads:
git:
url: https://github.com/SuaMusica/googleads-mobile-flutter.git
path: packages/google_mobile_ads
ref: feature/suamusica

如果git文本中有黄色下划线，只需在pubspec.yaml 中添加以下代码

publish_to: 'none'

Answer 2

我也面临同样的问题。这只是当你使用长笛sdk 2.8到2.10时。它也是在flutter github回购上筹集的。(https://github.com/flutter/flutter/issues/95343)。

解决方案是将flutter sdk升级到3.0.2，并更新google_mobile_ads 1.3.0。