Search code examples
flutterdartstack

Why are my Positioned widgets not showing up outside Stack?


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,

app screenshot

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(),
            ),
          ),
        ),
);

Solution

  • 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,
     )