[syncfusion_flutter_gauges] How can I get a radial gradient in a radial gauge.

[rktejesh]

I want the gradient to happen from the center of the circle to the edges. Currently it only allows Sweep Gradient.

Something like this. Thanks!

[sfHariHaraSudhan]

Hi @rktejesh,

In SfRadialGauge, we can apply only a sweep gradient to the RadialAxis. However, we can apply the radial gradient with the help of GaugeAnnotation inside the annotations property. In the GaugeAnnotation, we can provide the custom widget with the radial gradient.

Attached the user guide link and sample browser link below for your reference.
UG https://help.syncfusion.com/flutter/radial-gauge/overview.
SB https://flutter.syncfusion.com/#/radial-gauge/showcase/sleep-tracker.

Kindly refer the code snippet below:

SizedBox(
  width: 500,
  height: 500,
  child: SfRadialGauge(
    axes: <RadialAxis>[
      RadialAxis(
        canScaleToFit: true,
        showLabels: false,
        showTicks: false,
        startAngle: 0,
        endAngle: 360,
        ranges: [
          GaugeRange(
            startValue: 0,
            endValue: 360,
            color: Colors.blue,
          ),
        ],
        annotations: [
          GaugeAnnotation(
            widget: Align(
              alignment: const Alignment(0.5, 0),
              child: Container(
                width: 480,
                height: 480,
                decoration: const BoxDecoration(
                  backgroundBlendMode: BlendMode.darken,
                  gradient: RadialGradient(
                    colors: [
                      Colors.white,
                      Colors.lightBlue,
                      Colors.blue,
                    ],
                  ),
                  shape: BoxShape.circle,
                ),
              ),
            ),
          ),
        ],
      ),
    ],
  ),
),

Snapshot:

Also attached the sample below for your reference.

Regards,
Hari Hara Sudhan. K.

477212.zip

[rktejesh]

Thanks a lot 👍