Bottom Overflowed by Infinite Pixels by using Stack inside Column - flutter

Question

I am using a stack widget to display animations inside a screen. I am using only 70% of the screen and the rest I have kept it unused. I want to display something else there. When I am wrapping my stack widget inside a column it is giving the error: Bottom Overflowed by Infinite Pixels.
I tried adding a custom height using Container and SizedBox. Also tried using SingleChildScrollView. Still the same error.
Code:
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: whiteColor,
body: Column(
children: [
Stack(
children: <Widget>[
SizedBox(
height: MediaQuery.of(context).size.height * 0.72,
child: FlareActor(
'assets/videos/stars.flr',
alignment: Alignment.center,
fit: BoxFit.cover,
animation: 'Blink',
controller: _controller,
),
),
Container(
child: Transform.scale(
scale: 0.6,
child: FlareActor(
'assets/videos/talking-earth.flr',
alignment: Alignment.center,
fit: BoxFit.cover,
animation: 'activated',
controller: _controller,
),
),
),
Positioned(
left: MediaQuery.of(context).size.width / 3.8,
top: MediaQuery.of(context).size.width / 10,
child: Text(
"Published",
style: GoogleFonts.ptSansNarrow(
color: whiteColor,
fontSize: ScreenUtil().setSp(50),
fontWeight: FontWeight.bold),
),
),
],
),
Text("Test"),
],
),
);
}
}

Answer 1

You need to wrap your stack with a Container first, setting a predefined height. This is because the Stack size relies on its parent.
Here's the official documentation on Stack: https://api.flutter.dev/flutter/widgets/Stack-class.html