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

时间:2018-04-28 12:54:48

标签: navigation-drawer flutter

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

在下面找到一个示例实现,以在flutter中重新创建问题:

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.
        );
    }
}

2 个答案:

答案 0 :(得分:0)

我有点迟了,但是有同样的问题。

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

答案 1 :(得分:0)

我遇到了同样的问题,我的解决方案与 @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,
            ],
          ),
        ),
      ),
    ],
  ),
);