[-Flutter 自定义组件-] 圆形进度条

 

 

 

 

void main() => runApp(MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter 之旅"),
        ),
        body: TestStateful() //内置案例
    )
));

1.准备阶段

1.1:定义描述对象类Progress

将需要变化的属性抽离出一个描述类，传参方便些

///信息描述类 [value]为进度，在0~1之间,进度条颜色[color]，
///未完成的颜色[backgroundColor],圆的半径[radius],线宽[strokeWidth]
///小点的个数[dotCount] 样式[style] 完成后的显示文字[completeText]
class Progress {
  double value;
  Color color;
  Color backgroundColor;
  double radius;
  double strokeWidth;
  int dotCount;
  TextStyle style;
  String completeText;

  Progress({this.value,
      this.color,
      this.backgroundColor,
      this.radius,
      this.strokeWidth,
      this.completeText="OK",
       this.style,
      this.dotCount = 40
      });
}

---

1.2:自定义组件类CircleProgressWidget

这便是我们的组件

class CircleProgressWidget extends StatefulWidget {
  final Progress progress;
  CircleProgressWidget({Key key, this.progress}) : super(key: key);
  @override
  _CircleProgressWidgetState createState() => _CircleProgressWidgetState();
}

class _CircleProgressWidgetState extends State<CircleProgressWidget> {
  @override
  Widget build(BuildContext context) {
  
    return Container();
  }
}

---

1.3：自定义ProgressPainter

我们的绘制逻辑在这里进行

class ProgressPainter extends CustomPainter {
  Progress _progress;
  Paint _paint;
  Paint _arrowPaint;//箭头的画笔
  Path _arrowPath;//箭头的路径
  double _radius;//半径

  ProgressPainter(
    this._progress,
  ) {
    _arrowPath=Path();
    _arrowPaint=Paint();
    _paint = Paint();
    _radius = _progress.radius - _progress.strokeWidth / 2;
  }

  @