fluttersyncfusiongaugeradianssyncfusion-chart
how to make this type gauge in flutter with dynamic section
return SfRadialGauge(
title: GaugeTitle(
text: 'Speedometer',
textStyle:
const TextStyle(fontSize: 14.0, fontWeight: FontWeight.bold)),
axes: <RadialAxis>[
RadialAxis(
minimum: 0,
maximum: 320,
startAngle: 180,
endAngle: 0,
// showLabels: false,
maximumLabels: 320,
onLabelCreated: _handleLabelCreated,
canRotateLabels: true,
labelsPosition: ElementsPosition.outside,
ticksPosition: ElementsPosition.outside,
showTicks: false,
radiusFactor: 1.1,
axisLineStyle: AxisLineStyle(
thickness: 5,
dashArray: <double>[(320+100) / 5, 3],
// color: Color(0xFF66BB6A)
gradient: SweepGradient(colors: <Color>[
Color(0xFFE7627D),
Color(0xFF231557),
Color(0xFF44107A),
Color(0xFFFF1361),
Color(0xFFFFF800),
], stops: <double>[
0,
100,
190,
240,
320
])
),
/* ranges: <GaugeRange>[
GaugeRange(
startValue: 0,
endValue: 100,
color: Colors.green,
),
GaugeRange(
startValue: 100,
endValue: 210,
color: Colors.orange,
),
GaugeRange(
startValue: 210,
endValue: 320,
color: Colors.red,
)
],*/
annotations: <GaugeAnnotation>[
GaugeAnnotation(
angle: 180,
horizontalAlignment: GaugeAlignment.near,
positionFactor: 0.78,
verticalAlignment: GaugeAlignment.near,
widget: Text(
"0",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 14,
),
)),
GaugeAnnotation(
angle: 0,
horizontalAlignment: GaugeAlignment.far,
positionFactor: 0.85,
verticalAlignment: GaugeAlignment.near,
widget: Text(
"320",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 14,
),
)),
GaugeAnnotation(
axisValue: 100,
positionFactor: 0.5,
angle: 90,
widget: Column(children: [
Center(
child: RichText(
textAlign: TextAlign.center,
text: TextSpan(
text: '223\n',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 30,
),
children: [
TextSpan(
text: 'Points earned this month',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.normal,
fontSize: 12,
),
)
],
)),
)
]))
],
pointers: <GaugePointer>[
MarkerPointer(
value: 223,
markerHeight: 15,
markerWidth: 15,
enableDragging: true,
overlayRadius: 12,
borderColor: Colors.green,
borderWidth: 2,
color: Colors.white,
markerType: MarkerType.circle)
],
)
]);
void _handleLabelCreated(AxisLabelCreatedArgs args) {
if (args.text == '30') {
args.text = '£0 - £4';
} else if (args.text == '100') {
args.text = '£4 - £8';
} else if (args.text == '165') {
args.text = '£8 - £12';
} else if (args.text == '235') {
args.text = '£12 - £16';
} else if (args.text == '290') {
args.text = '£16 - £20';
} else {
args.text = '';
}
I have to develop this type of UI using plugin.but there is some point remaining like color we are not achieve after pointer and how equally segment divided and how responsive for all device that need to check.
I have done below part from my side and remaining thing need to add that i mention .So suggest me how can i achieve . 
Solution
Your requirement can be achieved with help of the ranges property, MarkerPointer onValueChanging callback in the SfRadialGauge. Added _buildRanges method to find the segment length based on the max value and return the list of the GaugeRange, and added _buildGaugeRange method to create GaugeRange based on the given start, end, and _pointerValue value. The minimum value to the marker range is considered an active range, and the maximum value to the marker range is considered an inactive range in the _buildGaugeRange method. The GaugeRange is colored based on the active and inactive range.
We have prepared and shared a code snippet below for your reference.
class _MyHomePageState extends State<MyHomePage> {
double _pointerValue = 256;
int _segmentsCount = 5;
late List<LabelDetails> _labels;
@override
void initState() {
_labels = [];
_calculateLabelsPosition();
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
SfRadialGauge(
title: const GaugeTitle(
text: 'Speedometer',
textStyle:
TextStyle(fontSize: 14.0, fontWeight: FontWeight.bold)),
axes: <RadialAxis>[
RadialAxis(
minimum: 0,
maximum: 320,
startAngle: 180,
endAngle: 0,
maximumLabels: 320,
canScaleToFit: true,
interval: 1,
onLabelCreated: _handleLabelCreated,
canRotateLabels: true,
labelsPosition: ElementsPosition.outside,
showTicks: false,
radiusFactor: 1.1,
pointers: <GaugePointer>[
MarkerPointer(
onValueChanging: (dynamic args) {
setState(() {
_pointerValue = args.value;
});
},
value: _pointerValue,
enableDragging: true,
color: Colors.white,
borderColor: Colors.green,
borderWidth: 3,
markerType: MarkerType.circle,
markerHeight: 15,
markerWidth: 15,
overlayRadius: 0,
)
],
ranges: _buildRanges(),
annotations: <GaugeAnnotation>[
const GaugeAnnotation(
angle: 180,
horizontalAlignment: GaugeAlignment.far,
positionFactor: 0.75,
verticalAlignment: GaugeAlignment.near,
widget: Padding(
padding: EdgeInsets.only(top: 5),
child: Text(
"0",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 14,
),
),
)),
const GaugeAnnotation(
angle: 0,
horizontalAlignment: GaugeAlignment.far,
positionFactor: 0.85,
verticalAlignment: GaugeAlignment.near,
widget: Padding(
padding: EdgeInsets.only(top: 5),
child: Text(
"320",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 14,
),
),
)),
GaugeAnnotation(
widget:
Column(mainAxisSize: MainAxisSize.min, children: [
Center(
child: RichText(
textAlign: TextAlign.center,
text: TextSpan(
text: '${_pointerValue.round()}\n',
style: const TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 30,
),
children: const [
TextSpan(
text: 'Points earned this month',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.normal,
fontSize: 12,
),
)
],
)),
)
]))
],
),
]),
ElevatedButton(
onPressed: () {
setState(() {
_segmentsCount = 7;
_calculateLabelsPosition();
});
},
child: const Text('Update Segment count'))
],
),
);
}
void _calculateLabelsPosition() {
_labels.clear();
// Length of the each segment.
double segmentLength = 320 / _segmentsCount;
double start = segmentLength / 2;
for (int i = 0; i < _segmentsCount; i++) {
_labels.add(LabelDetails(start.toInt(), '£${i * 4} - £${(i + 1) * 4}'));
start += segmentLength;
}
}
void _handleLabelCreated(AxisLabelCreatedArgs args) {
for (int i = 0; i < _segmentsCount; i++) {
LabelDetails details = _labels[i];
if (details.labelPoint == int.parse(args.text)) {
args.text = details.customizedLabel;
return;
}
}
args.text = '';
}
// Return the list of gauge range
List<GaugeRange> _buildRanges() {
List<GaugeRange> ranges = [];
// Gap value between two range
int gap = 2;
// Length of the each segment without gap.
double segmentLength =
(320 - ((_segmentsCount - 1) * gap)) / _segmentsCount;
double start = 0;
for (int i = 0; i < _segmentsCount; i++) {
_buildGaugeRange(start, start + segmentLength, ranges);
start += segmentLength + gap;
}
return ranges;
}
// Method to create a GaugeRange based on start, end and pointerValue and assigned
// color based on active and inactive range.
void _buildGaugeRange(double start, double end, List<GaugeRange> ranges) {
if (_pointerValue >= start && _pointerValue <= end) {
ranges.add(GaugeRange(
startValue: start, endValue: _pointerValue, color: Colors.green));
ranges.add(GaugeRange(
startValue: _pointerValue,
endValue: end,
color: const Color.fromARGB(255, 82, 86, 97),
));
} else if (_pointerValue >= end) {
ranges.add(GaugeRange(
startValue: start,
endValue: end,
color: Colors.green,
));
} else {
ranges.add(GaugeRange(
startValue: start,
endValue: end,
color: const Color.fromARGB(255, 82, 86, 97),
));
}
}
}
class LabelDetails {
LabelDetails(this.labelPoint, this.customizedLabel);
int labelPoint;
String customizedLabel;
}
Screenshot:
- Did `dartdoc` drop support for generating markdown documentation? If yes, is there an alternative solution?
- Target debug_ios_bundle_flutter_assets failed:
- Connect from ios device to localhost
- Firebase App Check error in Flutter's Android Release Builds
- FirebaseCommandException: An error occured on the Firebase CLI when attempting to run a command
- How to use FreezedUnionCase.snake for model class
- How to test Flutter widgets on different screen sizes?
- CMake error while running flutter desktop application
- how do i resolve, "Lexical or Preprocessor Issue (Xcode): Flutter/Flutter.h' file not found"?
- how to show list of dropdown from botton in flutter
- Flutter Doctor results
- Why my flutter app works in debug mode but not after release
- How to disable default Widget splash effect in Flutter?
- Flutter: Downloading failed always using flutter_downlaoder
- Flutter riverpod: 'Bad State No ProvderScope found' after using navigator
- Flutter onTap method for Containers
- how to add an icon in Dismissible in flutter?
- Ignoring No file or variants found for asset in pubspec.yaml
- how to solve Execution failed for task ':app:compileFlutterBuildDebug'
- Flutter didChangeAppLifecycleState is not working
- Dart/Flutter linter rule: the type to index a map should be the key type of map?
- Flutter returns null for AppLocalization.of(context)
- Error Regarding undefined method `map' for nil:NilClass for Flutter App / CocoaPod Error
- Hovering over menu items on a ListTile highlights the list item that contains it and does not go away
- Flutter Stripe Web with PaymentElement instead of PaymentSheet
- How does the Flutter framework handle asynchronous programming,
- How can I refresh data immediately after updating it in flutter?
- Error with go_router while doing a phone auth with Firebase on iOS
- How to pin TextField in SliverAppBar while Scrolling in Flutter?
- Why won't my Flutter web app debug open in the browser?