Flutter 自定义虚线进度条
实现效果
//使用
DotProgressWidget(
progress: Progress(
backgroundColor: Colors.grey,
value: 0.8,
width: 300,
color: Colors.green,
strokeWidth: 8
),
//实现代码
import 'package:flutter/material.dart';
class DotProgressWidget extends StatefulWidget {
final Progress progress;
DotProgressWidget({Key key, this.progress}) : super(key: key);
@override
_DotProgressWidgetState createState() => _DotProgressWidgetState();
}
///信息描述类 [value]为进度，在0~1之间,进度条颜色[color]，
///未完成的颜色[backgroundColor],线宽[strokeWidth]
///小点的个数[dotCount]，进度条宽度[width]
class Progress {
double value;
Color color;
Color backgroundColor;
double width;
double strokeWidth;
int dotCount;
Progress(
{this.value,
this.color,
this.backgroundColor,
this.width,
this.strokeWidth,
this.dotCount = 30});
}
class _DotProgressWidgetState extends State<DotProgressWidget> {
@override
Widget build(BuildContext context) {
var progress = Container(
width: widget.progress.width,
height: widget.progress.strokeWidth,
child: CustomPaint(
painter: ProgressPainter(widget.progress),
),
);
return Stack(
alignment: Alignment.center,
children: <Widget>[progress],
);
}
}
class ProgressPainter extends CustomPainter {
Progress _progress;
Paint _paint;
ProgressPainter(
this._progress,
) {
_paint = Paint();
}
@override
void paint(Canvas canvas, Size size) {
// Rect rect = Offset.zero & size;
// canvas.clipRect(rect); //裁剪区域
drawProgress(canvas);
}
void drawProgress(Canvas canvas) {
canvas.save();
int num = _progress.dotCount;
double gap = _progress.width / (_progress.dotCount);
Offset currentPoint = Offset(0, 0);
for (double i = 0; i < num; i++) {
canvas.save();
_paint
..strokeWidth = _progress.strokeWidth
..color = _progress.backgroundColor
..strokeCap = StrokeCap.round;
if (i < _progress.value * num) {
_paint..color = _progress.color;
}
double toSiteX = currentPoint.dx;
canvas.drawLine(
currentPoint, Offset(toSiteX, _progress.strokeWidth), _paint);
currentPoint = Offset(
currentPoint.dx + gap,
currentPoint.dy,
);
canvas.restore();
}
canvas.restore();
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
