I'm trying to use Stack()
in my scaffold
but when the blue container
ends, the rest of the Positioned
widgets (out of the Stack
widget) are not visible. Neither is the one in the middle (which is half visible) Like so,
How can I get these widgets to render in my app? Here's my code:
Scaffold(
body: Stack(
children: [
Container(
height: 450,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment(-0.00, -1.00),
end: Alignment(0, 1),
colors: [Color(0xFF03A4EC), Color(0xFF0467C5)],
),
),
child: Stack(
children: [
Positioned(),
Positioned(),
Positioned(),
Positioned(
left: 20,
top: 378,
child: Container(
height: 171,
width: 350,
padding: const EdgeInsets.all(20),
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
color: const Color(0xFFFDFDFD),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
shadows: const [
BoxShadow(
color: Color(0x26000000),
blurRadius: 20,
offset: Offset(0, -1),
spreadRadius: -7,
)
],
),
child: Column(),
),
),
],
),
],
Positioned(
left: 20,
top: 684,
child: Container(
width: 335,
height: 298,
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
color: Color(0xFFFDFDFD),
shape: RoundedRectangleBorder(
side: BorderSide(width: 0.50, color: Color(0xFFEFEFEF)),
borderRadius: BorderRadius.circular(12),
),
),
child:Container(),
),
),
),
);
The default clipBehavior
of the stack is
this.clipBehavior = Clip.hardEdge,
You can use Clip.none,
to make widgets visible outside the Stack area.
Stack(
clipBehavior: Clip.none,
)