flutterdartstackflutter-positioned

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


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

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

enter image description here

But instead I have something like this.

enter image description here

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


Solution

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

    enter image description here