Flutter how to set container on other container with stack - flutter

Question

I have simple 2 widget is Stack i need to show the second widget on the end of first widget
Some thing like this
Here is my code
Stack(
children: <Widget>[
Container(
padding: EdgeInsets.only(top: statusBarHeight * 0.8),
height: height * 0.4,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/place2.jpg',
),
fit: BoxFit.fill,
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: ClipRRect(
borderRadius: BorderRadius.only(
topRight: Radius.circular(30), topLeft: Radius.circular(30)),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
),
child: Column(
children: <Widget>[
SizedBox(
height: height * 0.03,
),
Container(
height: height * 0.01,
width: width * 0.1,
color: Colors.pink,
),
SizedBox(
height: height * 0.031,
),
Container(
width: width,
margin: EdgeInsets.only(left: 10),
child: Text(
'PLACES',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 30),
),
),
SizedBox(
height: height * 0.02,
),
Places(),
Places(),
Places(),
Places(),
Places(),
],
),
),
),
)
],
),
In this code the second widget overlaps with first widget and cover the whole screen. I just need to show it and the end of first widget

Answer 1

The widget you are looking for is Positioned.
You use it like
Stack(
children: [
//Behind container, fill screen (can also use Positioned.fill)
Positioned(top:0, left: 0, right: 0, bottom: 0, child: Container()),
//Front most container, aligned bottom, full width
Positioned(left: 0, right: 0, bottom: 0, child: Container()),
]
)

Answer 2

you are doing correctly but because of Column widget size you are got getting your desire output.
You can give mainAxisSize to MainAxisSize.min, so it will only take space which that widget require.
child: Column(
mainAxisSize: MainAxisSize.min, // added line
children: <Widget>[
if Your widget size if big and then also you want same behaviour then you can give height to container and wrap column with SingleChildScrollView.

Answer 3

Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
height: 200,
width: double.infinity,
child: Text("Text"),
),
Container(
height: MediaQuery.of(context).size.height * 0.7,
decoration: BoxDecoration(
color: primaryColor,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(35),
topRight: Radius.circular(35))),
),
],
),
setting the MainAxisAlignment of Column to MainAxisAlignment.end pushed the container at bottom and gave me the results i wanted.