border radius unaffected flutter

Question

I'm trying to convert figma ui into flutter, the ellipse prevent the container to reduce the radius on one angle. here is a figma ui:

The code I'm trying:

child: Container(
                  decoration: BoxDecoration(
                    boxShadow: [
                      BoxShadow(
                        color: Color(0x40000000),
                        spreadRadius: 4.0,
                        blurRadius: 4.0,
                        offset: Offset(-5.0, 4.0),
                      ),
                    ],
                    borderRadius: BorderRadius.all(Radius.circular(15.0)),
                  ),
                  alignment: Alignment.center,

                  child: Stack(
                    children: [
                      Positioned(
                        top: -92.26,
                        left: -117.71,
                        child: Container(
                          height: 183.47,
                          width: 170.36,
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            boxShadow: [
                              BoxShadow(
                                blurRadius: 100,
                                spreadRadius: 6,
                                color: Color.fromARGB(255, 125, 223, 247),
                              ),
                              
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ),

The result is giving:

Answer 1

Positioned widget is displayed too far from its parent stack which leads to cover the underlying container and its topLeft angel .

you can use LinearGradient color:

    Container(
         
                width: 200,
                height: 200,
                decoration: BoxDecoration(
                
                borderRadius: BorderRadius.circular(20),
                  gradient: LinearGradient(
                  
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    stops:[
                      .2,1,
                    ],
                  colors:[
                    Colors.cyan, // choose your colors
                    Colors.grey.shade800,
                  ]
                  )
                )
              )

I think Linear gradient color is most closely to what your are trying to do.

or you can use your own customization, refactored here

Container(
                width: 200,
                height: 200,
                decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                      color: Color(0x40000000),
                      spreadRadius: 4.0,
                      blurRadius: 4.0,
                      offset: Offset(-5.0, 4.0),
                    ),
                  ],
                  borderRadius: BorderRadius.all(Radius.circular(15.0)),
                ),


                child: Stack(
                  children: [
                    Positioned(

                      child: Container(
                        height: 100,
                        width: 100,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.only(topRight: Radius.circular(20), bottomRight: Radius.circular(100)),
                          boxShadow: [
                            BoxShadow(
                              blurRadius: 30,
                              spreadRadius: 6,
                              color: Color.fromARGB(255, 125, 223, 247),
                            ),

                          ],
                        ),
                      ),
                    ),
                  ],
                )

            ), 

result:

Hope it helps you.