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

sinnoorc
April 29, 2023
351 views
0 votes
2 Answers

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

Answers

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

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

Please signup or login to give your own answer.

Click here to cancel reply.