Boxdecoration fit parent height - flutter

Question

I need to make a container with background image and background color in the bottom 30 pixels, but I need the layout to look like this:
SizedBox(
height: 540,
child: Container(
width: 392.7,
height: 510,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(25),
bottomRight: Radius.circular(25)),
image: DecorationImage(
image: Image.network(
'https://ak.picdn.net/shutterstock/videos/8258557/thumb/1.jpg',
).image,
fit: BoxFit.cover)

Answer 1

as per your ui I think u have to use stack instead of column use stack and it will provide your desire output
Here is code example:-
SizedBox(
height: 540,
child: Stack(
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image:
/// your image
fit: BoxFit.fill,
)),
),
Positioned(
bottom: 0.0,
child: Container(
height: 30,
// set color and border radius as u need
)),
],
),
);

Answer 2

You can simply use Column to and use another Container or Material... widget to provide extra 30px border.
SizedBox(
height: 540,
child: Column(
children: [
Container(
width: 392.7,
height: 510,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(25),
bottomRight: Radius.circular(25)),
image: DecorationImage(
image: Image.network(
'https://ak.picdn.net/shutterstock/videos/8258557/thumb/1.jpg',
).image,
fit: BoxFit.cover),
),
),
Container(
color: Colors.deepPurple,
height: 30.0,
width: 392.7,
)
],
),
)
But For background cases you can use Stack for it.
SizedBox(
height: 540,
width: 392.7,
child: Stack(
children: [
Container(
color: Colors.deepPurple,
),
Container(
width: 392.7,
height: 510,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(25),
bottomRight: Radius.circular(25)),
image: DecorationImage(
image: Image.network(
'https://ak.picdn.net/shutterstock/videos/8258557/thumb/1.jpg',
).image,
fit: BoxFit.cover),
),
),
],
),
)
More about Stack

Answer 3

Try this code below and let me know if change required.
SizedBox(
height: 540,
child: Column(
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg",
),
fit: BoxFit.fill,
)),
)),
Container(
height: 30,
color: Colors.red,
)
],
),
)