Flutter Circular Progress bar with gap at intervals

Question

I need to create a Circular progress bar with intervals on the outer circle. The progress bar fills the empty spaces when it is tapped.

Circle with gaps at intervals

Completed circle

Answer 1

You can use CustomPainter or ClipPath with Stack

Stack(
  alignment: Alignment.center,
  children: [
    CustomPaint(
      size: const Size(100, 100),
      painter: LoaderPaint(percentage: _sliderValue),
    ),

    /// image widget with size, or may wrap stack with sizedBox
  ],
)

Pain Class

class LoaderPaint extends CustomPainter {
  final double percentage;
  LoaderPaint({
    required this.percentage,
  });

  deg2Rand(double deg) => deg * pi / 180;
  @override
  void paint(Canvas canvas, Size size) {
    final midOffset = Offset(size.width / 2, size.height / 2);

    Paint paint = Paint()..color = Colors.black;

    canvas.drawArc(
      Rect.fromCenter(
        center: midOffset,
        width: size.width * .9,
        height: size.height * .9,
      ),
      deg2Rand(-90),
      deg2Rand(360 * percentage),
      true,
      paint,
    );
  }

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