Flutter show 2 widget in Stack widget

Question

I have 2 widget i need to show it in stack widget here iw what i want

My code is this

child: Stack(
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(top: statusBarHeight * 0.8),
            height: height * 0.4,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage(
                  'assets/images/place2.jpg',
                ),
                fit: BoxFit.fill,
              ),
            ),
          ),
          ClipRRect(
            borderRadius: BorderRadius.only(
                topRight: Radius.circular(30), topLeft: Radius.circular(30)),
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  SizedBox(
                    height: height * 0.03,
                  ),
                  Container(
                    height: height * 0.01,
                    width: width * 0.1,
                    color: Colors.pink,
                  ),
                  SizedBox(
                    height: height * 0.031,
                  ),
                  Container(
                    width: width,
                    margin: EdgeInsets.only(left: 10),
                    child: Text(
                      'PLACES',
                      textAlign: TextAlign.left,
                      style: TextStyle(fontSize: 30),
                    ),
                  ),
                  SizedBox(
                    height: height * 0.02,
                  ),
                  Places(),
                  Places(),
                  Places(),
                  Places(),
                  Places(),
                ],
              ),
            ),
          )



        ],
      ),

As in code i have 2 widget Container and ClipRRect in Stack widget but it's not giving me expected output its showing just a second widget ClipRRect on the whole screen and container is behind that widget i think.

If i wrap the ClipRRect widget with align and set the alignment: Alignment.bottomCenter, its showing this output

Dont know why both widget are overlapping each other

Answer 1

Stack widget add things with order, it add your container first then your other widget on it, I thing the problem is your second widget has size of whole screen height and cover other widget, so you can set a height for it and align it bottom center so your container can be show as you want.

Below code can give an idea I hope.

Edited answer with padding and scroll over first widget:

 Stack(
      children: <Widget>[
        Container(
          height: height * 0.4,
          child: Placeholder(),
          ),
        SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.only(top: height * 0.4),
            child: ClipRRect(
              borderRadius: BorderRadius.only(
                  topRight: Radius.circular(30), topLeft: Radius.circular(30)),
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                ),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    SizedBox(
                      height: height * 0.03,
                    ),
                    Container(
                      height: height * 0.01,
                      width: width * 0.1,
                      color: Colors.pink,
                    ),
                    SizedBox(
                      height: height * 0.031,
                    ),
                    Container(
                      width: width,
                      margin: EdgeInsets.only(left: 10),
                      child: Text(
                        'PLACES',
                        textAlign: TextAlign.left,
                        style: TextStyle(fontSize: 30),
                      ),
                    ),
                    SizedBox(
                      height: height * 0.02,
                    ),
                    Placeholder(fallbackHeight: 140, fallbackWidth: width,),
                    Placeholder(fallbackHeight: 140, fallbackWidth: width,),
                    Placeholder(fallbackHeight: 140, fallbackWidth: width,),
                    Placeholder(fallbackHeight: 140, fallbackWidth: width,),
                    Placeholder(fallbackHeight: 140, fallbackWidth: width,),
                  ],
                ),
              ),
            ),
          ),
        )
      ],
    ),

If you want you can change place of SingleChildScrollView to Padding on ClipRRect, just it's up to your choice.