how to achieve custom guage using syncfusion package

[ahmed ashraf]

 I want to create a custom gauge using #syncfusion_flutter_gauge package but couldn't get the desired output.

Following code I used to get the current version as shown bellow:

    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,
                )
            ],
        ),
    ],
),
I have achieved the following so far
​ 
I want to achieve the following:
 ​

[Aswini Suresh Reddy]

Hi ahmed ashraf,

 

We have analyzed your requirement on our end and successfully achieved it using multiple GaugeRange in the ranges property. We have attached the sample below for your reference. 

 

Please check and get back to us if your require further assistance. 

 

Regards, 

Aswini.

Attachment: fm_194313_211fe74a.zip