Firebase Admob - 与导航抽屉重叠的横幅广告答案

【问题标题】：Firebase Admob - Banner Ad overlapping the navigation drawerFirebase Admob - 与导航抽屉重叠的横幅广告
【发布时间】：2018-04-28 12:54:47
【问题描述】：

添加 firebase_admob 插件并启动并运行后，我注意到它覆盖了 fab 和导航抽屉。我已经使用 persistentFooterButtons 修复了工厂，但我似乎找不到导航抽屉的解决方法。非常感谢任何帮助。

在下面找到一个示例实现，以在颤振中重现问题：

import 'package:flutter/material.dart';
import 'package:firebase_admob/firebase_admob.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
            title: 'Firebase AdMob',
            theme: new ThemeData(
                primarySwatch: Colors.blue,
            ),
            home: new MyHomePage(title: 'AdMob Test App'),
        );
    }
}

class MyHomePage extends StatefulWidget {
    MyHomePage({Key key, this.title}) : super(key: key);
    final String title;

    @override
    _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
    int _counter = 0;
    BannerAd myBanner;

    void _incrementCounter() {
        setState(() {
            _counter++;
        });
    }

    @override
    void initState() {
        super.initState();
        myBanner = new BannerAd(
            // Replace the testAdUnitId with an ad unit id from the AdMob dash.
            // https://developers.google.com/admob/android/test-ads
            // https://developers.google.com/admob/ios/test-ads
            adUnitId: BannerAd.testAdUnitId,
            size: AdSize.smartBanner,
            targetingInfo: new MobileAdTargetingInfo(
                // gender: MobileAdGender.unknown
            ),
            listener: (MobileAdEvent event) {
                print("BannerAd event is $event");
            },
        );
        myBanner..load()..show(
            // Banner Position
            anchorType: AnchorType.bottom,
        );
    }

    @override
    void dispose() {
        myBanner?.dispose();
        super.dispose();
    }

    @override
    Widget build(BuildContext context) {

        return new Scaffold(
            appBar: new AppBar(
                title: new Text(widget.title),
            ),
            drawer: new Drawer(),
            body: new Center(
                child: new Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                        new Text('You have pushed the button this many times:'),
                        new Text('$_counter', style: Theme.of(context).textTheme.display1),
                    ],
                ),
            ),
            floatingActionButton: new FloatingActionButton(
                onPressed: _incrementCounter,
                tooltip: 'Increment',
                child: new Icon(Icons.add),
            ), // This trailing comma makes auto-formatting nicer for build methods.
        );
    }
}

【问题讨论】：

标签： navigation-drawer flutter

【解决方案1】：

我有点晚了，但遇到了同样的问题。

我的导航抽屉位于一个具有固定高度的可滚动容器中，因此它在添加上方停止并且可以滚动。可能不是完美的答案，但对我有用。

【讨论】：

谢谢。另外使用PlatformVIew 是解决此问题的另一种方法

【解决方案2】：

我遇到了同样的问题，我的解决方案与@moehagene 添加的相同。我在抽屉底部添加了一个与广告高度相同的空项目，因此当空间不足且广告正在显示时，抽屉变得可滚动。我认为这是合理的。代码如下：

 return Drawer(
  // Add a ListView to the drawer. This ensures the user can scroll
  // through the options in the drawer if there isn't enough vertical
  // space to fit everything.
  child: Column(
    children: <Widget>[
      Expanded(
        child: Container(
          child: ListView(
            // Important: Remove any padding from the ListView.
            padding: EdgeInsets.zero,
            children: <Widget>[
              _Item1,
              _Item2,
              _Item3,
              _Item4,
              model.isShowingAds ? _emptySpaceItem : null,
            ],
          ),
        ),
      ),
    ],
  ),
);

【讨论】：