How to overlay Widget over background widget in flutter? - flutter

Question

I want to overlay a add to cart button on background restaurants list, Overlay card widget on container explains it can be done by Stack but I tried and still not getting how to do it. Kindly help me to know how can I do it?
Expected Design
Result Image
detailpage.dart
#override
Widget build(BuildContext context) {
return Scaffold(
body: Wrap(
children: <Widget>[
Container(...),
Container(...),
Stack(
children: <Widget>[
Center(
child: MaterialButton(
onPressed: () {},
textColor: Colors.white,
padding: const EdgeInsets.all(0.0),
child: Container(
width: 88,
height: 30,
decoration: BoxDecoration(
color: Color(0xff00D99E),
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
blurRadius: 8,
offset: Offset(0, 15),
color: Color(0xff00D99E).withOpacity(.6),
spreadRadius: -9)
]),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset('assets/icon-chat-notification.png'),
SizedBox(width: 6),
Text("CART",
style: TextStyle(
fontSize: 10,
color: Colors.white,
letterSpacing: 1,
))
],
),
),
),
)
],
)
],
),
bottomNavigationBar: bottomNavigationBar,
);
}

Answer 1

The problem is that your Stack only composes the Button itself instead of the entire view, you use it to put the Text and the Icon on top of the MaterialButton. Side note: that's actually not necessary, you can just put the text and the icon directly into the MaterialButton and get rid of the Stack.
To solve your problem you have to put your button and your List onto the same Stack (your button can still stay a Stack itself but I don't encourage you to do that).
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit: StackFit.expand
children: <Widget>[
Container(...),
// Use Positioned around your List to expand it in all dimensions
Positioned(
bottom: 0,
top: 0,
left: 0,
right: 0,
child: Container(...), // This is your container with the list
)
// Position the button at the bottom
Positioned(
bottom: 0,
child: Stack(...), // This is your button
)
],
),
bottomNavigationBar: bottomNavigationBar,
);
}