边界半径不受影响颤动

Question

我正在尝试将figma ui转换为flutter，椭圆阻止容器减少一个角度的半径。 这是一个figma ui：

我正在尝试的代码：

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

结果给出：

Answer 1

您将

Positioned

小部件显示得离其父级太远，导致 覆盖隐藏容器天使的底层容器 .

您可以使用

LinearGradient

颜色：

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

我认为线性渐变颜色最接近您想要做的事情。

或者您可以使用自己的自定义，重构在这里

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

                          ],
                        ),
                      ),
                    ),
                  ],
                )

            ), 

希望对您有帮助。