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.

Answer 2

Finally I got it:

@override
Widget build(BuildContext context) {

 return new Center(
   child: new Column (
     crossAxisAlignment: CrossAxisAlignment.stretch,
     mainAxisSize: MainAxisSize.min,
     children: <Widget>[
       new Expanded (
          child: _getScaffold(),
       ),
       new Container(height: 50.0,
            child: new Placeholder(color:Colors.blue))
      ],
    ),
  );
 }

The trick is Expanded here is for the Scaffold only, but for the dummy footer just a fixed height Container is required. Now I can display everything available from the Scaffold object.

Layout building of Flutter sometimes really confuses me...

Answer 3

If I understand your question well, I think you want to have your ad shown from the bottom while using a FAB. I think using a Stack widget here is a good solution, I created this example in a rush but should be enough to show you what I mean:

class AdBar extends StatefulWidget {
  @override
  _AdBarState createState() => new _AdBarState();
}

class _AdBarState extends State<AdBar> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(),
        body: new ListView(
          children: new List.generate(50, (int index) {
            return new Text("widgets$index");
          }),
        ),
        persistentFooterButtons:

        <Widget>[
          new Stack(
            children: <Widget>[
              new Container (
                color: Colors.transparent,
                child: new Material(
                  color: Colors.cyanAccent,
                  child: new InkWell(
                    onTap: () {

                    },
                    child: new Container(
                      //color: Colors.cyanAccent,
                      width: MediaQuery
                          .of(context)
                          .size
                          .width * 0.90,
                      height: MediaQuery
                          .of(context)
                          .size
                          .height * 0.25,
                    ),
                  ),),),
              new Positioned(
                  right: 0.0,
                  child: new FloatingActionButton(
                      onPressed: () {}, child: new Icon(Icons.fastfood)))
            ],
          )
        ]

    );
  }
}