How do they work? : The Stack Widget and The Position Widget - flutter

Question

Please, would you look at the attached screenshot and tell me where that band of off-white is coming from?? (red arrow.)
I want the rounded container to display text right down to the bottom of the screen--any text-overflow will simply be scrolled by the SingleChildScrollView widget, but the container just gets thinner and thinner while that block of grey just stays there??
Been working in Flutter since March of 2018, and Flutter's layout widgets are still a mystery!
Here is the code:
#override
Widget build(BuildContext context) {
return Scaffold(
// primary: false,
appBar: AppBar(
title: I10n.t('Playhouse'),
centerTitle: true,
automaticallyImplyLeading: false,
elevation: 0,
excludeHeaderSemantics: true,
),
endDrawer: const ScrapBookDrawer(),
body: SafeArea(
child: Column(
children: [
/// Submodule Name | Short Description
Row(
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 10, top: 4),
child: Text(
'${widget.subTask['subName']} |',
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
),
),
const Expanded(
child: Padding(
padding: EdgeInsets.only(top: 4),
child: Text(
'Submodule description',
),
),
),
],
),
Stack(
alignment: AlignmentDirectional.topCenter,
children: <Widget>[
/// Large Picture
Container(
height: 500, // double.infinity,
child: Crop(
interactive: false,
backgroundColor: Colors.white,
dimColor: Colors.white,
controller: CropController(),
child: Image.memory(
base64.decode(
con.submodule['image'],
),
),
),
),
Positioned(
left: 0,
right: 0,
top: 300,
/// Rounded Container
child: Container(
height: 500,
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(60),
topRight: Radius.circular(60),
),
color: Colors.white,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
/// Task Name and Number
Padding(
padding: const EdgeInsets.only(top: 30, bottom: 20),
child: Text(
widget.subTask['name'],
style: const TextStyle(
fontWeight: FontWeight.bold,
),
),
),
/// Short Description or Title
Padding(
padding: const EdgeInsets.only(bottom: 20),
child: Text(widget.subTask['short_description']),
),
/// Long Description
Flexible(
flex: 300,
child: SingleChildScrollView(
child: Text(widget.subTask['long_description']),
),
),
],
),
),
)
],
),
],
),
),
);
}

Answer 1

I got rid of the white area by increasing height of the first Container in the Stack. Seems like it is just a default background that's not covered with anything.