FIX: Shape & Needle Pointer Interactivity ListView

[Afroz-Shaikh]

Changes

• Fixed an issue where Shape Pointer & Needle Pointers were not interactive in ListViews

https://github.com/GeekyAnts/GaugesFlutter/assets/50929682/11b090a8-1ecb-4c43-85b4-dc11b00816da

[hasnentai]

I think haveing the indicator number in between will make more sense to prove its working

[Afroz-Shaikh]

I think haveing the indicator number in between will make more sense to prove its working

Sure @hasnentai,

https://github.com/GeekyAnts/GaugesFlutter/assets/50929682/e47621ff-8ce0-4fff-be9a-bb80787b245d

[hasnentai]

@Afroz-Shaikh Hi, Can you also try to add multiple guages in the list and see all are working fine ?

[Afroz-Shaikh]

@Afroz-Shaikh Hi, Can you also try to add multiple guages in the list and see all are working fine ?

Yes, @hasnentai I checked it, ListViews were the main thing causing the problem!!

https://github.com/GeekyAnts/GaugesFlutter/assets/50929682/0c393498-206c-431d-ae9c-1b98e4154c4a

[crissCM]

It still doesn't work for me. Could you please share a full working example?

[hasnentai]

We haven't released it yet but merged it into a master You can use master branch for now We will update you once we release it

[crissCM]

I tried it on the main and even on Afroz-Shaikh:fix-243-interactivity-problem branch, but it doesn't work.

[hasnentai]

Can you try 'flutter clean' and 'flutter pub get' once ?

[hasnentai]

Also it would be great if you can post the pubspec.ymal here Let's see if you are targeting correct deps

[crissCM]

I ran 'flutter clean' and 'flutter pub get'.

  geekyants_flutter_gauges:
    git:
      url: https://github.com/GeekyAnts/GaugesFlutter.git
      ref: main

[crissCM]

Am I doing something wrong?

[hasnentai]

I din got time to check it yet I will do it and update you soon

[hasnentai]

hi @crissCM

Here is the example https://github.com/GeekyAnts/GaugesFlutter/issues/243#issuecomment-1680223772

make sure you drag your pointer from the center of the needle . Drag from the edge is not working

[crissCM]

And what about ShapePointers?

[crissCM]

@Afroz-Shaikh In your video example the ShapePointer interactivity works flawlessly within a ListView. That's exactly what I need right now. How did you make it work like that?

[hasnentai]

Hi @Afroz-Shaikh Please post the example here @crissCM Please take a look at showcase app of Radial Gauge

https://gauges-showcase.vercel.app/radial

Check the Air purifier Example.

[Afroz-Shaikh]

Hi @crissCM , The ShapePointer works fine on my end, I've attached the code below

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

  @override
  State<TemperatureController> createState() => _TemperatureControllerState();
}

class _TemperatureControllerState extends State<TemperatureController> {
  double value = 10;
  double value2 = 30;
  double value3 = 50;

  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    return Scaffold(
      backgroundColor: Colors.black,
      // backgroundColor: Colors.black,
      body: ListView(
        children: [
          Stack(
            children: [
              Center(
                child: CircleAvatar(
                  radius: 150,
                  backgroundColor: const Color.fromARGB(255, 24, 24, 24),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(
                        "${value2.round().toString()}°",
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 20,
                          color: getColor(value2),
                        ),
                      ),
                      const Text(
                        "Temp in °C",
                        style: TextStyle(color: Colors.grey),
                      )
                    ],
                  ),
                ),
              ),
              Center(
                child: RadialGauge(
                  radiusFactor: 0.9,
                  track: RadialTrack(
                    startAngle: 0,
                    endAngle: 360,
                    hideTrack: false,
                    thickness: 50,
                    color: const Color(0xff282828),
                    start: 0,
                    trackStyle: TrackStyle(
                        showFirstLabel: false,
                        showLastLabel: true,
                        showLabel: false,
                        secondaryRulerPerInterval: 10,
                        primaryRulerColor: getColor(value2),
                        primaryRulersHeight: 20,
                        secondaryRulersHeight: 20,
                        primaryRulersWidth: 2,
                        secondaryRulersWidth: 2,
                        rulersOffset: -60,
                        // primaryRulersWidth: 5,
                        secondaryRulerColor: getColor(value2)),
                    end: 100,
                  ),
                  shapePointer: [
                    RadialShapePointer(
                      value: value2,
                      isInteractive: true,
                      color: Colors.white,
                      width: 14,
                      onChanged: (value) async {
                        setState(() {
                          value2 = value;
                        });
                      },
                    ),
                  ],
                  valueBar: const [
                    RadialValueBar(
                      value: 200,
                      valueBarThickness: 30,
                      gradient: LinearGradient(colors: [
                        Color(0xff212121),
                        Color(0xff212121),
                        Color(0xff212121)
                      ]),
                      radialOffset: -55,
                      color: Color(0xff424443),
                    ),
                  ],
                ),
              ),
            ],
          ),
          Stack(
            children: [
              Center(
                child: CircleAvatar(
                  radius: 150,
                  backgroundColor: const Color.fromARGB(255, 24, 24, 24),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        "${value.round().toString()}°",
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 30,
                          color: getColor(value),
                        ),
                      ),
                      const Text(
                        "Temp in °C",
                        style: TextStyle(color: Colors.grey),
                      )
                    ],
                  ),
                ),
              ),
              Center(
                child: RadialGauge(
                  radiusFactor: 0.9,
                  track: RadialTrack(
                    startAngle: 0,
                    endAngle: 360,
                    hideTrack: false,
                    thickness: 50,
                    color: const Color(0xff282828),
                    start: 0,
                    trackStyle: TrackStyle(
                        showFirstLabel: false,
                        showLastLabel: true,
                        showLabel: false,
                        secondaryRulerPerInterval: 10,
                        primaryRulerColor: getColor(value),
                        primaryRulersHeight: 20,
                        secondaryRulersHeight: 20,
                        primaryRulersWidth: 2,
                        secondaryRulersWidth: 2,
                        rulersOffset: -60,
                        // primaryRulersWidth: 5,
                        secondaryRulerColor: getColor(value)),
                    end: 100,
                  ),
                  shapePointer: [
                    RadialShapePointer(
                      value: value,
                      isInteractive: true,
                      color: Colors.white,
                      width: 14,
                      onChanged: (value) async {
                        setState(() {
                          this.value = value;
                        });
                      },
                    ),
                  ],
                  valueBar: const [
                    RadialValueBar(
                      value: 200,
                      valueBarThickness: 30,
                      gradient: LinearGradient(colors: [
                        Color(0xff212121),
                        Color(0xff212121),
                        Color(0xff212121)
                      ]),
                      radialOffset: -55,

                      color: Color(0xff424443),

                      // valueBarThickness: 100,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  getColor(double value) {
    if (value < 20) {
      return Colors.blueAccent;
    } else if (value < 40) {
      return Colors.blue;
    } else if (value < 60) {
      return Colors.orange;
    } else {
      return Colors.red;
    }
  }
}

[Afroz-Shaikh]

Is There any specific Widget you are using that's causing it not to work on your end ? @crissCM

[crissCM]

I experience some weird behaviour. Usually It works perfectly for a few tries but then just stops interacting for good. I attached my sample project. I got rid of every possible widgets that can break things, but this problem keeps happening. And it's really inconsistent for me. Sometimes it works for a few tries, sometimes not even for the first try. If you try to run this project, do you experience the same?

https://github.com/GeekyAnts/GaugesFlutter/assets/78145538/8dce5774-b06f-49b1-b029-d44e26356ed2

test.zip

Flutter Doctor: Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel stable, 3.10.6, on Microsoft Windows [Version 10.0.19045.3324], 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) ! 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) [√] Android Studio (version 2022.3) [√] VS Code (version 1.81.1) [√] Connected device (4 available) [√] Network resources

[edmgithub]

I have this problem as well. The ShapePointer interactivity doesn't work properly in a ListView.

[crissCM]

@Afroz-Shaikh Can you reproduce this issue? https://github.com/GeekyAnts/GaugesFlutter/pull/244#issuecomment-1682355932

[somodikrisztian1]

Has anyone been able to resolve this issue?