how to place ads below or above BottomNavigationBar in Flutter

Question

I want to place google_mobile_ads Banner Ad just above or below the BottomNavigationBar in Flutter.

I tried to place the BottomNavigationBar in Container ad add Margin, but there is no option to add 2 children inside the Container.

I tried to add a Column widget inside the BottomNavigationBar but the column goes to the up top of the page.

Any ideas on how I can make a place for google_mobile_ads just above or below the BottomNavigationBar?

I can share the code, but I need advice or guidance or pointers on how it can be achieved.

It's better if you provide a minimum example for us. In the meantime, a Container can only have one child, whereas a column can have many. You should constrain your column so that it does not fill all the page. Something like a container would work. — Raphael Sauer, Jan 06 '22 at 20:40
Can you suggest how I can constraint the column so that it can stick to the bottom part of the page and not take up the whole page. The body is inside the singlechildscrollview which has a listview builder inside. I will paste the once I am back at my system. — Purna Satya, Jan 06 '22 at 21:00

Armagan GOK · Answer 1 · 2022-07-23T11:27:58.890

7

That's how I dealt with it

bottomNavigationBar: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          AdvertisementWidget(),
          BottomNavigationBar(),
        ],
      )

edited Jul 23 '22 at 11:27

answered Jul 23 '22 at 11:25

Armagan GOK

81
1
7

This looks good too. – Purna Satya Jul 23 '22 at 15:59
2

`mainAxisSize: MainAxisSize.min` was what I needed. Thanks! – KHAN Aug 08 '22 at 07:16
my pleasure lord – Armagan GOK Aug 08 '22 at 17:15

score 2 · Accepted Answer · answered Jan 06 '22 at 23:16

There are many ways to achieve this. one would be to separate your scaffold and Ad container like this:

return Column(
    children:[
        Expanded(child: Scaffold(),
        SizedBox(height: 50, child: AdContainer())
    ]
)

another way would be to add it in the bottom nav bar:

bottomNavigationBar: SizedBox(
                         height = 200,
                         child: Column(
                                    children: [
                                        BottomNav(),
                                        AdContainer()
                                    ]
                         )
                     )

This helped. Thank you. The second option didnt work for some reason so took the first route. — Purna Satya, Jan 07 '22 at 17:39

score 1 · Answer 3 · answered Jan 06 '22 at 22:49

1

Wrap in a column in MaterialApp and expand Scaffold body to fill Ad to the bottom

MaterialApp:
       Column(:[
            Expanded(Scaffold),
            AdWidget,
        ])

answered Jan 06 '22 at 22:49

Kohls

820
7
19

how to place ads below or above BottomNavigationBar in Flutter

3 Answers3