title: Ads overlapping bottom navigation in flutter
body: <p>i have setup banner ads in flutter and those are overlapping the bottom navigation bar</p>
  
  <p><a href="https://i.stack.imgur.com/LaVyr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LaVyr.jpg" alt="This is how it looks"></a></p>
  
  <p>I want to display ads below that bottom navigation bar,</p>
  
  <p>is there any way that i can add a margin below the bottom navigation bar ?</p>
  
  <p>i have implemented ads in home.dart (mainpage)</p>
  
  <pre><code>import 'package:provider/provider.dart';
  import '../../ui/widgets/bottom_nav_bar.dart';
  import '../../core/utils/theme.dart';
  import 'search_page.dart';
  import 'category.dart';
  import 'main_page.dart';
  import 'settings.dart';
  import 'package:flutter/material.dart';
  import 'package:firebase_admob/firebase_admob.dart';
  import 'for_you.dart';
  
  const String AD_MOB_APP_ID = 'ca-app-pub-3940256099942544~3347511713';
  const String AD_MOB_TEST_DEVICE = 'DEC3010B2445165B43EB949F5D97D0F8 - run ad then check device logs for value';
  const String AD_MOB_AD_ID = 'ca-app-pub-3940256099942544/6300978111';
  
  class HomePage extends StatefulWidget {
  
  
    @override
    _HomePageState createState() =&gt; _HomePageState();
  }
  
  
  class _HomePageState extends State&lt;HomePage&gt; {
  
  BannerAd _bannerAd;
  
    static final MobileAdTargetingInfo targetingInfo = new MobileAdTargetingInfo(
      testDevices: &lt;String&gt;[AD_MOB_TEST_DEVICE],
    );
  
    BannerAd createBannerAd() {
      return new BannerAd(
        adUnitId: AD_MOB_AD_ID,
        size: AdSize.banner,
        targetingInfo: targetingInfo,
      );
    }
  
    final GlobalKey&lt;ScaffoldState&gt; _scaffoldKey = new GlobalKey&lt;ScaffoldState&gt;();
    int _selectedIndex = 0;
    final PageController _pageController = PageController();
  
  
  
  
    @override
    void initState() {
      super.initState();
  
  
    }
  
  
  
    @override
    void dispose() {
      super.dispose();
      _pageController.dispose();
    }
  
  
    @override
    Widget build(BuildContext context) {
      final stateData = Provider.of&lt;ThemeNotifier&gt;(context);
      final ThemeData state = stateData.getTheme();
  
  
  FirebaseAdMob.instance.initialize(appId: AD_MOB_APP_ID);
      _bannerAd = createBannerAd()..load()..show();
      return Scaffold(
        key: _scaffoldKey,
        appBar: AppBar(
          centerTitle: false,
          backgroundColor: state.primaryColor,
          elevation: 0,
          title: Text(
            'RevWalls',
            style: state.textTheme.headline,
          ),
          actions: &lt;Widget&gt;[
            IconButton(
              icon: Icon(
                Icons.search,
                color: state.textTheme.body1.color,
              ),
              onPressed: () =&gt; showSearch(
                  context: context, delegate: WallpaperSearch(themeData: state)),
            )
          ],
        ),
        body: Container(
          color: state.primaryColor,
          child: PageView(
            controller: _pageController,
            physics: BouncingScrollPhysics(),
            onPageChanged: (index) {
              setState(() {
                _selectedIndex = index;
              });
            },
            children: &lt;Widget&gt;[
              MainBody(),
              Category(),
              ForYou(),
              SettingsPage(),
            ],
          ),
        ),
  
  
  
        bottomNavigationBar: BottomNavyBar(
          selectedIndex: _selectedIndex,
          unselectedColor: state.textTheme.body1.color,
          onItemSelected: (index) {
            _pageController.jumpToPage(index);
          },
          selectedColor: state.accentColor,
          backgroundColor: state.primaryColor,
          showElevation: false,
          items: [
            BottomNavyBarItem(
              icon: Icon(Icons.home),
              title: Text('Home'),
            ),
            BottomNavyBarItem(
              icon: Icon(Icons.category),
              title: Text('Subreddits'),
            ),
            BottomNavyBarItem(
              icon: Icon(Icons.phone_android),
              title: Text('Exact Fit'),
            ),
            BottomNavyBarItem(
              icon: Icon(Icons.settings),
              title: Text('Settings'),
            ),
          ],
        ),
      );
    }
  
    Widget oldBody(ThemeData state) {
      return NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool boxIsScrolled) {
          return &lt;Widget&gt;[
            SliverAppBar(
              backgroundColor: state.primaryColor,
              elevation: 4,
              title: Text(
                'reWalls',
                style: state.textTheme.headline,
              ),
              actions: &lt;Widget&gt;[
                IconButton(
                  icon: Icon(Icons.search, color: state.accentColor),
                  onPressed: () {
                    showSearch(
                        context: context,
                        delegate: WallpaperSearch(themeData: state));
                  },
                )
              ],
              floating: true,
              pinned: _selectedIndex == 0 ? false : true,
              snap: false,
              centerTitle: false,
            ),
          ];
        },
        body: Container(
          color: state.primaryColor,
          child: PageView(
            controller: _pageController,
            onPageChanged: (index) {
              setState(() {
                _selectedIndex = index;
              });
            },
            children: &lt;Widget&gt;[
              MainBody(),
              Category(),
              ForYou(),
              SettingsPage(),
            ],
          ),
        ),
      );
    }
  }
  </code></pre>
  
  <p>and here is the bottom navigation bar - </p>
  
  <pre><code>library bottom_navy_bar;
  
  import 'package:flutter/material.dart';
  import 'package:flutter/widgets.dart';
  
  class BottomNavyBar extends StatelessWidget {
  
    final int selectedIndex;
    final double iconSize;
    final Color backgroundColor, selectedColor, unselectedColor;
    final bool showElevation;
    final Duration animationDuration;
    final List&lt;BottomNavyBarItem&gt; items;
    final ValueChanged&lt;int&gt; onItemSelected;
  
    BottomNavyBar(
        {Key key,
        this.selectedIndex = 0,
        this.showElevation = true,
        this.iconSize = 20,
        this.backgroundColor,
        this.selectedColor,
        this.unselectedColor,
        this.animationDuration = const Duration(milliseconds: 250),
        @required this.items,
        @required this.onItemSelected}) {
      assert(items != null);
      assert(items.length &gt;= 2 &amp;&amp; items.length &lt;= 5);
      assert(onItemSelected != null);
    }
  
  
    Widget _buildItem(BottomNavyBarItem item, bool isSelected) {
  
  
  
      return AnimatedContainer(
        width: isSelected ? 120 : 50,
        height: double.maxFinite,
        duration: animationDuration,
        decoration: BoxDecoration(
          color: isSelected ? selectedColor.withOpacity(0.2) : backgroundColor,
          borderRadius: BorderRadius.all(Radius.circular(100.0)),
        ),
        alignment: Alignment.center,
        child: ListView(
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          scrollDirection: Axis.horizontal,
          children: &lt;Widget&gt;[
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: &lt;Widget&gt;[
                Padding(
                  padding: const EdgeInsets.only(right: 8),
                  child: IconTheme(
                    data: IconThemeData(
                        size: iconSize,
                        color: isSelected ? selectedColor : unselectedColor),
                    child: item.icon,
                  ),
                ),
                isSelected
                    ? DefaultTextStyle.merge(
                        style: TextStyle(
                            fontSize: 16,
                            color: selectedColor,
                            fontWeight: FontWeight.bold),
                        child: item.title,
                      )
                    : SizedBox.shrink()
              ],
            )
          ],
        ),
      );
    }
  
  
    @override
    Widget build(BuildContext context) {
      return Container(
        color: backgroundColor,
        child: Container(
          width: double.infinity,
          height: 55,
          padding: EdgeInsets.all(8),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: items.map((item) {
              var index = items.indexOf(item);
              return GestureDetector(
                onTap: () {
                  onItemSelected(index);
                },
                child: _buildItem(item, selectedIndex == index),
              );
            }).toList(),
          ),
        ),
      );
    }
  }
  
  class BottomNavyBarItem {
    final Icon icon;
    final Text title;
  
    BottomNavyBarItem({
      @required this.icon,
      @required this.title,
    }) {
      assert(icon != null);
      assert(title != null);
    }
  }
  </code></pre>
  
  <p>Please help</p>