颤振拉环答案

【问题标题】：Flutter Draw Ring颤振拉环
【发布时间】：2021-03-23 15:05:04
【问题描述】：

请问我正在尝试在 Flutter 中使用自定义绘制绘制一个环，有没有关于如何实现它的想法？

当我试图像这样实现它但它不被接受，因为我需要阴影更专业：

Stack(
                    alignment: Alignment.center,
                    children: [
                      Container(
                        height: 180,
                        decoration: BoxDecoration(
                          color: Colors.white,
                          shape: BoxShape.circle,
                          boxShadow: [
                            BoxShadow(
                                color: Colors.black.withOpacity(0.2),
                                blurRadius: 2,
                                spreadRadius: 1,
                                offset: Offset(0, 2)),
                          ],
                        ),
                      ),
                      Container(
                        height: 150,
                        decoration: BoxDecoration(
                          color: Colors.white,
                          shape: BoxShape.circle,
                          boxShadow: [
                            BoxShadow(
                                color: Colors.black.withOpacity(0.2),
                                blurRadius: 2,
                                spreadRadius: 1,
                                offset: Offset(0, 2)),
                          ],
                        ),
                      ),
                    ],
                  ),

【问题讨论】：

可以和我们分享一下，你的结果图（结果图）你想要吗？

标签： flutter

【解决方案1】：

是的，使用自定义绘画可以轻松完成。

class MyHome extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
        body: Center(
          child: Container(
            height:200,
            width:200,
            child:CustomPaint(
            painter:RingPainter(),
            ),
          ),
        ),
    );
  } 
}
class RingPainter extends CustomPainter{
  @override
  void paint(Canvas canvas, Size size) {
    double height=size.height;
    double width=size.width;
    //Paint to draw ring shape    
    Paint paint=Paint()..color=Colors.green..strokeWidth=16.0
      ..style=PaintingStyle.stroke..strokeCap=StrokeCap.round;
    
    //defining Center of Box
    Offset center=Offset(width/2,height/2);
    //defining radius
    double radius=min(width/2,height/2);
    canvas.drawCircle(center,radius,paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
  
}

【讨论】：