要创建具有负边距一半面积的CIRCLES

Question

下面是图像。我想以与图片中相同的方式创建圆圈。我应该使用哪个小部件来创建Image中给定的圆？enter image description here

Answer 1

图像看起来像是一个初始屏幕。如果是这种情况，请使用以下指令：Adding a splash screen to your mobile app。

如果您确实需要像这些圆圈一样的widget，我建议您使用CustomPaint。它为您提供了功能强大的Canvas API，可让您以所需的任何方式基本绘制任何内容。

不要忘记将其包装到ClipRect小部件中，否则圆圈可能会溢出而导致渲染错误。

Answer 2

您可以创建自己的CustomPaint并根据需要绘制圆圈

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Material(child: MyWidget())
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint( //This accepts a custompaint in the painter parameter
      painter: CircleBackground(),
      size: MediaQuery.of(context).size,
      child: Align(
        alignment: Alignment.bottomCenter,
        child: Padding(
          padding: EdgeInsets.only(bottom: 12),
          child: Text('Let\'s achieve your targets together!', style: TextStyle(fontSize: 18, color: Colors.black))
        )
      )
    );
  }
}


//This is where you draw your customPaint
class CircleBackground extends CustomPainter {

  @override
  void paint(Canvas canvas, Size size) {
    Paint outerCircle = Paint()..color = Colors.grey[700]..style = PaintingStyle.fill;
    Paint middleCircle = Paint()..color = Colors.yellow..style = PaintingStyle.fill;
    Paint innerCirle = Paint()..color = Colors.orange..style = PaintingStyle.fill;
    canvas
      ..drawColor(Colors.white, BlendMode.screen) //the color of the background
      ..drawCircle(Offset(size.width/8, 40), size.width * 1.1, outerCircle)
      ..drawCircle(Offset(size.width/8, 40), size.width * 0.85, middleCircle)
      ..drawCircle(Offset(size.width/8, 40), size.width / 2, innerCirle);
    /*
    You can test different Offset to move the center of the circle, 
    drawCircle receives the offset of the center, the radius as a double and 
    the paint object where you can define color, stroke line, etc
    */
  }

  @override
  bool shouldRepaint(CircleBackground oldDelegate) => false;
}