Dotted Circle with Flutter Canvas (Custom Paint and Custom Painter)

Question

I need to draw a dotted circle with Custom Painter(Flutter) in my school project. How can I draw a dotted circle on Canvas. I only know how to draw solid circle in canvas. Please answer me if you know. Don't skip. Thank you!

I tried and searched on internet and everywhere but I can't find. I hope I will get solutions from StackOverflow.

Answer 1

You said you can paint a filled circle. Painting a dotted circle is very similar. Using a for loop you simply paint a bunch of filled circles that together form the dotted circle. The offset of each individual circle can be determined using basic trigonometry. Code Example:

import 'package:flutter/material.dart';
import "dart:math";

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: CustomPaint(
          size: const Size(
            100,
            100,
          ),
          painter: MyPainter(
            20,
          ),
        ),
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  MyPainter(this.radius);

  final double radius;

  @override
  void paint(Canvas canvas, Size size) {
    final double centerX = size.width / 2;
    final double centerY = size.height / 2;
    final Paint paint = Paint()..color = Colors.black;
    final double filledCircleRadius = 3;
    final int numberOfDots = 10;
    final double radiantStep = 2 * pi / numberOfDots;
    for (int i = 0; i < numberOfDots; i++) {
      canvas.drawCircle(
        Offset(centerX + sin(i * radiantStep) * radius,
            centerY + cos(i * radiantStep) * radius),
        filledCircleRadius,
        paint,
      );
    }
  }

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