如何解决如何在颤振中制作多色仪表?
如何在Flutter应用中制作这种类型的仪表?
解决方法
检查这个库:- 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)
],)
]
)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。