使用flutter做仪表盘(桌面端)

前言

最近收到一个需求，需要使用flutter 来做一个仪表盘，这可难倒我了，毕竟我是做前端的，flutter 之前接触的也少，但没办法，既然需求有了，也得硬着头皮上了，先来看看做的效果。

一、准备环境

使用flutter 之前需要配置一下环境，这个可以百度一下就知道了，或者查询官网，因为是做桌面端，所以要找到对应的章节。

二、创建组件

这边把宽度，高度，最大值，最小值 ，进度数值都做成输入参数类型，具体代码截图如下：

根据进度值不同，展示不同的颜色的代码：

_paint
      ..color = HColor.hexColor(0x2D4158)
      ..strokeWidth = _strokeSize - 10;
    canvas.drawArc(rect1, _toRadius(-180), _toRadius(180), false, _paint);

    var baseNum = 16 / 6;
    var color1 = Colors.white;
    if (0 < progress && progress <= baseNum) {
      color1 = HColor.hexColor(0x009FE8);
    } else if (progress > baseNum && progress <= 2 * baseNum) {
      color1 = HColor.hexColor(0x40FB09);
    } else if (progress > 2 * baseNum && progress <= 3 * baseNum) {
      color1 = HColor.hexColor(0xFBEB09);
    } else if (progress > 3 * baseNum && progress <= 4 * baseNum) {
      color1 = HColor.hexColor(0xF66B00);
    } else if (progress > 4 * baseNum && progress <= 5 * baseNum) {
      color1 = HColor.hexColor(0xE80075);
    } else if (progress > 4 * baseNum && progress <= 5 * baseNum) {
      color1 = HColor.hexColor(0xE80075);
    } else if (progress > 5 * baseNum && progress <= 6 * baseNum) {
      color1 = HColor.hexColor(0xFF0000);
    }

这边具体的视线逻辑就不在这边一一详细解释了。

三、如何使用

直接引入对应的组件，然后使用即可，例如 这边输入了10，看到的效果图如下：

总结

如需项目demo，微信扫下面的二维码，注册成功，到下面的我的-联系客服 问我要代码