Flutter 中带有 ListView 的 FAN 横幅

Posted 2023-02-23

【中文标题】Flutter 中带有 ListView 的 FAN 横幅

【英文标题】：FAN Banner with ListView in Flutter

【发布时间】：2021-03-17 07:12:49

【问题描述】：

我正在创建一个使用 Flutter 的应用程序。布局包括一个带有许多按钮的大 ListView 和一个 Facebook Audience Network (FAN) 横幅。我尝试了许多组合以使横幅保持固定在屏幕底部。我还使用了 Scaffold 下的一个 bottomNavigationBar 的方法，如下所述：[https://***.com/questions/48934439/flutter-banner-ad-overlapping-the-main-screen][1]

问题是我得到的是作为 ListView 中最后一项的横幅，除非用户向下滚动到 ListView 的最底部，否则它是不可见的（这不太可能发生）

对于bottomNavigationBar，我看不到将FAN 横幅放入其中的方法。不知道有没有可能。

我当前的布局目前是这样定义的：

class HomePage extends StatefulWidget 
  @override
  _HomePageState createState() => _HomePageState();


class _HomePageState extends State<HomePage> 
  String FB_INTERSTITIAL_AD_ID =
      "IMG_16_9_APP_INSTALL#2312433698835503_2650502525028617";
  bool isInterstitialAdLoaded = false;

  @override
  void initState() 
    FacebookAudienceNetwork.init(
      testingId: "37b1da9d-b48c-4103-a393-2e095e734bd6", //optional
    );

    _loadInterstitialAd();
    loadBannerAd();
    _showInterstitialAd();

    super.initState();
  

  void _loadInterstitialAd() 
    FacebookInterstitialAd.loadInterstitialAd(
      placementId: FB_INTERSTITIAL_AD_ID,
      listener: (result, value) 
        if (result == InterstitialAdResult.LOADED) 
          isInterstitialAdLoaded = true;
        
        if (result == InterstitialAdResult.DISMISSED &&
            value["invalidated"] == true) 
          isInterstitialAdLoaded = false;
          _loadInterstitialAd();
        
      ,
    );
  

  _showInterstitialAd() 
    if (isInterstitialAdLoaded == true) 
      FacebookInterstitialAd.showInterstitialAd();
     else 
      print("Ad not loaded yet");
    
  

  Widget _bannerAd = SizedBox(width: 0, height: 0);

  void loadBannerAd() 
    setState(() 
      _bannerAd = FacebookBannerAd(
        placementId: Platform.isandroid
            ? "IMG_16_9_APP_INSTALL#2312433698835503_2964944860251047"
            : "1330190004069862_13302241873XXXXX",
        //placementId: "IMG_16_9_APP_INSTALL#2312433698835503_2964944860251047",
        bannerSize: BannerSize.STANDARD,
        listener: (result, value) 
          print("$result == $value");
        ,
      );
    );
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text("Dictionary of Insurance"),
      ),
      body: Center(
        child: ListView(
          children: <Widget>[
            const SizedBox(height: 5),
            Container(
              color: Colors.transparent,
              width: MediaQuery.of(context).size.width,
              height: 60,
              child: RaisedButton(
                shape: new RoundedRectangleBorder(
                  borderRadius: new BorderRadius.circular(30.0),
                ),
                onPressed: () 
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => SecondRoute()),
                  );
                ,
                color: Colors.blue[300],
                child: Text(
                  "Accident",
                  style: TextStyle(
                    color: Colors.white,
                    fontFamily: 'Raleway',
                    fontSize: 22.0,
                  ),
                ),
              ),
            ),

            //////////////
            // Lots of many other buttons similar to this one above
            //////////////

            FlatButton(
              child: Text("Load Banner Ad"),
              onPressed: () => loadBannerAd(),
            ),
            FlatButton(
                child: Text("Load Interstitial Ad"),
                onPressed: () => _showInterstitialAd()),
            Flexible(
              child: Container(),
              flex: 1,
              fit: FlexFit.loose,
            ),
            _bannerAd
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
        ],
      ),
    );
  

最后两个按钮取自有关如何将 FAN 与 Flutter 一起使用的示例，它们按预期工作。使用这种布局，横幅最初是不可见的，因为它是在 ListView 中的所有按钮之后绘制的。

你能帮帮忙吗？

【参考方案1】：

我终于成功了。

简单地说，我在底部导航栏中调用了_bannerAd，就是这样！

import 'package:facebook_audience_network/facebook_audience_network.dart';
import 'package:flutter/material.dart';
import 'dart:io' show Platform;
import 'destination.dart';

void main() 
  runApp(MyApp());


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: HomePage(),
    );
  


class HomePage extends StatefulWidget 
  @override
  _HomePageState createState() => _HomePageState();


class _HomePageState extends State<HomePage> 
  String FB_INTERSTITIAL_AD_ID =
      "IMG_16_9_APP_INSTALL#2312433698835503_2650502525028617";
  bool isInterstitialAdLoaded = false;

  @override
  void initState() 
    FacebookAudienceNetwork.init(
      testingId: "37b1da9d-b48c-4103-a393-2e095e734bd6", //optional
    );

    _loadInterstitialAd();
    loadBannerAd();
    _showInterstitialAd();

    super.initState();
  

  void _loadInterstitialAd() 
    FacebookInterstitialAd.loadInterstitialAd(
      placementId: FB_INTERSTITIAL_AD_ID,
      listener: (result, value) 
        if (result == InterstitialAdResult.LOADED) 
          isInterstitialAdLoaded = true;
        
        if (result == InterstitialAdResult.DISMISSED &&
            value["invalidated"] == true) 
          isInterstitialAdLoaded = false;
          _loadInterstitialAd();
        
      ,
    );
  

  _showInterstitialAd() 
    if (isInterstitialAdLoaded == true) 
      FacebookInterstitialAd.showInterstitialAd();
     else 
      print("Ad not loaded yet");
    
  

  Widget _bannerAd = SizedBox(width: 0, height: 0);

  void loadBannerAd() 
    setState(() 
      _bannerAd = FacebookBannerAd(
        placementId: Platform.isAndroid
            ? "IMG_16_9_APP_INSTALL#2312433698835503_2964944860251047"
            : "1330190004069862_133022418739XXXX",
        //placementId: "IMG_16_9_APP_INSTALL#2312433698835503_2964944860251047",
        bannerSize: BannerSize.STANDARD,
        listener: (result, value) 
          print("$result == $value");
        ,
      );
    );
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text("Dictionary of Insurance"),
      ),
      body: Center(
        child: ListView(
          children: <Widget>[
            const SizedBox(height: 5),
            Container(
              color: Colors.transparent,
              width: MediaQuery.of(context).size.width,
              height: 60,
              child: RaisedButton(
                shape: new RoundedRectangleBorder(
                  borderRadius: new BorderRadius.circular(30.0),
                ),
                onPressed: () 
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => SecondRoute()),
                  );
                ,
                color: Colors.blue[300],
                child: Text(
                  "Accident",
                  style: TextStyle(
                    color: Colors.white,
                    fontFamily: 'Raleway',
                    fontSize: 22.0,
                  ),
                ),
              ),
            ),

            //////////////
            // Lots of many other buttons similar to this one above
            //////////////

          ],
        ),
      ),
      bottomNavigationBar: _bannerAd,
   );