how to make multi color gauge in flutter? - flutter

Question

How to make this type of gauge in flutter application?
Image

Answer 1

check this library :- fl_chart
it has all the charts and graph and you can customise it as you want

Answer 2

you can use this package :
syncfusion_flutter_gauges
then import this package in your dart file:
import 'package:syncfusion_flutter_gauges/gauges.dart';
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(),
),
);
}
Normal radial slider
To create a normal radial slider, we need to disable the labels and ticks properties in the RadialAxis class and set the axis range values in the minimum and maximum properties based on our design needs.
To show 100 percent progress, we need to define the axis’s minimum value as 0 and maximum value as 100 as in the following code example.
SfRadialGauge(
axes: <RadialAxis>[
RadialAxis(minimum: 0,
maximum: 100,
showLabels: false,
showTicks: false,
axisLineStyle: AxisLineStyle(
cornerStyle: CornerStyle.bothCurve,
color: Colors.white30,
thickness: 25),
)
]
)
The range pointer will be the track and the marker pointer will be the thumb for the radial slider. You can also set a gradient for the range pointer as shown in the following code example.
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)
], )
]
)