How To Implement this Marked part in flutter?

Question

I am learning flutter for couple of months and i am struggling in this type of ui design. Can you body help me to implement this kind of design? I have tried using stack but it is not working. How can i float a container in a container?

Answer 1

Try stack like below in your code. Give container's height as your need.

 Stack(alignment: Alignment.topCenter, children: [
      Container(
        height: MediaQuery.of(context).size.height,
        color: Colors.pinkAccent,
        child: Align(
          alignment: Alignment.topCenter,
          child: Container(
            height: MediaQuery.of(context).size.height / 2.5,
            color: Colors.orange,
          ),
        ),
      ),
      Container(
        margin: EdgeInsets.only(top: MediaQuery.of(context).size.height / 3.5),
        height: MediaQuery.of(context).size.height / 6.5,
        child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: 5,
            itemBuilder: (context, index) {
              return Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.only(topRight: Radius.circular(50), topLeft: Radius.circular(5))),
                  width: 100,
                  height: 100,
                ),
              );
            }),
      ),
    ])