Flutter PageView 中的全页广告，如短新闻 Way2news

Question

大家好，我想在滑动 5 页后在我的 flutter pageview 中显示 Admob 广告，在第 6 页上我想要一个全页横幅广告，如果我滑动这个，那么我可以进入新闻的第 7 页。

我已经实施了，但无法获得整页横幅广告，它仅显示 312x100 像素大小的广告。

这是我的完整代码。

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'Helper/ad_helper.dart';
import 'Models/news.dart';
import 'package:http/http.dart' as http;

class Tedd extends StatefulWidget {
  @override
  _TeddState createState() => _TeddState();
}

class _TeddState extends State<Tedd> {
  List<NewsModel> _newsList = [];
  bool isLoading = true;
  late BannerAd _bannerAd;
  bool _isBannerAdReady = false;
  int currentPage = 1;
  bool hasReachedEnd = false;
  PageController _pageController = PageController(initialPage: 0);

  _getAllNews(currentPage) async {
    var articles = await http.get(Uri.parse(
        "https://pkbhai.com/myprojects/kids-stories/api/all-stories?page=${currentPage}"));
    var result = json.decode(articles.body);
    var newDataLength = result['data'].length;
    if (newDataLength == 0) {
      setState(() {
        hasReachedEnd = true;
      });
    }
    result['data'].forEach((data) {
      var news = NewsModel();
      news.id = data["id"];
      news.articleTitle = data["name"];
      news.articleDetails = data["details"];
      if (mounted) {
        setState(() {
          _newsList.add(news);
        });
      }
    });

    setState(() {
      isLoading = true;
    });
  }

  void handleNext() {
    _pageController.addListener(() async {
      if (_pageController.page?.toInt() == _newsList.length - 1) {
        setState(() {
          currentPage += 1;
        });
        _getAllNews(currentPage);
      }
    });
  }

  @override
  void initState() {
    _bannerAd = BannerAd(
      adUnitId: AdHelper.bannerAdUnitId,
      request: 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();
    _getAllNews(currentPage);
    handleNext();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _newsList.length > 0
          ? PageView.builder(
              scrollDirection: Axis.vertical,
              controller: _pageController,
              itemCount: _newsList.length + (isLoading ? 1 : 0),
              itemBuilder: (context, index) {
                if (index == _newsList.length && hasReachedEnd) {
                  return Container(
                    color: Colors.red,
                  );
                }
                if (index == _newsList.length && !hasReachedEnd) {
                  return Center(
                    child: CircularProgressIndicator(),
                  );
                }
                if (index % 5 == 0 && index != 0) {
                  return Container(
                    child:
                        // if (_isBannerAdReady)
                        Align(
                      alignment: Alignment.topCenter,
                      child: Container(
                        width: _bannerAd.size.width.toDouble(),
                        height: _bannerAd.size.height.toDouble(),  // also tried 1000, but not worked
                        child: AdWidget(ad: _bannerAd),
                      ),
                    ),
                  );
                }
                return Container(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Container(
                      color: Colors.blue.shade400,
                      height: MediaQuery.of(context).size.height,
                      child: PageView(
                        reverse: true,
                        children: [
                          Text(
                            _newsList[index].articleDetails!,
                            maxLines: 4,
                          ),
                          Text(_newsList[index].articleTitle!),
                        ],
                      ),
                    ),
                  ),
                );
              },
            )
          : Center(child: CircularProgressIndicator()),
    );
  }
}

Answer 1

你用过

size: AdSize.banner,

这是尺寸参数，AdSize.banner 的尺寸为 312x100 您可以在 https://developers.google.com/admob/flutter/banner

上查看横幅的所有可用尺寸

我认为除了插页式广告之外没有整页广告，如果您想实现全页广告，那么您需要在 android 和 swift 中使用带有自定义 ui 的 Native Advance 广告。