How do I expand the positioned Container downwards? - flutter

Question

I am trying to replicate a design but I am having difficulty doing so.
On this page, I am trying to stack the blue container over an image and expand it downwards but I can't expand it downwards. I am using weird colours so the contrast can be there to see. I don't want to use a column because it doesn't have the 'stacked' effect. I feel like there is a more elegant way of doing this.
This is what it currently looks like
class IndividualNewsPage extends StatelessWidget {
final String articleURL;
IndividualNewsPage({this.articleURL});
#override
Widget build(BuildContext context) {
final screenHeight = MediaQuery.of(context).size.height;
return SafeArea(
child: Scaffold(
backgroundColor: Colors.red,
body: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(30),
child: Row(
children: <Widget>[
Material(
color: Colors.transparent,
child: InkWell(
onTap: () => Navigator.pop(context),
child: Icon(
Icons.arrow_back_ios,
color: Colors.grey,
))),
Spacer(),
Text(
DateFormat.yMMMMd("en_US").format(DateTime.now()),
style: TextStyle(
color: Colors.black54,
fontWeight: FontWeight.w600,
fontSize: 15),
),
],
),
),
SizedBox(
height: 10,
),
Stack(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20)),
child: Container(
height: 400,
decoration: BoxDecoration(
color: Colors.blue,
image: DecorationImage(
image: NetworkImage(articleURL),
fit: BoxFit.fill)),
),
),
),
],
),
Positioned(
bottom: 30.0,
left: 0,
right: 0,
child: Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
topRight: Radius.circular(20),
topLeft: Radius.circular(20))),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"New York",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."),
),
],
),
),
),
],
)
],
),
),
);
}
}

Answer 1

Wrap Stack inside an Expanded widget. It will fill the available height and the blue widget will be positioned at the bottom of the Column.
...,
Expanded(
child: Stack(...)
),
...
You can set debugPaintSizeEnabled to true in the main method in order to see Widgets borders, margins, positions... It helps with Widget positioning and sizing problems when building UIs.
import 'package:flutter/rendering.dart'
void main() {
debugPaintSizeEnabled = true;
runApp();
}