Two screen overlapping flutter? - flutter

Question

I am new to flutter development and i am doing it from past 3 months and i never have that issue when i press back.
Whenever i press back and back to home screen screen overlap:
here is my code of home screen:
class HomePage extends StatefulWidget {
#override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
BannerAd _bottomBannerAd;
bool _isBottomBannerAdLoaded = false;
final BannerAd myBanner = BannerAd(
adUnitId: 'ca-app-pub-3940256099942544/6300978111',
size: AdSize.banner,
request: AdRequest(),
listener: BannerAdListener(),
);
#override
void initState() {
super.initState();
myBanner.load();
}
#override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
bottomNavigationBar: Container(
height: 50,
width: 320,
child: AdWidget(ad: myBanner,),
) ,
backgroundColor: Colors.transparent,
body: SingleChildScrollView(
child: Column(
children: <Widget>[NavBar(), Body()],
)),
));
}
}
class Body extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ResponsiveLayout(
largeScreen: LargeChild(),
smallScreen: SmallChild(),
);
}
}
class LargeChild extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SizedBox(
height: 600,
child: Stack(
fit: StackFit.expand,
children: <Widget>[
FractionallySizedBox(
alignment: Alignment.centerLeft,
widthFactor: .6,
child: Padding(
padding: EdgeInsets.only(left: 48),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Memory Game",
style: TextStyle(
fontSize: 60,
fontWeight: FontWeight.bold,
fontFamily: "Montserrat-Regular",
color: Color(0xFF111111)),
),
RichText(
text: TextSpan(
text: "Say Hi to ",
style: TextStyle(
fontSize: 60, color: Color(0xFF8591B0)),
children: [
TextSpan(
text: "🐱",
style: TextStyle(
fontSize: 60,
fontWeight: FontWeight.bold,
// color: Colors.black54
))
],
),
),
SizedBox(
height: 40,
),
Search()
])))
],
),
);
}
}
class SmallChild extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Padding(
padding: EdgeInsets.all(40),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Memory Game!",
style: TextStyle(
fontSize: 60,
fontWeight: FontWeight.bold,
fontFamily: "Montserrat-Regular",
color: Colors.white),
),
RichText(
text: TextSpan(
text: "Play Now",
style: TextStyle(fontSize: 60, color: Color(0xFF8591B0)),
children: [
TextSpan(
text: "🐱",
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
))
],
),
),
SizedBox(
height: 32,
),
Search(),
SizedBox(
height: 30,
)
],
),
));
}
}
Problem:Whenever i press back whole screen apears in back of home screen as you can see in the provided gif.
Can someone please tell me that why is this happening?

Answer 1

Its happening just because you have written backgroundColor: Colors.transparent, in your Scaffold
Try to change it with some another color and check it out, you will not face the problem.