Flutter how to remove space or padding from SfRadialGauge

user_8825698 0
Viewed 615

I am using SfRadialGauge plugin its working fine but there I am facing 2 issues.

  1. 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
  2. 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

enter image description here

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 :(

dart flutter
3 Answers

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.

user_155842100

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:

  1. "... 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 ..."
  2. "... We are sorry that we cannot provide any workaround to trim ..."
  3. "... 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.

user_158313160

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(...)
  )
)
user_141039020
Related