In Flutter, how do we achieve this UI using custom paint or a custom clipper?

Question

I want to achieve the attached UI widget using custom paint or any other suitable way around, which should work well across different device sizes. image

Answer 1

You could use Stack with Positioned.fill and Align widget as below:

    Column(
                children: [
                  Stack(
                    clipBehavior: Clip.none,
                    children: [
                      SizedBox(
                        width: 300,
                        height: 200,
                        child: Card(
                          color: Colors.yellow,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(15.0),
                          ),
                        ),
                      ),
                      Positioned.fill(
                        top: -40,
                        child: Align(
                          alignment: Alignment.topCenter,
                          child: Container(
                            width: 100,
                            height: 100,
                            decoration: const BoxDecoration(
                                color: Colors.white, shape: BoxShape.circle),
                            child: Align(
                              alignment: Alignment.center,
                              child: Container(
                                width: 90,
                                height: 90,
                                decoration: const BoxDecoration(
                                    color: Colors.orange, shape: BoxShape.circle),
                                child: const Align(
                                  alignment: Alignment.center,
                                  child: Icon(
                                    Icons.check,
                                    size: 50,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                ],
              ),

Answer 2

Similar approach like Niladri Raychaudhuri with Stack and Positioned but I used Card widget for elevation and Container for border.

Center(
        child: Stack(
          clipBehavior: Clip.none,
          alignment: Alignment.topCenter,
          children: [
            Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20),
              ),
              elevation: 5.0,
              child: Container(
                height: 200,
                width: MediaQuery.of(context).size.width * .75,
                decoration: BoxDecoration(
                  color: Colors.orange.shade100,
                  borderRadius: BorderRadius.circular(20),
                  border: Border.all(color: Colors.orange.shade300)
                ),
              ),
            ),
            Positioned(
              top: -25,
              child: Card(
                color: Colors.white,
                elevation: 5.0,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(100),
                ),
                child: const Padding(
                  padding: EdgeInsets.all(5.0),
                  child: CircleAvatar(
                    backgroundColor: Colors.orangeAccent,
                    radius: 25,
                    child: Icon(Icons.check,size: 35,color: Colors.black,),
                  ),
                ),
              ),
            ),
          ],
        ),
      )