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

Question

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

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

该问题最初是在 googleads-mobile-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();
    });
  }
}

有什么办法吗？

Screenshots and videos

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

我也遇到了同样的问题。并且只有当你使用 fluter sdk 2.8 到 2.10 时。它也在flutter github repo上提出。 (https://github.com/flutter/flutter/issues/95343)。

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