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;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.