Reputation: 295
I'm trying to display image inside a container with responsive width and height.
Here is my code:
...
child: Column (
mainAxisSize: MainAxisSize.min,
children: [
Row (
children: [
Padding (
padding: EdgeInsets.all(20),
child: Container(
height: MediaQuery.of(context).size.height *.3,
width: MediaQuery.of(context).size.width * 1,
padding: const EdgeInsets.all(15),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/gunung.jpg"),
fit: BoxFit.cover,
...
here is the output:
Is there any solutions?
Upvotes: 3
Views: 6863
Reputation: 4750
Just Change this to your code :
//Add Exapanded widget
child: Column (
mainAxisSize: MainAxisSize.min,
children: [
Row (
children: [
//Add Expanded Widget it will solve your issue
Expanded(
Padding (
padding: EdgeInsets.all(20),
child: Container(
height: MediaQuery.of(context).size.height *.3,
width: MediaQuery.of(context).size.width * 1,
padding: const EdgeInsets.all(15),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/gunung.jpg"),
fit: BoxFit.cover,
Upvotes: 6
Reputation: 1194
Since you've set the width
of your Container
as
MediaQuery.of(context).size.width * 1
This means that it'll take up the width space of your device screen.
Not to mention, you've also set the Padding
too. And that is taking up left, top, right and bottom spacing of 20.
padding: EdgeInsets.all(20)
This Padding
is taking your Container
ahead than it needs to go, hence the overflow.
There are many ways to fix this.
(MediaQuery.of(context).size.width * 1) - 20 - 20
Padding
widget separately hanging around above Container
. Padding( // <---- remove
padding: EdgeInsets.all(20), // <---- remove
child: Container(
height: MediaQuery.of(context).size.height *.3,
width: MediaQuery.of(context).size.width * 1,
padding: const EdgeInsets.all(20), // <---- use this
...
Upvotes: 0