Flutter: Banner Ad Overlapping The Main Screen

Question

I am doing a Flutter app and managed to show the AdMob banner ad, however the ad overlaps the bottom of my app's main screen:

By following this article, I managed to make the app screen's bottom properly displayed, but the persistentFooterButtons is sacrificed, which I think is not an ideal solution.

I am thinking about putting the Scaffold object and a fixed height area into a column that is contained by a Center object, something similar to the following:

  @override
  Widget build(BuildContext context) {

    return new Center(
      child: new Column (
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          new Expanded (
              child:  _getScaffold(),
          ),
          new Expanded (
              child: new Container(height: 50.0,)
          )
        ],
      ),
    );
  }

But in this way I get the exception "A RenderFlex overflowed by 228 pixels on the bottom":

Anybody can show me how to build such layout? I want every component of my scaffold properly displayed, with a fixed height dummy footer that is ok to be overlapped by the Admob's banner ad.

Any help is much welcome.

Jimmy

Answer 1

Also we can add some trick like bottomNavigationBar under the Scaffold

bottomNavigationBar: Container(
    height: 50.0,
    color: Colors.white,
  ),

This will take floating button up.