Bottom Overflow Problem in Flutter Despite of Screen fixing(?!) - flutter

Question

I was trying to make a responsive app that measure the screen height and than apply it's container's height according it. I split the app's page in (40%, 30% , 30%) portion, but the app showing the message "Bottom pixel overflow by 10.0 pixel".
And When I rotate the Scene, The middle portion container also show the same problem.
As A newbie, I Don't understand what is my wrong-doing or wrong-knowing?
Is the padding cause the problem?
And is there any simple or standard system to design a app responsive to various window ?
Thanks in Advance.
Here is my Code
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// This is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'TravelApp';
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
//title: _title,
home: Scaffold(
//appBar: AppBar(
//centerTitle: true,
//title: const Text(_title),
//),
body: MyStatelessWidget(),
),
);
}
}
class MyStatelessWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
dynamic screenHeight = MediaQuery.of(context).size.height;
dynamic screenwidth = MediaQuery.of(context).size.width;
return Scaffold(
body: Container(
height: screenHeight,
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomRight,
colors: [Color(0xFDEAEC), Colors.grey]),
),
// Portion Started In The Column
child: Column(
children: <Widget>[
Container(
alignment: Alignment.center,
height: screenHeight * 0.40, //40% of Screen height
child: Image(
image: AssetImage('../assets/firstpag.jpg'),
),
),
Container(
alignment: Alignment.center,
height: screenHeight * 0.30, //30% of Screen height
color: Colors.green,
padding: EdgeInsets.fromLTRB(0, 30, 0, 0),
child: Column(
children: <Widget>[
Container(
alignment: Alignment.center,
child: Text(
"Let's Get Started",
style: TextStyle(fontSize: 25),
textAlign: TextAlign.center,
),
),
Container(
alignment: Alignment.center,
padding: EdgeInsets.fromLTRB(10, 15, 10, 0),
child: Text(
"Lorem Ipsum is simply dummy text of the printing.Lorem Ipsum is simply dummy text of the printing",
style: TextStyle(
fontSize: 12,
),
textAlign: TextAlign.center,
),
),
Container(
alignment: Alignment.center,
width: screenwidth * 0.20,
padding: EdgeInsets.fromLTRB(0, 20, 0, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
alignment: Alignment.center,
color: Colors.grey,
height: 4,
width: 5,
),
Container(
color: Colors.grey,
height: 4,
width: 5,
),
Container(
color: Colors.blue,
height: 4,
width: 10,
)
],
)),
],
),
),
Container(
alignment: Alignment.center,
height: screenHeight * 0.30, //30% of Screen height
color: Colors.red,
padding: EdgeInsets.fromLTRB(0, 30, 0, 0),
child: Column(
children: <Widget>[
Container(
alignment: Alignment.center,
child: Text(
"Let's Get Started",
style: TextStyle(fontSize: 25),
textAlign: TextAlign.center,
),
),
Container(
alignment: Alignment.center,
padding: EdgeInsets.fromLTRB(10, 15, 10, 0),
child: Text(
"Lorem Ipsum is simply dummy text of the printing.Lorem Ipsum is simply dummy text of the printing",
style: TextStyle(
fontSize: 18,
),
textAlign: TextAlign.center,
),
),
Container(
alignment: Alignment.center,
width: screenwidth * 0.20,
padding: EdgeInsets.fromLTRB(0, 20, 0, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
alignment: Alignment.center,
color: Colors.grey,
height: 4,
width: 5,
),
Container(
color: Colors.grey,
height: 4,
width: 5,
),
Container(
color: Colors.blue,
height: 4,
width: 10,
)
],
)),
],
),
)
],
),
));
}
}

Answer 1

The issue with the code above is that it is using a padding: EdgeInsets.all(5) which also means we're using 5px from the bottom and from the top as padding.
Therefore, the layout overflows by 10px.
A possible solution would be to either remove the padding or change it to horizontal-only, depending on the desired outcome:
padding: EdgeInsets.symmetric(horizontal: 5),
Full snippet code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// This is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'TravelApp';
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
//title: _title,
home: Scaffold(
//appBar: AppBar(
//centerTitle: true,
//title: const Text(_title),
//),
body: MyStatelessWidget(),
),
);
}
}
class MyStatelessWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
dynamic screenHeight = MediaQuery.of(context).size.height;
dynamic screenwidth = MediaQuery.of(context).size.width;
return Scaffold(
body: Container(
height: screenHeight,
padding: EdgeInsets.symmetric(horizontal: 5), // modified line
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomRight,
colors: [Color(0xFDEAEC), Colors.grey]),
),
// Portion Started In The Column
child: Column(
children: <Widget>[
Container(
alignment: Alignment.center,
height: screenHeight * 0.40, //40% of Screen height
child: Image(
image: AssetImage('../assets/firstpag.jpg'),
),
),
Container(
alignment: Alignment.center,
height: screenHeight * 0.30, //30% of Screen height
color: Colors.green,
padding: EdgeInsets.fromLTRB(0, 30, 0, 0),
child: Column(
children: <Widget>[
Container(
alignment: Alignment.center,
child: Text(
"Let's Get Started",
style: TextStyle(fontSize: 25),
textAlign: TextAlign.center,
),
),
Container(
alignment: Alignment.center,
padding: EdgeInsets.fromLTRB(10, 15, 10, 0),
child: Text(
"Lorem Ipsum is simply dummy text of the printing.Lorem Ipsum is simply dummy text of the printing",
style: TextStyle(
fontSize: 12,
),
textAlign: TextAlign.center,
),
),
Container(
alignment: Alignment.center,
width: screenwidth * 0.20,
padding: EdgeInsets.fromLTRB(0, 20, 0, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
alignment: Alignment.center,
color: Colors.grey,
height: 4,
width: 5,
),
Container(
color: Colors.grey,
height: 4,
width: 5,
),
Container(
color: Colors.blue,
height: 4,
width: 10,
)
],
)),
],
),
),
Container(
alignment: Alignment.center,
height: screenHeight * 0.30, //30% of Screen height
color: Colors.red,
padding: EdgeInsets.fromLTRB(0, 30, 0, 0),
child: Column(
children: <Widget>[
Container(
alignment: Alignment.center,
child: Text(
"Let's Get Started",
style: TextStyle(fontSize: 25),
textAlign: TextAlign.center,
),
),
Container(
alignment: Alignment.center,
padding: EdgeInsets.fromLTRB(10, 15, 10, 0),
child: Text(
"Lorem Ipsum is simply dummy text of the printing.Lorem Ipsum is simply dummy text of the printing",
style: TextStyle(
fontSize: 18,
),
textAlign: TextAlign.center,
),
),
Container(
alignment: Alignment.center,
width: screenwidth * 0.20,
padding: EdgeInsets.fromLTRB(0, 20, 0, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
alignment: Alignment.center,
color: Colors.grey,
height: 4,
width: 5,
),
Container(
color: Colors.grey,
height: 4,
width: 5,
),
Container(
color: Colors.blue,
height: 4,
width: 10,
)
],
)),
],
),
)
],
),
));
}
}