如何在颤动中制作多色表？答案

【问题标题】：how to make multi color gauge in flutter?如何在颤动中制作多色表？
【发布时间】：2021-06-14 04:57:27
【问题描述】：

如何在颤振应用中制作这种类型的仪表？

Image

【问题讨论】：

标签： flutter user-interface gauge

【解决方案1】：

检查这个库：- fl_chart

它包含所有图表和图形，您可以根据需要对其进行自定义

【讨论】：

【解决方案2】：

你可以使用这个包： syncfusion_flutter_gauges 然后在你的 dart 文件中导入这个包：

import 'package:syncfusion_flutter_gauges/gauges.dart';

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SfRadialGauge(),
      ),
    );
  }

普通径向滑块要创建一个普通的径向滑块，我们需要禁用 RadialAxis 类中的标签和刻度属性，并根据我们的设计需要在最小和最大属性中设置轴范围值。

要显示 100% 的进度，我们需要将轴的最小值定义为 0，将最大值定义为 100，如下面的代码示例所示。

SfRadialGauge(
    axes: <RadialAxis>[
      RadialAxis(minimum: 0,
          maximum: 100,
          showLabels: false,
          showTicks: false,
          axisLineStyle: AxisLineStyle(
              cornerStyle: CornerStyle.bothCurve,
              color: Colors.white30,
              thickness: 25),
                )
    ]
)

范围指针将是轨道，标记指针将是径向滑块的拇指。您还可以为范围指针设置渐变，如以下代码示例所示。

SfRadialGauge(
    axes: <RadialAxis>[
      RadialAxis(
          pointers: <GaugePointer>[
            RangePointer(
                value: 50,
                cornerStyle: CornerStyle.bothCurve,
                width: 25,
                sizeUnit: GaugeSizeUnit.logicalPixel,
                gradient: const SweepGradient(
                    colors: <Color>[
                      Color(0xFFCC2B5E),
                      Color(0xFF753A88)
                    ],
                    stops: <double>[0.25, 0.75]
                )),
            MarkerPointer(
                value: 50,
                enableDragging: true, 
                markerHeight: 34,
                markerWidth: 34,
                markerType: MarkerType.circle,
                color: Color(0xFF753A88),
                borderWidth: 2,
                borderColor: Colors.white54)
          ],      )
    ]
)

【讨论】：