Merge pull request #239 from Afroz-Shaikh/fix-transform

[FEAT]: Interactivity for Needle & Shape Pointer

CHANGELOG.md

@@ -1,3 +1,18 @@
+## 1.0.2
+
+**Features**
+
+- Support for Multiple Needle Pointers
+- Support for Multiple Shape Pointers
+- Interactivity for Needle Pointers in `RadialGauge`
+- Interactivity for Shape Pointers in `RadialGauge`
+
+**Fixes**
+
+- More control over positioning `RadialGauge`
+- Refactored `RadialGauge`
+- More control over styling of `NeedlePointer`
+
 ## 1.0.1
 
 **Fixes**

README.md

@@ -30,7 +30,7 @@ To fully explore the capabilities of our Linear Gauge, we recommend checking out
 ## Table of contents
 
 - [Getting Started](#getting-started)
-- [Linear Gauge Features](#customization)
+- [Linear Gauge](#linear-gauge)
 
   - [Orientation](#gauge-orientation)
   - [Ruler Style](#rulerStyle)
@@ -41,7 +41,13 @@ To fully explore the capabilities of our Linear Gauge, we recommend checking out
   - [Animation](#animation)
   - [Interactivity](#interactivity)
 
-- [Radial Gauge](#radial-gauge-pre-release)
+- [Radial Gauge](#radial-gauge)
+
+  - [Position](#position)
+  - [Needle Pointer](#needle-pointer)
+  - [Shape Pointer](#shape-pointer)
+  - [Radial Value Bar](#radial-value-bar)
+  - [Interactivity](#interactivity-radial)
 
 - [Demo Application](#demo-application)
 - [Credits](#credits)
@@ -88,7 +94,7 @@ class _MyGaugeExampleState extends State<MyGaugeExample> {
 }
 ```
 
-## Customization
+## Linear Gauge
 
 ### **Gauge Orientation**:
 
@@ -145,19 +151,65 @@ The `Pointer` is interactive , it responds to user horizontal & vertical drag.
 
 <p align='center'><img src="https://raw.githubusercontent.com/GeekyAnts/GaugesFlutter/main/example/screens/interactivity.gif" alt="animations gif"  height=140></p>
 
-### **Radial Gauge (PRE-RELEASE)**
+## **Radial Gauge**
 
 A `Radial Gauge` is a graphical representation used to visualize and display a value within a circular format. It consists of several components, including a radial track, a needle pointer, and a value bar. The radial track represents the range or scale of values that the gauge can display, with the ability for users to set the start and end points of the track.
-Customization:
-RadialTrack
-The `RadialTrack` widget is used to create a radial track component for the radial gauge in Flutter. It provides a customizable visual representation of the scale or range of values on the gauge. With this you can change properties like startAngle endAngle radiusFactor and much more
-Needle Pointer
-The `NeedlePointer` widget allows you to create a Needle Pointer and Customize it
-RadialValueBar
-The `RadialValueBar` is used within the RadialGauge to represent a value on the gauge using a horizontal bar. It provides a visual indication of the current value within the range of the radial track.
-
-<img src="https://raw.githubusercontent.com/GeekyAnts/GaugesFlutter/main/example/screens/radial-1.png" alt="radial png"  height=200> <img src="https://raw.githubusercontent.com/GeekyAnts/GaugesFlutter/main/example/screens/radial-2.png" alt="radial png"  height=200> <img src="https://raw.githubusercontent.com/GeekyAnts/GaugesFlutter/main/example/screens/radial-3.png" alt="radial png"  height=200>
-<img src="https://raw.githubusercontent.com/GeekyAnts/GaugesFlutter/main/example/screens/radial-5.png" alt="radial png"  height=200> <img src="https://raw.githubusercontent.com/GeekyAnts/GaugesFlutter/main/example/screens/mesuring.png" alt="radial png"  height=200> <img src="https://raw.githubusercontent.com/GeekyAnts/GaugesFlutter/main/example/screens/radial-6.png" alt="radial png"  height=200>
+
+### **Position**:
+
+#### **Angles**
+
+The RadialGauge can be easily laid out at different angles around its center. You have the freedom to specify the starting and ending angles, defining the arc over which the gauge will be displayed. This feature is particularly useful when you want to display multiple gauges side by side or need to emphasize a specific range on the gauge.
+
+Default **`startAngle`** : -30°
+
+Default **`endAngle`**`: 210°
+
+<p align='center'><img src="./example/screens/radial-angles.png" alt="animations gif"  height=440></p>
+
+#### **Radii Customization**
+
+`radiusFactor` can be used to size the adjust the scaling factor of the radius and change the radius of the gauge accordingly.
+
+#### **X and Y Coordinates**
+
+To precisely position the RadialGauge on your canvas or user interface, you can set the x and y coordinates of its center. This way, you can easily integrate the gauge into your existing layout or place it at specific locations as per your application's design requirements.
+
+By combining these layout options, you can create stunning and interactive radial gauges that effectively present data to your users, whether it's for monitoring, analytics, or any other visualization needs.
+
+Default **`xCoordinate`** : 0.5
+
+Default **`yCoordinate`**`: 0.5
+
+<p align='center'><img src="./example/screens/radial-coordinates.gif" alt="animations gif"  height=440></p>
+
+# Needle Pointer
+
+The NeedlePointer is a powerful component that enables you to create and customize Needle Pointers for your gauges. With this widget, you have the flexibility to design multiple Needle Pointers and adjust their styles using the **`gaugeNeedle`** and **`plainneedle`** enums.
+
+<p align='center'><img src="./example/screens/radial-needle.png" alt="animations gif"  height=440></p>
+
+# Shape Pointer
+
+The RadialShapePointer allows you to add Shape Pointer to your Gauge.The shape can be customized using properties such as color, width and height.
+
+> Currently, Only Circle Shape is supported
+
+<p align='center'><img src="./example/screens/radial-pointer.png" alt="animations gif"  height=440></p>
+
+# Radial Value Bar
+
+The RadialValueBar is a crucial component used within the RadialGauge to visually represent a specific value on the gauge using a bar. This bar provides users with a clear and intuitive indication of the current value within the defined range of the radial track.
+
+<p align='center'><img src="./example/screens/radial-valueBar.png" alt="animations gif"  height=440></p>
+
+# Interactivity Radial
+
+In the Radial Gauge, the `NeedlePointer` and `RadialShapePointer` can be set to interactive, making them respond to user's horizontal and vertical drag.
+
+<p align='center'><img src="./example/screens/shape-interactive.gif" alt="animations gif"  height=140></p>
+
+<p align='center'><img src="./example/screens/needle-interactive.gif" alt="animations gif"  height=140></p>
 
 ## License
 

example/lib/main.dart

@@ -1,62 +1,85 @@
-import 'package:example/valuebar_position.dart';
 import 'package:flutter/material.dart';
 import 'package:geekyants_flutter_gauges/geekyants_flutter_gauges.dart';
 
 void main() {
   runApp(
     const MaterialApp(
       debugShowCheckedModeBanner: false,
-      home: MyValueBarPosition(),
+      home: RadialGaugeExample(),
     ),
   );
 }
 
-class MyGaugeExample extends StatefulWidget {
-  const MyGaugeExample({Key? key}) : super(key: key);
+///
+/// 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<MyGaugeExample> createState() => _MyGaugeExampleState();
+  State<LinearGaugeExample> createState() => _LinearGaugeExampleState();
 }
 
-class _MyGaugeExampleState extends State<MyGaugeExample> {
-  double value = 50;
-  bool inverseRulers = false;
-
+class _LinearGaugeExampleState extends State<LinearGaugeExample> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       body: Center(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            ElevatedButton(
-                onPressed: () {
-                  inverseRulers = !inverseRulers;
-                  setState(() {});
-                },
-                child: const Text("Inverse Rulers")),
-            Container(
-              color: Colors.pink.withOpacity(0.1),
-              child: LinearGauge(
-                gaugeOrientation: GaugeOrientation.horizontal,
-                valueBar: [
-                  ValueBar(
-                    value: value,
-                    offset: 20,
-                    position: ValueBarPosition.top,
-                  )
-                ],
-                enableGaugeAnimation: true,
-                rulers: RulerStyle(
-                  rulerPosition: RulerPosition.bottom,
-                  inverseRulers: inverseRulers,
-                  showLabel: inverseRulers,
-                ),
-              ),
+        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> {
+  @override
+  Widget build(BuildContext context) {
+    return const Scaffold(
+      backgroundColor: Colors.white,
+      body: RadialGauge(
+        track: RadialTrack(
+            color: Colors.grey,
+            start: 0,
+            end: 100,
+            trackStyle: TrackStyle(
+                showLastLabel: false,
+                secondaryRulerColor: Colors.grey,
+                secondaryRulerPerInterval: 3)),
+        needlePointer: [
+          NeedlePointer(
+            value: 30,
+            color: Colors.red,
+            tailColor: Colors.black,
+            tailRadius: 0,
+            needleStyle: NeedleStyle.flatNeedle,
+          ),
+        ],
+      ),
+    );
+  }
+}

example/pubspec.lock

@@ -5,10 +5,10 @@ packages:
     dependency: transitive
     description:
       name: async
-      sha256: bfe67ef28df125b7dddcea62755991f807aa39a2492a23e1550161692950bbe0
+      sha256: "947bfcf187f74dbc5e146c9eb9c0f10c9f8b30743e341481c1e2ed3ecc18c20c"
       url: "https://pub.dev"
     source: hosted
-    version: "2.10.0"
+    version: "2.11.0"
   boolean_selector:
     dependency: transitive
     description:
@@ -21,10 +21,10 @@ packages:
     dependency: transitive
     description:
       name: characters
-      sha256: e6a326c8af69605aec75ed6c187d06b349707a27fbff8222ca9cc2cff167975c
+      sha256: "04a925763edad70e8443c99234dc3328f442e811f1d8fd1a72f1c8ad0f69a605"
       url: "https://pub.dev"
     source: hosted
-    version: "1.2.1"
+    version: "1.3.0"
   clock:
     dependency: transitive
     description:
@@ -37,10 +37,10 @@ packages:
     dependency: transitive
     description:
       name: collection
-      sha256: cfc915e6923fe5ce6e153b0723c753045de46de1b4d63771530504004a45fae0
+      sha256: "4a07be6cb69c84d677a6c3096fcf960cc3285a8330b4603e0d463d15d9bd934c"
       url: "https://pub.dev"
     source: hosted
-    version: "1.17.0"
+    version: "1.17.1"
   cupertino_icons:
     dependency: "direct main"
     description:
@@ -81,15 +81,15 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "1.0.1"
+    version: "1.0.2"
   js:
     dependency: transitive
     description:
       name: js
-      sha256: "5528c2f391ededb7775ec1daa69e65a2d61276f7552de2b5f7b8d34ee9fd4ab7"
+      sha256: f2c445dce49627136094980615a031419f7f3eb393237e4ecd97ac15dea343f3
       url: "https://pub.dev"
     source: hosted
-    version: "0.6.5"
+    version: "0.6.7"
   lints:
     dependency: transitive
     description:
@@ -102,10 +102,10 @@ packages:
     dependency: transitive
     description:
       name: matcher
-      sha256: "16db949ceee371e9b99d22f88fa3a73c4e59fd0afed0bd25fc336eb76c198b72"
+      sha256: "6501fbd55da300384b768785b83e5ce66991266cec21af89ab9ae7f5ce1c4cbb"
       url: "https://pub.dev"
     source: hosted
-    version: "0.12.13"
+    version: "0.12.15"
   material_color_utilities:
     dependency: transitive
     description:
@@ -118,18 +118,18 @@ packages:
     dependency: transitive
     description:
       name: meta
-      sha256: "6c268b42ed578a53088d834796959e4a1814b5e9e164f147f580a386e5decf42"
+      sha256: "3c74dbf8763d36539f114c799d8a2d87343b5067e9d796ca22b5eb8437090ee3"
       url: "https://pub.dev"
     source: hosted
-    version: "1.8.0"
+    version: "1.9.1"
   path:
     dependency: transitive
     description:
       name: path
-      sha256: db9d4f58c908a4ba5953fcee2ae317c94889433e5024c27ce74a37f94267945b
+      sha256: "8829d8a55c13fc0e37127c29fedf290c102f4e40ae94ada574091fe0ff96c917"
       url: "https://pub.dev"
     source: hosted
-    version: "1.8.2"
+    version: "1.8.3"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -179,10 +179,10 @@ packages:
     dependency: transitive
     description:
       name: test_api
-      sha256: ad540f65f92caa91bf21dfc8ffb8c589d6e4dc0c2267818b4cc2792857706206
+      sha256: eb6ac1540b26de412b3403a163d919ba86f6a973fe6cc50ae3541b80092fdcfb
       url: "https://pub.dev"
     source: hosted
-    version: "0.4.16"
+    version: "0.5.1"
   vector_math:
     dependency: transitive
     description:
@@ -192,5 +192,5 @@ packages:
     source: hosted
     version: "2.1.4"
 sdks:
-  dart: ">=2.18.0 <3.0.0"
+  dart: ">=3.0.0-0 <4.0.0"
   flutter: ">=1.17.0"

lib/geekyants_flutter_gauges.dart

@@ -34,4 +34,5 @@ export './src/radial_gauge/radial_gauge.dart';
 export './src/radial_gauge/radial_track.dart';
 export 'src/radial_gauge/pointer/needle_pointer.dart';
 export 'src/radial_gauge/valuebar/radial_value_bar.dart';
-export 'src/radial_gauge/shape_pointer/radial_shape_pointer.dart';
+export 'src/radial_gauge/pointer/radial_shape_pointer.dart';
+export 'src/radial_gauge/pointer/radial_widget_pointer.dart';

lib/src/linear_gauge/linear_gauge_painter.dart

@@ -1,6 +1,5 @@
 import 'package:flutter/gestures.dart';
 import 'package:flutter/rendering.dart';
-// ignore: implementation_imports
 import 'package:geekyants_flutter_gauges/geekyants_flutter_gauges.dart';
 import 'package:geekyants_flutter_gauges/src/linear_gauge/curve/custom_curve_painter.dart';
 import 'dart:math' as math;
@@ -2232,3 +2231,5 @@ class LinearGaugeParentData extends MultiChildLayoutParentData {
       this.gaugeEnd,
       this.linearGaugeLabel);
 }
+
+// class Temp implements MouseTrackerAnnotation {}