Flutter: How do I create a semicircle on top of this widget
111
I think you would find this answer helpful:
It creates a semi-circle using CustomPainter widget. Now, to place it on top of of you widget (SfRadialGauge) I think you could wrap that widget and the semi-circle with Stack widget.
Author by
noosh
Updated on January 05, 2023Comments
-
noosh 10 months
import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_gauges/gauges.dart'; class CreditScoreGauge extends StatelessWidget { @override Widget build(BuildContext context) { return Container( margin: const EdgeInsets.all(20), child: SfRadialGauge( axes: <RadialAxis>[ RadialAxis( showLabels: false, showTicks: false, minimum: 300, maximum: 850, startAngle: 180, endAngle: 0, axisLineStyle: const AxisLineStyle( thickness: 0.12, cornerStyle: CornerStyle.bothCurve, thicknessUnit: GaugeSizeUnit.factor, color: Colors.blueAccent, gradient: SweepGradient(colors: <Color>[ Color(0xffa2c9e1), Color(0xff62769D), Color(0xff354F81), Color(0Xff1B3568), Color(0xff122345), ], stops: <double>[ 0, 0.35, 0.7, 0.8, 1.0 ]), ), pointers: const <GaugePointer>[ MarkerPointer( value: 600, markerHeight: 25, markerWidth: 25, markerType: MarkerType.circle, enableDragging: true, color: Color.fromARGB(0, 3, 168, 244), borderWidth: 7, elevation: 10, borderColor: Color.fromARGB(255, 255, 255, 255)), ], ), ], ), ); } }
This is my my widget using 'syncfusion_flutter_gauges: ^20.1.59' dependency that displays the following gauge:
And my desired goal is the following:
I want to add the semi circle depicted in the picture but I am having trouble with it. Can anybody help?