Flutter Admob banner ad is displayed below Status bar

Viewed 531

I am trying to achieve a very basic thing: Display Admob Banner ad on top. This works, but the Banner Ad slips inside the status bar and I couldn't find any way to make it display properly. Here is the sample code I am trying:

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
        // This makes the visual density adapt to the platform that you run
        // the app on. For desktop platforms, the controls will be smaller and
        // closer together (more dense) than on mobile platforms.
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomeView(),
    );
  }
}

class HomeView extends StatefulWidget {
  @override
  _HomeViewState createState() => _HomeViewState();
}

Future<void> _initAdMob() {
  return FirebaseAdMob.instance.initialize(appId: AdManager.appId);
}

class _HomeViewState extends State<HomeView> {
  // COMPLETE: Add _bannerAd
  BannerAd _bannerAd;

  // COMPLETE: Implement _loadBannerAd()
  void _loadBannerAd() {
    _bannerAd
      ..load()
      ..show(anchorType: AnchorType.top);
  }
  @override
  void initState() {
    _bannerAd = BannerAd(
      adUnitId: AdManager.bannerAdUnitId,
      size: AdSize.banner,
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<void>(
      future: _initAdMob(),
      builder: (BuildContext context, AsyncSnapshot<void> snapshot) {
        _loadBannerAd();
        return SafeArea(
          child: new Column(children: <Widget>[
            Text('Sample text')
          ],),
        );
      },
    );
  }
}

This code produces the below output: Admob Banner Ad output

which obviously is wrong. The text is right at the place where it should be, however, the Banner ad is slipped inside the status bar, which is not what I intend. Also, since Google doesn't support providing positional arguments for the banner ad, I am completely helpless.

However, the Banner ad in the Google Codelab for Flutter works very well which is way beyond my understanding as a Flutter novice.

Can someone please shed a light and guide me on what's wrong with the sample code?

0 Answers
Related