Flutter：横幅广告与主屏幕重叠 [英] Flutter: Banner Ad Overlapping The Main Screen

问题描述

我正在制作Flutter应用，并设法展示了AdMob横幅广告，但是该广告与应用主屏幕的底部重叠：

按照

我正在考虑将脚手架对象和固定高度的区域放到由一个Center对象，类似于以下内容：

  @override 
小部件build（BuildContext context）{
 
返回新的Center（
子项：new Column（
 crossAxisAlignment：CrossAxisAlignment.center，
子项：< Widget> [
 new Expanded（
子级：_getScaffold（），
），
新扩展（
子级：new容器（高度：50.0，）
）
]，
）， 
）; 
} 
  

但是这样，我得到了一个异常 RenderFlex溢出了底部228像素：

<谁能告诉我如何建立这样的布局？我希望脚手架的每个组件都能正确显示，并且固定高度的虚拟页脚可以与Admob的横幅广告重叠。

任何帮助都非常欢迎。

Jimmy

解决方案

最后我明白了：

  @override 
小部件构建（ BuildContext context）{
 
 return new Center（
子级：new Column（
 crossAxisAlignment：CrossAxisAlignment.stretch，
 mainAxisSize：MainAxisSize.min，
子级：< Widget> [
新的Expanded（
的孩子：_getScaffold（），
），
的新Container（高度：50.0，
的孩子：new占位符（ ：Colors.blue））
]，
），
）; 
} 
  

窍门已扩展，此处仅适用于脚手架，但适用于虚拟页脚仅需要一个固定高度的容器。现在，我可以显示来自Scaffold对象的所有可用信息。

Flutter的布局构建有时确实使我感到困惑...

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

解决方案

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...

这篇关于Flutter：横幅广告与主屏幕重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！