如何在颤振中制作多色仪表？

问题描述

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

Image

解决方法

检查这个库：- fl_chart

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

,

你可以使用这个包： 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)
          ],)
    ]
)