syncfusion/flutter-examples

SfRadialGauge has a white space

lxy8228535 opened this issue · 4 comments

use SfRadialGauge, when I set startAngle and endAngle to 270, a white space appears. when I set endAngle less than 270, such as 269.9, everything works fine. The code is as follows.

SizedBox( height: _size, width: _size, child: SfRadialGauge( axes: <RadialAxis>[ RadialAxis( radiusFactor: 0.85, axisLineStyle: const AxisLineStyle( color: Color.fromRGBO(41, 118, 246, 1), thickness: 0.24, thicknessUnit: GaugeSizeUnit.factor), showLabels: false, showTicks: false, startAngle: 270, endAngle: 270, pointers: <GaugePointer>[ RangePointer( pointerOffset: 0.065, width: 0.1, value: _value4, cornerStyle: CornerStyle.bothCurve, color: const Color.fromRGBO(254, 166, 25, 1), sizeUnit: GaugeSizeUnit.factor), MarkerPointer( value: _markerValue4, // elevation: 5, color: const Color.fromRGBO(254, 166, 25, 1), markerHeight: 15, onValueChanged: handleFifthPointerValueChanged, onValueChangeEnd: handleFifthPointerValueChanged, onValueChanging: handleFifthPointerValueChanging, enableDragging: true, markerWidth: 15, markerType: MarkerType.circle, borderColor: const Color.fromRGBO(34, 144, 199, 0.75)) ], annotations: <GaugeAnnotation>[ GaugeAnnotation( widget: Text( _annotationValue4, style: TextStyle( fontSize: _annotationFontSize, fontFamily: 'Times', fontWeight: FontWeight.bold, ), ), positionFactor: 0.1, angle: 90) ]) ], ), );

the effect is as follows

image

Hi @lxy8228535 ,

We have validated your query at our end, and we have prepared a sample with given code except the onValueChangeEnd and onValueChanging callback codes. Gauges is working fine without any whitespace issue, please find the screenshot below.

image

Unfortunately, we are not able to reproduce the reported issue as we are not exactly sure on what scenario the issue is replicating. So, we kindly request you to try to replicate the reported issue in the below attached test sample with replication procedure and revert us so that it will help us assist you in a better way.

Regards,
Lavanya A.
Gauges_537747.zip

Hi @LavanyaGowtham2021
Thanks for your help, but when I run the Gauges_537747.zip project, the same problem occurs. This problem only occurs on iOS, on Android everything works fine.
image

When I set the width and height of the sizedbox <= 300, it is not problem.
image

Hi @lxy8228535,

We can reproduce the reported issue. The issue is replicated because the Flutter Framework uses an impeller rendering engine for iOS by default. Disabling the impeller by following the steps mentioned in the link below can resolve your issue.

Link: https://docs.flutter.dev/perf/impeller#ios

Kindly get back to us if you have further queries. We are always happy to assist you.

Regards,

Preethika Selvam.

Hi @lxy8228535,

We can reproduce the reported issue. The issue is replicated because the Flutter Framework uses an impeller rendering engine for iOS by default. Disabling the impeller by following the steps mentioned in the link below can resolve your issue.

Link: https://docs.flutter.dev/perf/impeller#ios

Kindly get back to us if you have further queries. We are always happy to assist you.

Regards,

Preethika Selvam.

@LavanyaGowtham2021
Thank you very much for your help. This problem has been solved. Best wishes.