Sqaure progress bar with corner radius - flutter

Question

Im trying to build kind of circular squared progress bar in dart/flutter.
maybe someone knows how to make it possible? iv'e tried all, paint, border and more, but without success.
example image - circular squared progress bar

Answer 1

You can try square_percent_indicater package here.
If you want a more customized widget, try CustomPainter:
class _MyBorderPainter extends CustomPainter {
_MyBorderPainter(
{required this.progress, required this.borderColor, this.strokeWdth});
double progress; // desirable value for corners side
double? strokeWdth;
Color borderColor;
#override
void paint(Canvas canvas, Size size) {
double x = min(size.height, size.width);
double x2 = x / 2;
double x4 = x / 4;
Paint paintt = new Paint()
..color = progress == 0 ? Colors.transparent : borderColor
..style = PaintingStyle.stroke
..strokeWidth = strokeWdth ?? 4.0;
// ..strokeCap = StrokeCap.round;
Path path = Path()
..moveTo(x2, x)
..lineTo(x4, x)
..quadraticBezierTo(0, x, 0, x - x4)
..lineTo(0, x4)
..quadraticBezierTo(0, 0, x4, 0)
..lineTo(x - x4, 0)
..quadraticBezierTo(x, 0, x, x4)
..lineTo(x, x - x4)
..quadraticBezierTo(x, x, x - x4, x)
..lineTo(x2, x);
PathMetric pathMetric = path.computeMetrics().first;
Path extractPath = pathMetric.extractPath(
pathMetric.length * (0.5 * (1 - progress)),
pathMetric.length * (0.5 + 0.5 * progress));
canvas.drawPath(extractPath, paintt);
}
#override
bool shouldRepaint(covariant _MyBorderPainter oldDelegate) {
return oldDelegate.progress != progress;
}
}
class SquareProgressBar extends StatelessWidget {
const SquareProgressBar(
{required this.strokeWdth,
required this.borderColor,
this.borderBgColor,
required this.progress,
this.child,
Key? key})
: super(key: key);
final double strokeWdth;
final Color borderColor;
final Color? borderBgColor;
final double progress;
final Widget? child;
#override
Widget build(BuildContext context) {
return CustomPaint(
painter: _MyBorderPainter(
borderColor: borderBgColor ?? Colors.grey,
strokeWdth: strokeWdth,
progress: 1.0),
child: CustomPaint(
painter: _MyBorderPainter(
progress: this.progress,
borderColor: borderColor,
strokeWdth: strokeWdth,
),
child: this.child ?? null,
));
}
}
which results in: