CODEWITHSUNDEEP
flutterflutter-layoutflutter-animation
Obinna Aguwa
Obinna Aguwa

Reputation: 40

Flutter Circular Progress bar with gap at intervals

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

Circle with gaps at intervals

Completed circle

Completed circle

Upvotes: 1

Views: 1141

Answers (1)

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63594

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;
  }
}

Upvotes: 1

Related Questions