Flutter banner overlapping the screen - flutter

Question

My banner is overlapping the slack widgets i need to show the ad on bottom or footer but problem is its overlapping the container need to know how can i add in end but not overlap the containers
Here is my code
body: Stack(
children: [
GestureDetector(
onTap: () {
percengtageTrigger();
API.voteplusQuestion(snapshot.data[index], 0);
},
child: Container(
height: stackHeight * 0.5,
width: stackWidth,
color: Color(0xffF9D342),
child: Column(
children: <Widget>[
shouldShow
? Container(
padding: const EdgeInsets.only(
top: 10, right: 10),
height: stackHeight * 0.1,
color: Color(0xffF9D342),
width: double.infinity,
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment:
CrossAxisAlignment.end,
children: <Widget>[
Text(
'${percentage1.toStringAsFixed(0)}%',
style: TextStyle(
color: Colors.white,
fontSize: 23,
fontFamily: 'NewsCycle',
),
),
],
))
: Container(
height: stackHeight * 0.1,
color: Color(0xffF9D342),
width: double.infinity,
),
Container(
color: Color(0xffF9D342),
height: stackHeight * 0.4,
width: double.infinity,
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 20),
child: Text(
snapshot.data[index].would,
style: TextStyle(
color: Color(0xff292826),
fontSize: 23,
fontWeight: FontWeight.bold,
fontFamily: 'NewsCycle',
),
),
),
],
)),
],
),
),
),
GestureDetector(
onTap: () {
percengtageTrigger();
API.voteplusQuestion(snapshot.data[index], 1);
},
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
height: stackHeight * 0.5,
width: stackWidth,
color: Color(0xff292826),
child: Column(
children: <Widget>[
shouldShow
? Container(
padding: const EdgeInsets.only(
top: 10, right: 10),
height: stackHeight * 0.1,
color: Color(0xff292826),
width: double.infinity,
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment:
CrossAxisAlignment.end,
children: <Widget>[
Text(
'${percentage2.toStringAsFixed(0)}%',
style: TextStyle(
color: Colors.white,
fontSize: 23,
fontFamily: 'NewsCycle',
),
),
],
))
: Container(
height: stackHeight * 0.1,
color: Color(0xff292826),
width: double.infinity,
),
Container(
color: Color(0xff292826),
height: stackHeight * 0.4,
width: double.infinity,
child: Column(
children: <Widget>[
Padding(
padding:
const EdgeInsets.only(top: 40),
child: Text(
snapshot.data[index].rather,
style: TextStyle(
color: Color(0xffF9D342),
fontSize: 23,
fontWeight: FontWeight.bold,
fontFamily: 'NewsCycle',
),
),
),
],
)),
],
),
),
),
),
Align(
alignment: Alignment.center,
child: Container(
width: stackWidth,
height: stackHeight * 0.015,
color: Colors.white,
),
),
Align(
alignment: Alignment.center,
child: Container(
width: stackWidth,
height: stackHeight * 0.15,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
child: Align(
alignment: Alignment.center,
child: GestureDetector(
onTap: () {
nextQuestion();
},
child: Text(
"SKIP",
style: TextStyle(
color: Colors.black,
fontFamily: 'FredokaOne',
fontSize: 27),
),
),
)),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
child: AdmobBanner(
adUnitId: getBannerAdUnitId(),
adSize: bannerSize,
),
),
),
],
));
As you see in the image it's overlapping the grey container I need a yellow and grey containers in same size but on top of banner no with overlap with banner.

Answer 1

If your content will be scrollable in the future, then I suggest you stick with the floating ad and maybe add a wide grey background to cover some space as I've seen some apps do.
Otherwise, assign it to a small row at the bottom (And assign the rest of the elements to rows as needed). The ad will take up a lot of space though so be sure to adjust the other elements accordingly.

Answer 2

Since you are using stack the children in the stack will overlap. If don't want them to overlap you can use other layout widgets such as Column or ListView according to your need. You can refer to flutter docs for more info on layout widgets.