Interactivity problem

[crissCM]

Gauge is not interactive when the parent widget is a ListView If you take the Temperature Controller showcase example and encapsulate the Stack widget in a ListView, the gauge stops being interactive. You won't be able to drag the RadialShapePointer properly.

To Reproduce Steps to reproduce the behavior:

1. Use the code of the Temperature Controller example from https://gauges-showcase.vercel.app
2. Put the Stack widget in a ListView widget.
3. Try to drag the gauge pointer.
4. It won't move properly, because the ListView takes the focus away.

Expected behavior The gauge should remain fully interactive even if it's in a scrollable view.

Additional context https://github.com/GeekyAnts/GaugesFlutter/assets/78145538/a96b41d7-17d2-4274-8bf7-d5f3f318b698

Flutter Doctor

[√] Flutter (Channel stable, 3.10.6, on Microsoft Windows [Version 10.0.19045.3208], locale hu-HU)
[√] Windows Version (Installed version of Windows is version 10 or higher)
[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[X] Visual Studio - develop for Windows
    X Visual Studio not installed; this is necessary for Windows development.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components
[√] Android Studio (version 2022.2)
[√] VS Code (version 1.80.2)
[√] Connected device (3 available)
[√] Network resources

[hasnentai]

@crissCM Thanks for reporting the issue we are able to reproduce and we will be sending patch soon

[Afroz-Shaikh]

Thanks for the report! A #PR has been raised for the same!

[hasnentai]

I still see this issue is there even on master @Afroz-Shaikh . Its very random and I have to always drag it from center of the needle @crissCM Here is the code snippet which is working partially for me

import 'package:flutter/material.dart';
import 'package:geekyants_flutter_gauges/geekyants_flutter_gauges.dart';

void main() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: RadialGaugeExample(),
    ),
  );
}

///
/// The following code  is a Simple Example of [LinearGauge] Widget.
/// You can customize the [LinearGauge] Widget as per your need.
///
class LinearGaugeExample extends StatefulWidget {
  const LinearGaugeExample({Key? key}) : super(key: key);

  @override
  State<LinearGaugeExample> createState() => _LinearGaugeExampleState();
}

class _LinearGaugeExampleState extends State<LinearGaugeExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: LinearGauge(
          gaugeOrientation: GaugeOrientation.horizontal,
          enableGaugeAnimation: true,
          rulers: RulerStyle(
            rulerPosition: RulerPosition.bottom,
          ),
          pointers: const [
            Pointer(
              value: 50,
              shape: PointerShape.circle,
            ),
          ],
        ),
      ),
    );
  }
}

///
/// The following code  is a Simple Example of [RadialGauge] Widget.
/// You can customize the [RadialGauge] Widget as per your need.
///

class RadialGaugeExample extends StatefulWidget {
  const RadialGaugeExample({super.key});

  @override
  State<RadialGaugeExample> createState() => _RadialGaugeExampleState();
}

class _RadialGaugeExampleState extends State<RadialGaugeExample> {

  double value = 30;

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      backgroundColor: Colors.white,
      body: ListView(
        children: [
          RadialGauge(
            track: const RadialTrack(
                color: Colors.grey,
                start: 0,
                end: 100,
                trackStyle: TrackStyle(
                    showLastLabel: false,
                    secondaryRulerColor: Colors.grey,
                    secondaryRulerPerInterval: 3)),
            needlePointer: [
              NeedlePointer(
                value: value,
                color: Colors.red,

                tailColor: Colors.black,
                onChanged: (val){
                  setState(() {
                    value = val;
                  });
                },

                isInteractive: true,
                needleStyle: NeedleStyle.flatNeedle,
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Video

Recording 2023-08-16 142357.zip

[Afroz-Shaikh]

@hasnentai in your case the issue is with the Shape of the GaugeNeedle, The path doesn't correctly add upto the tip of the Needle, Except the tip of the needle it would work fine for rest of the Areas. You can try by changing needleStyle: NeedleStyle.gaugeNeedle This is happening because of the BorderRadius of the plainNeedle

[Afroz-Shaikh]

@crissCM , I have identified the problem

• Green Denotes the path that is receiving the hit test.
• Red is the Needle. This issue occurs because of the path of the plainNeedle and its corner Radius.