flutter - 如何使这条弧线颤动

Question

我想像这张图片一样工作，里面有圆圈，我该怎么做？

标签： flutterdart

Answer 1

这是你的小部件

       Center(
        child: Container(
          width: 200,
          height: 100,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(bottomLeft: Radius.circular(20.0)),
            gradient: LinearGradient(begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [Color(0xFF9B6EEF), Color(0xFF715ED7)]),
          ),
          child: ClipRect(child: CustomPaint(painter: CirclePainter())),
        ),
      ),

内部环的CustomPainter类

class CirclePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.white10
      ..style = PaintingStyle.stroke
      ..strokeWidth = 25;

    canvas.drawCircle(Offset.zero, 60, paint);
    canvas.drawCircle(Offset(size.width, size.height), 60, paint);
  }

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

结果