Flutter：横幅广告与主屏幕重叠

Question

我正在开发一个 Flutter 应用并成功展示了 AdMob 横幅广告，但是该广告与我的应用主屏幕的底部重叠：

通过关注this article，我设法使应用程序屏幕的底部正确显示，但牺牲了persistentFooterButtons，我认为这不是一个理想的解决方案。

我正在考虑将 Scaffold 对象和固定高度区域放入由 Center 对象包含的列中，类似于以下内容：

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

但是这样我得到了异常“A RenderFlex 在底部溢出了 228 个像素”：

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

非常欢迎任何帮助。

吉米

Answer 1

我们还可以在 Scaffold 下添加一些像 bottomNavigationBar 这样的技巧

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

这将使浮动按钮向上。

Answer 2

终于明白了：

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

这里的技巧是 Expanded 仅适用于 Scaffold，但对于 dummy footer，只需要一个固定高度的 Container。现在我可以显示 Scaffold 对象中可用的所有内容。

Flutter 的布局构建有时真的让我很困惑......

Answer 3

如果我能很好地理解您的问题，我认为您希望在使用 FAB 时从底部展示您的广告。我认为在这里使用Stack 小部件是一个很好的解决方案，我匆忙创建了这个示例，但应该足以向您展示我的意思：

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)))
            ],
          )
        ]

    );
  }
}