flutter_native_admob 预加载广告

Question

是否可以预加载原生 flutter admob 广告，例如在 initState 中？

我正在尝试使用ListView.builder()的广告，其中填充了与用户相关的内容以及介于两者之间的广告。 但是广告加载得太晚了，因此用户在滚动ListView可以看到屏幕上出现微调器。

示例代码（来自https://pub.dev/packages/flutter_native_admob ）：

@override
Widget build(BuildContext context) {
return MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: const Text('Plugin example app'),
    ),
    body: ListView(
      children: <Widget>[
        Container(
          margin: EdgeInsets.only(bottom: 20.0),
          height: 200.0,
          color: Colors.green,
        ),
        Container(
          margin: EdgeInsets.only(bottom: 20.0),
          height: 200.0,
          color: Colors.green,
        ),
        Container(
          margin: EdgeInsets.only(bottom: 20.0),
          height: 200.0,
          color: Colors.green,
        ),
        NativeAdmobBannerView(                // <---- preload this ad
          adUnitID: "<Your ad unit ID>",
          style: BannerStyle.dark, // enum dark or light
          showMedia: true, // whether to show media view or not
          contentPadding: EdgeInsets.all(10), // content padding
          onCreate: (controller) {
            controller.setStyle(BannerStyle.light); // Dynamic update style
          },
        ),
        Container(
          margin: EdgeInsets.only(bottom: 20.0),
          height: 200.0,
          color: Colors.green,
        ),
        Container(
          margin: EdgeInsets.only(bottom: 20.0),
          height: 200.0,
          color: Colors.green,
        ),
        Container(
          margin: EdgeInsets.only(bottom: 20.0),
          height: 200.0,
          color: Colors.green,
        ),
      ],
    ),
  ),
);
}

提前致谢。

Answer 1

flutter_native_admob 插件的创建者确实更新了插件。 您现在可以等待广告加载并在之后呈现它。 有关更多信息，请查看发布页面： https : //pub.dev/packages/flutter_native_admob

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_native_admob/flutter_native_admob.dart';
import 'package:flutter_native_admob/native_admob_controller.dart';

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  static const _adUnitID = "<Your ad unit ID>";

  final _nativeAdController = NativeAdmobController();
  double _height = 0;

  StreamSubscription _subscription;

  @override
  void initState() {
    _subscription = _nativeAdController.stateChanged.listen(_onStateChanged);
    super.initState();
  }

  @override
  void dispose() {
    _subscription.cancel();
    _nativeAdController.dispose();
    super.dispose();
  }

  void _onStateChanged(AdLoadState state) {
    switch (state) {
      case AdLoadState.loading:
        setState(() {
          _height = 0;
        });
        break;

      case AdLoadState.loadCompleted:
        setState(() {
          _height = 330;
        });
        break;

      default:
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: ListView(
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(bottom: 20.0),
              height: 200.0,
              color: Colors.green,
            ),
            Container(
              margin: EdgeInsets.only(bottom: 20.0),
              height: 200.0,
              color: Colors.green,
            ),
            Container(
              margin: EdgeInsets.only(bottom: 20.0),
              height: 200.0,
              color: Colors.green,
            ),
            Container(
              height: _height,
              padding: EdgeInsets.all(10),
              margin: EdgeInsets.only(bottom: 20.0),
              child: NativeAdmob(
                // Your ad unit id
                adUnitID: _adUnitID,
                controller: _nativeAdController,

                // Don't show loading widget when in loading state
                loading: Container(),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 20.0),
              height: 200.0,
              color: Colors.green,
            ),
            Container(
              margin: EdgeInsets.only(bottom: 20.0),
              height: 200.0,
              color: Colors.green,
            ),
            Container(
              margin: EdgeInsets.only(bottom: 20.0),
              height: 200.0,
              color: Colors.green,
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

我使用一些技巧解决了这个问题。 可能有更有效的方法，但我的解决方案适合我。 我所做的是：我创建了一个不透明度为0的NativeAdmob()小部件。 加载应用程序后，此小部件的行为类似于从不显示在屏幕上的preloaded widget 。

Opacity(opacity: 0, child: NativeAdmob(
                    // Your ad unit id
                    adUnitID: _adUnitID,
                    controller: _nativeAdController,
                    loading: Container(),
                  ),
                ),

然后，一旦您在同一页面中触发另一个NativeAdmob()小部件，则无需任何加载过程即可显示preloaded ads 。 展示第一个广告后，您可以随时使用以下代码行刷新它：

_nativeAdController.reloadAd(forceRefresh: true, numberAds: 1);