如何使用syncfusion_flutter_guage在flutter中绘制自定义仪表

Question

我想使用 #syncfusion_flutter_gauge 包创建自定义仪表，但无法获得所需的输出。

我用以下代码获取当前版本，如下所示：

    SfRadialGauge(
    axes: <RadialAxis>[
  RadialAxis(
    minimum: 0,
    maximum: 1000,
    showTicks: false,
    showLabels: false,
    axisLineStyle: const AxisLineStyle(
      dashArray: [
        75,
        6,
      ],
      thickness: 5,
      gradient: SweepGradient(
      colors: [
        AppColors.redColor,
        AppColors.orangeColor,
        AppColors.yellowColor,
        AppColors.greenColor,
        AppColors.darkGreen,
       ],
     ),
   ),
   canScaleToFit: true,
   startAngle: 170,
   endAngle: 10,
   ranges: <GaugeRange>[
     GaugeRange(
       startValue: 0,
       endValue: 679,
       gradient: SweepGradient(
         colors: [
           AppColors.redColor.withOpacity(0.3),
         ],
       ),
       startWidth: 25,
       endWidth: 25,
     ),
     GaugeRange(
     startValue: 680,
     startWidth: 25,
     endWidth: 25,
     endValue: 718,
     gradient: SweepGradient(
       colors: [
         AppColors.orangeColor.withOpacity(0.3),
       ],
     ),
   ),
   GaugeRange(
     startValue: 719,
     startWidth: 25,
     endWidth: 25,
     gradient: SweepGradient(
       colors: [       
         AppColors.yellowColor.withOpacity(0.3),
       ],
     ),
     endValue: 759,
   ),
   GaugeRange(
     startValue: 760,
     startWidth: 25,
     endWidth: 25,
     endValue: 900,
     gradient: SweepGradient(
       colors: [
         AppColors.greenColor.withOpacity(0.3),
       ],
    ),
  ),
  GaugeRange(
    startValue: 901,
    endValue: 1000,
    startWidth: 25,
    endWidth: 25,
    gradient: SweepGradient(
    colors: [
      AppColors.darkGreen.withOpacity(0.3),
    ],
  ),
 ),
],
  pointers: const <GaugePointer>[
    MarkerPointer(
      value: 90,
      markerType: MarkerType.triangle,
      markerOffset: 17,
      color: AppColors.darkTextColor,
    ),
   ],
  annotations: <GaugeAnnotation>[
 GaugeAnnotation(
   widget: Column(
     mainAxisAlignment: MainAxisAlignment.center,
       children: [
         Text(
           '650',
           style: const TextStyle(
             fontSize: 28,
             fontWeight: FontWeight.bold,
             color: AppColors.darkTextColor,
           ),
         ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Excellent',
              style: AppConstants.semiBold18TextStyle.copyWith(
                fontSize: 10,
                color: AppColors.primaryColor,
              ),
            ),
            const SizedBox(
              width: 4,
            ),
            const Icon(
              Icons.info_outline,
                color: AppColors.primaryColor,
                size: 14,
           )
         ],
       )
     ],
    ),
    angle: 90,
    positionFactor: 0,
                )
            ],
        ),
    ],
),

到目前为止我使用上面的代码所取得的成就：

我想要使用同步融合颤振测量仪包实现的所需输出：

Answer 1

我尽力获得这个值，我希望这是您正在寻找的。

SfRadialGauge(
        backgroundColor: Colors.white,
        axes: <RadialAxis>[
          RadialAxis(
            minimum: 0,
            maximum: 1000,
            startAngle: 170,
            endAngle: 10,
            radiusFactor: 0.95,
            showTicks: false,
            showLabels: false,
            canScaleToFit: true,
            axisLineStyle: const AxisLineStyle(
              thickness: 10,
              color: Colors.white,
            ),
            ranges: <GaugeRange>[
              GaugeRange(
                rangeOffset: -1,
                startValue: 0,
                endValue: 679 - 10, // end value - 10
                startWidth: 10,
                endWidth: 10,
                sizeUnit: GaugeSizeUnit.logicalPixel,
                color: Colors.red,
              ),
              GaugeRange(
                rangeOffset: -1,
                startValue: 680,
                endValue: 718 - 10, // end value - 10
                startWidth: 10,
                endWidth: 10,
                sizeUnit: GaugeSizeUnit.logicalPixel,
                color: Colors.orange,
              ),
              GaugeRange(
                rangeOffset: -1,
                startValue: 719,
                endValue: 759 - 10, // end value - 10,
                startWidth: 10,
                endWidth: 10,
                sizeUnit: GaugeSizeUnit.logicalPixel,
                color: Colors.yellow,
              ),
              GaugeRange(
                rangeOffset: -1,
                startValue: 760,
                endValue: 900 - 10, // end value - 10,
                startWidth: 10,
                endWidth: 10,
                sizeUnit: GaugeSizeUnit.logicalPixel,
                color: Colors.greenAccent,
              ),
              GaugeRange(
                rangeOffset: -1,
                startValue: 901,
                endValue: 1000,
                startWidth: 10,
                endWidth: 10,
                sizeUnit: GaugeSizeUnit.logicalPixel,
                color: Colors.green,
              ),
            ],
          ),
          RadialAxis(
            minimum: 0,
            maximum: 1000,
            startAngle: 170,
            endAngle: 10,
            showTicks: false,
            radiusFactor: 0.90,
            showLabels: false,
            showAxisLine: true,
            canScaleToFit: true,
            axisLineStyle: AxisLineStyle(
              thickness: 40,
              gradient: SweepGradient(
                colors: <Color>[
                  Colors.red.withOpacity(0.30),
                  Colors.orange.withOpacity(0.30),
                  Colors.yellow.withOpacity(0.30),
                  Colors.greenAccent.withOpacity(0.30),
                  Colors.green.withOpacity(0.30),
                ],
                stops: const <double>[0.20, 0.40, 0.60, 0.80, 1.00],
              ),
            ),
            ranges: <GaugeRange>[
              GaugeRange(
                rangeOffset: 5,
                startValue: 0,
                endValue: 679,
                startWidth: 25,
                endWidth: 25,
                sizeUnit: GaugeSizeUnit.factor,
              ),
              GaugeRange(
                rangeOffset: 5,
                startValue: 680,
                endValue: 718,
                startWidth: 25,
                endWidth: 25,
                sizeUnit: GaugeSizeUnit.factor,
              ),
              GaugeRange(
                rangeOffset: 5,
                startWidth: 25,
                endWidth: 25,
                startValue: 719,
                endValue: 759,
                sizeUnit: GaugeSizeUnit.factor,
              ),
              GaugeRange(
                rangeOffset: 5,
                startWidth: 25,
                endWidth: 25,
                startValue: 760,
                endValue: 900,
                sizeUnit: GaugeSizeUnit.factor,
              ),
              GaugeRange(
                rangeOffset: 5,
                startWidth: 25,
                endWidth: 25,
                startValue: 901,
                endValue: 1000,
                sizeUnit: GaugeSizeUnit.factor,
              ),
            ],
            pointers: const <GaugePointer>[
              MarkerPointer(
                value: 500,
                markerType: MarkerType.triangle,
                markerOffset: 07,
                markerWidth: 24,
                markerHeight: 24,
                color: Colors.black87,
              ),
            ],
            annotations: const <GaugeAnnotation>[
              GaugeAnnotation(
                widget: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      '650',
                      style: TextStyle(
                        fontSize: 28,
                        fontWeight: FontWeight.bold,
                        color: Colors.black87,
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(
                          'Excellent',
                          // style: AppConstants.semiBold18TextStyle.copyWith(
                          //   fontSize: 10,
                          //   color: AppColors.primaryColor,
                          // ),
                        ),
                        SizedBox(
                          width: 4,
                        ),
                        Icon(
                          Icons.info_outline,
                          // color: AppColors.primaryColor,
                          size: 14,
                        )
                      ],
                    )
                  ],
                ),
                angle: 90,
                positionFactor: 0,
              )
            ],
          ),
        ],
      )