FAN Banner with ListView in Flutter

Question

I am creating an app that uses Flutter. The layout includes a big ListView with many buttons and one Facebook Audience Network (FAN) banner. I have tried many combinations to make that the banner is kept fixed at the bottom of the screen. I have, also, used the approach of one bottomNavigationBar under the Scaffold as describe here: [https://stackoverflow.com/questions/48934439/flutter-banner-ad-overlapping-the-main-screen][1]

The issue is that what I get is the banner as the last item in the ListView and it is not visible unless the user scrolls down to the very bottom of the ListView (what is very unlikely to happen)

With the bottomNavigationBar I am seeing no way to put a FAN banner into it. I don't know if it is possible.

My current layout is, currently, defined in this way:

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',
          ),
        ],
      ),
    );
  }
}

The last two buttons are taken from an example on how to use FAN with Flutter and they work as expected. With this layout, the banner is not visible initially because it is drawn after all the buttons in the ListView.

Could you give a hand with this?

Answer 1

Finally, I was able to make it.

Simply, in the bottomNavigationBar I called _bannerAd and that was it!

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,
   );
  }
}