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

CodePudding user response：

Move the Positioned widget into the Stack

CodePudding user response：

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,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }