I want to overlay container to 1st one container in Stack. But when doing, it works but when I give to height first one it just take this height and second container just stuck and didn't take full height.
I want this but "THIS IS MY TEXT" container should take full height but it won't?

But when I use fit : StackFit.expand. It does work what I want but first one got behind it.

Here's my code
double topHeightPadding = MediaQuery.of(context).padding.top;
double heightForStack = (MediaQuery.of(context).size.height - 90);
return Scaffold(
body: Stack(
fit : StackFit.expand,
children: <Widget>[
Container(
height: topHeightPadding + 120,
decoration: const BoxDecoration(
color: Color(0xFF141D38),
),
child: const Center(
child: Text(
"SOMETEXT.COM",
style: TextStyle(color: Colors.white),
textScaleFactor: 1.4,
)),
),
Positioned(
top: topHeightPadding + 90,
left: 0.1,
right: 0.1,
bottom: 0,
child: Container(
width: MediaQuery.of(context).size.width,
height: heightForStack,
decoration: const BoxDecoration(
// color: Colors.red,
color: Color(0xFFFFFFFF),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(35),
topRight: Radius.circular(35)),
boxShadow: [
BoxShadow(
color: Color(0xE6808080),
spreadRadius: 5,
blurRadius: 5,
offset: Offset(0, 2),
),
],
),
child: const Center(
child: Text('THIS IS MY TEXT')
),
))
],
),
);
I just got how to do it by Adding one more container with height double.infinity.
Code:
double topHeightPadding = MediaQuery.of(context).padding.top;
double heightForStack = (MediaQuery.of(context).size.height - 90);
return Scaffold(
body: Stack(
// fit : StackFit.expand,
children: <Widget>[
Container(height: double.infinity,),
Container(
height: topHeightPadding + 120,
decoration: const BoxDecoration(
color: Color(0xFF141D38),
),
child: const Center(
child: Text(
"SOMETEXT.COM",
style: TextStyle(color: Colors.white),
textScaleFactor: 1.4,
)),
),
Positioned(
top: topHeightPadding + 90,
left: 0.1,
right: 0.1,
bottom: 0,
child: Container(
width: MediaQuery.of(context).size.width,
height: heightForStack,
decoration: const BoxDecoration(
// color: Colors.red,
color: Color(0xFFFFFFFF),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(35),
topRight: Radius.circular(35)),
boxShadow: [
BoxShadow(
color: Color(0xE6808080),
spreadRadius: 5,
blurRadius: 5,
offset: Offset(0, 2),
),
],
),
child: const Center(
child: Text('THIS IS MY TEXT')
),
))
],
),
);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With