Closed Afroz-Shaikh closed 1 year ago
I think haveing the indicator number in between will make more sense to prove its working
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
@Afroz-Shaikh Hi, Can you also try to add multiple guages in the list and see all are working fine ?
@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
It still doesn't work for me. Could you please share a full working example?
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
I tried it on the main and even on Afroz-Shaikh:fix-243-interactivity-problem branch, but it doesn't work.
Can you try 'flutter clean' and 'flutter pub get' once ?
Also it would be great if you can post the pubspec.ymal here Let's see if you are targeting correct deps
I ran 'flutter clean' and 'flutter pub get'.
geekyants_flutter_gauges:
git:
url: https://github.com/GeekyAnts/GaugesFlutter.git
ref: main
Am I doing something wrong?
I din got time to check it yet I will do it and update you soon
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
And what about ShapePointers?
@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?
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.
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;
}
}
}
Is There any specific Widget you are using that's causing it not to work on your end ? @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
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
I have this problem as well. The ShapePointer interactivity doesn't work properly in a ListView.
@Afroz-Shaikh Can you reproduce this issue? https://github.com/GeekyAnts/GaugesFlutter/pull/244#issuecomment-1682355932
Has anyone been able to resolve this issue?
Changes
https://github.com/GeekyAnts/GaugesFlutter/assets/50929682/11b090a8-1ecb-4c43-85b4-dc11b00816da