How to position an image at the top in a stack? - image

Question

So I am trying to have an image at the top followed by a list below it. Intially, the list is contracted. When the list expands, I want it to overlap the image.
Initial Position - here I want the image to be at the top
Final Position - this is correct
The Problem is - If I position the image to the top, the list also moves to the top (in the initial position) which is not what I want. Also, if I use a column to position the image at the top (and the list below it) then the list does not expand all the way up to the top; it stays (and expands) below the image.
#override
Widget build(BuildContext context) {
double maxHeight = MediaQuery.of(context).size.height;
return Scaffold(
//resizeToAvoidBottomInset: false,
//backgroundColor: Color(0xFFd8e3e3),
body: Align(
child: SingleChildScrollView(
//to avoid bottom overflow error
child: Padding(
padding: const EdgeInsets.fromLTRB(5, 20, 5, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Stack(
//fit: StackFit.loose,
//alignment: Alignment.center,
children: [
// Positioned(
// top: 0,
// left: 0,
// right: 0,
Align(
alignment: Alignment(0, -1),
child: Hero(
tag: "imageHero",
child: ClipRRect(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30),
),
child: Image.asset(
'assets/images/punjabi_egg_curry1.jpeg',
//height: screenHeight * 0.3,
//width: double.infinity,
alignment: Alignment.topCenter,
),
),
),
),
// ),
Center(
child: new ClipRect(
child: new BackdropFilter(
filter:
new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: new Card(
color: Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: new Center(
//child: GestureDetector(
//onTap: _updateSize,
child: Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Column(
children: [
AnimatedContainer(
constraints: BoxConstraints(
maxHeight: maxHeight * 0.85),
height: _height,
duration: Duration(milliseconds: 300),
decoration: new BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(20),
//border: Border.all(color: Colors.black),
),
child: Steps(),
),
//),
ElevatedButton(
onPressed: _updateSize,
child: Text(buttonText),
style: ElevatedButton.styleFrom(
padding: EdgeInsets.symmetric(
vertical: 10,
horizontal: 20,
),
primary: kSilver,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(20),
),
onPrimary: Colors.black,
textStyle: TextStyle(
color: Colors.black,
fontSize: 22,
),
),
),
],
),
),
),
),
),
),
),
// ),
],
),
],
),
),
),
),
//),
);
}
}

Answer 1

Wrap that widget with Positioned(top:5, child: // your widget ),

Answer 2

Try below code hope its help to you change your image on your need
Container(
height: 500,
child: Stack(
children: [
Container(
width: 150,
height: 150,
margin: EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage(
'assets/images/cycle.png',
),
),
),
),
Positioned(
top: 120,
left: 0,
right: 0,
child: Container(
height: 100,
child: ListView.builder(
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text("List - $index"),
);
},
),
),
),
],
),
),
Your Result Screen ->