syncfusion_flutter_gauges: ^26.1.40 slider to max and min too difficulty

[korea1501541730]

Bug description

slider to 100 and 700 is too difficulty, can you help me fix it?

SfRadialGauge( axes: [ RadialAxis( minimum: 100, maximum: 700, // startAngle: 120, // endAngle: 60, showLabels: false, showTicks: false, axisLineStyle: AxisLineStyle( thickness: 4, color: AppColors.colorF6F6F6, thicknessUnit: GaugeSizeUnit.logicalPixel, ), pointers: [ RangePointer( value: widget.device.outputCurrent.toDouble(), width: 6, sizeUnit: GaugeSizeUnit.logicalPixel, color: AppColors.titleColor, cornerStyle: CornerStyle.bothCurve, ), MarkerPointer( value: widget.device.outputCurrent.toDouble(), markerType: MarkerType.circle, color: AppColors.titleColor, borderColor: AppColors.color8F8F8F, borderWidth: 4, enableDragging: true, markerWidth: 20, markerHeight: 20, onValueChanged: (value) { setState(() { widget.device.outputCurrent = value.toInt(); print('onValueChanged $value'); }); }, onValueChangeEnd: (value) { setState(() { widget.device.outputCurrent = value.toInt(); print('onValueChangeEnd $value'); }); }, ), ], ), ], )

Steps to reproduce

slider to 100 and 700 is too difficulty, can you help to fix it?

Code sample

Code sample

```dart [Add your code here] ```

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Stack Traces

Stack Traces

```dart [Add the Stack Traces here] ```

syncfusion_flutter_gauges: ^26.1.40

On which target platforms have you observed this bug?

Android, iOS

Flutter Doctor output

Doctor output

```console [Add your output here] ```

syncfusion_flutter_gauges: ^26.1.40

[PreethikaSelvam]

Hi @korea1501541730,

We have checked your query and attempted to replicate the reported issue with your code snippet. Unfortunately, we were unable to reproduce any issues 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 and provide us with more details regarding the specific scenario in which you are encountering this issue. This will help us to assist you more effectively.

Regards,

Preethika Selvam. gh1967.zip

[korea1501541730]

SfRadialGauge( axes: [ RadialAxis( minimum: 100, maximum: 700, startAngle: 120, endAngle: 60, showLabels: false, showTicks: false, axisLineStyle: AxisLineStyle( thickness: 4, color: AppColors.colorF6F6F6, thicknessUnit: GaugeSizeUnit.logicalPixel, ), pointers: [ RangePointer( value: widget.device.outputCurrent.toDouble(), width: 6, sizeUnit: GaugeSizeUnit.logicalPixel, color: AppColors.titleColor, cornerStyle: CornerStyle.bothCurve, ), MarkerPointer( value: widget.device.outputCurrent.toDouble(), markerType: MarkerType.circle, color: AppColors.titleColor, borderColor: AppColors.color8F8F8F, borderWidth: 4, enableDragging: true, markerWidth: 20, markerHeight: 20, onValueChanged: (value) { setState(() { widget.device.outputCurrent = value.toInt(); print('onValueChanged $value'); }); }, onValueChangeEnd: (value) { setState(() { widget.device.outputCurrent = value.toInt(); print('onValueChangeEnd $value'); }); }, ), ], ), ], )

add code startAngle: 120, endAngle: 60, slider to max and min too difficulty

[PreethikaSelvam]

Hi @korea1501541730,

We have checked with the startAngle as 120 and endAngle as 60 and it is working fine as expected, we have shared a screen recording for your reference, 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 and provide us with more details along with screenshots/screen recordings so that it will help us assist you in a better way.

Output:

https://github.com/user-attachments/assets/457aae95-e3e0-4c2b-a442-ee782fa104a6

Regards,

Preethika Selvam. gh1967.zip

[korea1501541730]

slider to min or max but current value is not min or max ，you can print the current value

[PreethikaSelvam]

Hi @korea1501541730,

We have analyzed your query and replicated the reported issue when the pointer cornerStyle is set to bothCurve. To resolve this issue, we suggest using the cornerStyle as bothFlat and rounding the values obtained in the onValueChanged callback. Below, we have shared a modified code snippet and sample for your reference.

Output:

https://github.com/user-attachments/assets/c5e24984-b28e-4428-a221-15ec8f15dd2e

Code Snippet:

Device device = Device(outputCurrent: 350);

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: const Text('SfRadialGauge Example'),

      ),

      body: Center(

        child: SfRadialGauge(

          axes: [

            RadialAxis(

minimum: 100,

              maximum: 700,

              startAngle: 120,

              endAngle: 60,

              showLabels: false,

              showTicks: false,

              axisLineStyle: AxisLineStyle(

                thickness: 4,

                color: Colors.grey[300]!,

                thicknessUnit: GaugeSizeUnit.logicalPixel,

              ),

              pointers: [

                RangePointer(

                  value: device.outputCurrent.toDouble(),

                  width: 6,

                  sizeUnit: GaugeSizeUnit.logicalPixel,

                  color: Colors.blue,

                ),

                MarkerPointer(

                  value: device.outputCurrent.toDouble(),

                  markerType: MarkerType.circle,

                  color: Colors.blue,

                  borderColor: Colors.grey,

                  borderWidth: 4,

                  enableDragging: true,

                  markerWidth: 20,

                  markerHeight: 20,

                  onValueChanged: (value) {

                    setState(() {

                      device.outputCurrent = value.round();

                    });

                  },

                ),

              ],

              annotations: <GaugeAnnotation>[

                GaugeAnnotation(

                  widget: Text(

                    '${device.outputCurrent}',

                    style: const TextStyle(

                      fontSize: 25,

                      fontWeight: FontWeight.bold,

                    ),

                  ),

                  positionFactor: 0.1,

                  angle: 90,

                ),

              ],

            ),

          ],

        ),

      ),

    );

  }

}

class Device {

  int outputCurrent;

  Device({required this.outputCurrent});

}

Please let us know if you need any further assistance.

Regards,

Preethika Selvam. gh1967 (2).zip

[korea1501541730]

minimum: 500, maximum: 1050, startAngle: 120, endAngle: 60,

only slider to 1045 or 501 ，can not work fine

[PreethikaSelvam]

Hi @korea1501541730,

As per the previous update, we were able to replicate the reported issue when the pointer cornerStyle is set to bothCurve. However, we were unable to reproduce the issue when using the cornerStyle set to bothFlat and rounding the values obtained in the onValueChanged callback. We have shared a modified code snippet based on the values you provided.

If you continue to experience the issue after following our suggestions, we kindly request you to try to replicate the reported issue in the below attached test sample, along with screen recordings. This will help us assist you more effectively.

Code Snippet:

class _MyHomePageState extends State<MyHomePage> {
  Device device = Device(outputCurrent: 700);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SfRadialGauge(
          axes: [
            RadialAxis(
              minimum: 500,
              maximum: 1050,
              startAngle: 120,
              endAngle: 60,
              showLabels: false,
              showTicks: false,
              axisLineStyle: AxisLineStyle(
                thickness: 4,
                color: Colors.grey[300]!,
                thicknessUnit: GaugeSizeUnit.logicalPixel,
              ),
              pointers: [
                RangePointer(
                  value: device.outputCurrent.toDouble(),
                  width: 10,
                  sizeUnit: GaugeSizeUnit.logicalPixel,
                  color: Colors.blue,
                  cornerStyle: CornerStyle.bothFlat,
                ),
                MarkerPointer(
                  value: device.outputCurrent.toDouble(),
                  markerType: MarkerType.circle,
                  color: Colors.blue,
                  borderColor: Colors.grey,
                  borderWidth: 4,
                  enableDragging: true,
                  markerWidth: 20,
                  markerHeight: 20,
                  onValueChanged: (value) {
                    setState(() {
                      device.outputCurrent = value.round();
                    });
                  },
                ),
              ],
              annotations: <GaugeAnnotation>[
                GaugeAnnotation(
                  widget: Text(
                    '${device.outputCurrent}',
                    style: const TextStyle(
                      fontSize: 25,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  positionFactor: 0.1,
                  angle: 90,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class Device {
  int outputCurrent;

  Device({required this.outputCurrent});
}

Output:

Regards, Preethika Selvam. gh1967.zip

[korea1501541730]

thanks for your help  i hava use the code ，but in iphone is also not fix  ///videos  https://youtube.com/shorts/tHNXFRz7n5E?feature=share

------------------ 原始邮件 ------------------ 发件人: "syncfusion/flutter-widgets" @.>; 发送时间: 2024年9月2日(星期一) 下午5:12 @.>; @.**@.>; 主题: Re: [syncfusion/flutter-widgets] syncfusion_flutter_gauges: ^26.1.40 slider to max and min too difficulty (Issue #1967)

Hi @korea1501541730,

As per the previous update, we were able to replicate the reported issue when the pointer cornerStyle is set to bothCurve. However, we were unable to reproduce the issue when using the cornerStyle set to bothFlat and rounding the values obtained in the onValueChanged callback. We have shared a modified code snippet based on the values you provided.

If you continue to experience the issue after following our suggestions, we kindly request you to try to replicate the reported issue in the below attached test sample, along with screen recordings. This will help us assist you more effectively.

Code Snippet: class _MyHomePageState extends State<MyHomePage> { Device device = Device(outputCurrent: 700); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: SfRadialGauge( axes: [ RadialAxis( minimum: 500, maximum: 1050, startAngle: 120, endAngle: 60, showLabels: false, showTicks: false, axisLineStyle: AxisLineStyle( thickness: 4, color: Colors.grey[300]!, thicknessUnit: GaugeSizeUnit.logicalPixel, ), pointers: [ RangePointer( value: device.outputCurrent.toDouble(), width: 10, sizeUnit: GaugeSizeUnit.logicalPixel, color: Colors.blue, cornerStyle: CornerStyle.bothFlat, ), MarkerPointer( value: device.outputCurrent.toDouble(), markerType: MarkerType.circle, color: Colors.blue, borderColor: Colors.grey, borderWidth: 4, enableDragging: true, markerWidth: 20, markerHeight: 20, onValueChanged: (value) { setState(() { device.outputCurrent = value.round(); }); }, ), ], annotations: <GaugeAnnotation>[ GaugeAnnotation( widget: Text( '${device.outputCurrent}', style: const TextStyle( fontSize: 25, fontWeight: FontWeight.bold, ), ), positionFactor: 0.1, angle: 90, ), ], ), ], ), ), ); } } class Device { int outputCurrent; Device({required this.outputCurrent}); }
Output: gh_1967-ezgif.com-video-to-gif-converter.gif (view on web)

Regards, Preethika Selvam. gh1967.zip

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

[PreethikaSelvam]

Hi @korea1501541730,

We have analyzed your query and we have considered it as an improvement and logged a feature request to ‘improve the pointer accuracy at minimum and maximum range boundaries in SfRadialGauge' in our feedback portal.

Feedback link: Improve pointer accuracy at minimum and maximum range boundaries in Radial Gauge

We will prioritize the features of every release based on demand and priority. So, this both features will be available in any of our upcoming releases. You can also track the status of these features with the feedback links shared above.

Regards, Preethika Selvam.