你可以试试square_percent_indicater
包裹here https://pub.dev/packages/square_percent_indicater.
如果您想要更加自定义的小部件,请尝试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,
));
}
}
结果是: