Flutter how to remove space or padding from SfRadialGauge - flutter

Question

I am using SfRadialGauge plugin its working fine but there I am facing 2 issues.
Its showing lot of space on top, if I give height to container the sizes of SfRadialGauge is reducing also the top space I don't want to reduce size I just want to remove the space
Same space in GaugeAnnotation. I have column inside GaugeAnnotation and need to show little on top.
My code
Widget getSemiCircleProgressStyle() {
return Padding(
padding: const EdgeInsets.all(0.0),
child: Container(
child: SfRadialGauge(axes: <RadialAxis>[
RadialAxis(
showLabels: false,
showTicks: false,
startAngle: 180,
canScaleToFit: true,
endAngle: 0,
radiusFactor: 0.8,
axisLineStyle: AxisLineStyle(
thickness: 0.1,
color: const Color.fromARGB(30, 0, 169, 181),
thicknessUnit: GaugeSizeUnit.factor,
cornerStyle: CornerStyle.startCurve,
),
pointers: <GaugePointer>[
RangePointer(
value: 100,
width: 0.1,
sizeUnit: GaugeSizeUnit.factor,
enableAnimation: true,
animationDuration: 100,
animationType: AnimationType.linear,
cornerStyle: CornerStyle.bothCurve)
],
annotations: <GaugeAnnotation>[
GaugeAnnotation(
positionFactor: 0,
widget: Container(
child: Stack(
alignment: Alignment.center,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(0.0),
child: RatingBarIndicator(
rating: 0.2,
itemBuilder: (context, index) => Icon(
Icons.star,
color: Color(0xffF4D03F),
),
itemCount: 1,
itemSize: 45.0,
direction: Axis.vertical,
),
),
RichText(
text: new TextSpan(
// Note: Styles for TextSpans must be explicitly defined.
// Child text spans will inherit styles from parent
style: new TextStyle(
fontSize: 14.0,
color: Colors.black,
),
children: <TextSpan>[
new TextSpan(
text: '2',
style: new TextStyle(
fontSize: 40, fontFamily: 'UbuntuRegular')),
new TextSpan(
text: ' /5',
style: TextStyle(
fontSize: 25,
color: Colors.grey[400],
fontFamily: 'UbuntuRegular')),
],
),
),
Text(
'FIFTEEN DAYS SCORE',
style: TextStyle(
color: Colors.grey[400], fontFamily: 'UbuntuMedium'),
)
],
)
],
),
))
]),
])),
);
}
This is how its look like
I have marked the space with red pen. IF any one can help to reduce these spacing I am stuck on this from a day :(

Answer 1

Been having the same problem too.
I found that the solution is to set :
canScaleToFit: false
But, this only works if you use the default circular gauge. For the semi-circular gauge, it will still left some blank spaces at the bottom.

Answer 2

I had the same problem, I guess I'm late but hopefully this can be useful to others.
Premises
Note. At the moment I can't find a way to have FULL control of this widget's white space. I only have found the following workaround to get rid of the white space above and under the gauge.
The library's devs mentioned two things:
"... For better understanding, say if the container has different width and height (say 300x800), we will always take the lowest dimension (here it is the width) to render the radial gauge ..."
"... We are sorry that we cannot provide any workaround to trim ..."
"... as this is the default rendering behaviour of the Radial gauge, we cannot consider your suggestion as a feature request."
The first statement is really useful, as it enables a workaround (see below).
The second statement.. I disagree, that's not something "impossible" to work around with.
The third statement... well that's just depressing.
Workaround
Thanks to the Flutter DevTools, I noted that the Gauge renders a NeedlePointer Widget, which is the one rendering the cursed white space. As the devs mentioned, the gauge takes as much space as it can in the smallest direction.
This means that as long as you restrict height and width, you should be fine. I don't know in which context your Gauge is, but in mine the following code works great.
return LayoutBuilder(
(context, constraints) => Container(
padding: const EdgeInsets.all(0),
height: constraints.maxWidth / 1.5, // WORKAROUND
child: Column(
children: [
Flexible(
child: SfRadialGauge(...),
),
MaybeSomeLabelsWidgets(),
SomeOtherWidgets(),
],
),
),
);
So, the fundamental part here is the fact that height is restricted and that there's a Flexible Widget that lets the Gauge take minimum space. LayoutBuilder in my case/context is useful just because I wanted to render the plot with a "3x2" feeling.
As a last note, keep the canScaleToFit=true, so that your plot is centered (why is it called canScaleToFit? That's another mistery I guess...).
Let me know if this helps.

Answer 3

A simple workaround is to use the ClipRect widget. The following will discard the top 20% of the SfRadialGuage.
ClipRect(
child: Align(
alignment: Alignment.bottomCenter,
heightFactor: 0.8,
child: SfRadialGauge(...)
)
)