How can I position widget (problem with Positioned and Stack Widget)?

Question

I've got a problem with Stack and Positioned widget.

I'm trying to do something like this (picture below).

But instead I have something like this.

How can I move this mid rectangle up, to have divide screen in half like on first picture.

My code below:

return Scaffold(
      backgroundColor: Colors.cyan,
      body: SingleChildScrollView(
        child: Column(
          children: [
            Stack(
              children: [
                Container(
                  decoration: const BoxDecoration(
                    color: Colors.amber,
                    borderRadius: BorderRadius.vertical(
                      bottom: Radius.circular(20),
                    ),
                  ),
                  height: MediaQuery.of(context).size.height * 0.55,
                ),
              ],
            ),
            Positioned(
              bottom: 100,
              child: Card(
                child: Container(
                  height: 100,
                  width: MediaQuery.of(context).size.width - 80,
                  color: Colors.red,
                ),
              ),
            ),
          ],
        ),
      ),
    );

Thanks for help

Answer 1

There are few things, you need to stack children top to bottom and the UI will render bottom to top. Play with this widget for now.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.cyan,
      body: LayoutBuilder(
        builder: (context, constraints) => SingleChildScrollView(
          child: Column(
            children: [
              SizedBox(
                height: constraints.maxHeight * .6 + 70, //70 for bottom
                child: Stack(
                  children: [
                    Positioned(
                      top: 0,
                      bottom: 70, // to shift little up
                      left: 0,
                      right: 0,
                      child: Container(
                        decoration: const BoxDecoration(
                          color: Colors.amber,
                          borderRadius: BorderRadius.vertical(
                            bottom: Radius.circular(20),
                          ),
                        ),
                        width: constraints.maxWidth,
                        height: constraints.maxHeight * 0.6,
                      ),
                    ),
                    Positioned(
                      top: constraints.maxHeight * .4,
                      height: 400,
                      left: 10,
                      right: 10,
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(24),
                        child: Card(
                          child: Container(
                            color: Colors.red,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

Answer 2

Move the Positioned widget into the Stack