Merge pull request #232 from SahilSharma2710/update/readme.md

Update/readme.md
GeekyAnts · May 31, 2023 · bac7071 · bac7071
2 parents 9a373d3 + 88be6c8
commit bac7071
Show file tree

Hide file tree

Showing 23 changed files with 125 additions and 70 deletions.
diff --git a/README.md b/README.md
@@ -30,14 +30,16 @@ To fully explore the capabilities of our Linear Gauge, we recommend checking out
 ## Table of contents
 
 - [Getting Started](#getting-started)
-- [Linear Gauge Featues](#customization)
+- [Linear Gauge Features](#customization)
   - [Orientation](#gauge-orientation)
   - [Ruler Style](#rulerStyle)
   - [Pointer](#pointer)
   - [Value Bar](#valuebar)
   - [Range Linear Gauge](#rangelineargauge)
   - [Custom Curve](#customCurve)
   - [Animation](#animation)
+  - [Interactivity](#interactivity)
+
 - [Demo Application](#demo-application)
 - [Credits](#credits)
 
@@ -53,7 +55,7 @@ This will add a line like this to your package's pubspec.yaml (and run an implic
 
 ```dart
 dependencies:
-  geekyants_flutter_gauges: 1.0.0+3
+  geekyants_flutter_gauges: 1.0.1
 ```
 
 ## Usage
@@ -89,39 +91,81 @@ class _MyGaugeExampleState extends State<MyGaugeExample> {
 
 The linearGauge can be oriented vertically or horizontally. The orientation can be set using the **`Gaugeorientation`** property in the Linear Gauge. The possible values for the orientation property are:
 
-- `GaugeOrientaion.horizontal`: The gauge will be oriented horizontally, with the minimum value on the left and the maximum value on the right.
-- `GaugeOrientaion.vertical`: The gauge will be oriented vertically, with the minimum value at the bottom and the maximum value at the top.
-  <img src="https://raw.githubusercontent.com/GeekyAnts/GaugesFlutter/main/example/screens/orientation.gif" alt="accessibility text">
+- `GaugeOrientation.horizontal`: The gauge will be oriented horizontally, with the minimum value on the left and the maximum value on the right.
+
+<p align="center"><img src="https://raw.githubusercontent.com/GeekyAnts/GaugesFlutter/main/example/screens/default-horizontal.png" alt="accessibility text" height=300></p>
+
+
+- `GaugeOrientation.vertical`: The gauge will be oriented vertically, with the minimum value at the bottom and the maximum value at the top.
+
+<p align="center"><img src="https://raw.githubusercontent.com/GeekyAnts/GaugesFlutter/main/example/screens/default-vertical.png" alt="accessibility text" height=700></p>
+
 
 ### **RulerStyle**:
 
 The **RulerStyle** class allows you to customize the appearance of the ruler used in the **LinearGauge**. With properties such as `RulerPosition`, `showLabel`, `inverseRuler`, and many more, you can customize the ruler in various ways to suit your needs.
-<img src="https://raw.githubusercontent.com/GeekyAnts/GaugesFlutter/main/example/screens/rulerposition.png" alt="accessibility text">
+
+<img src="https://raw.githubusercontent.com/GeekyAnts/GaugesFlutter/main/example/screens/RULERSTYLE.png" alt="accessibility text">
 
 ### **Pointer**:
 
-The Pointer is used to indicate a specific value on the gauge. The gauge can have multiple pointers with various shapes and values
-<img src="https://raw.githubusercontent.com/GeekyAnts/GaugesFlutter/main/example/screens/pointershape.png" alt="accessibility text">
+The `Pointer` is used to indicate a specific value on the gauge. The gauge can have multiple pointers with various shapes and values
 
 ### **ValueBar**
 
 The `ValueBar` in the LinearGauge is the component that displays the actual value of the gauge. It has properties such as `color`, `offset`, and `thickness` that can be customized to fit your needs.
+
+There are different customization options available for pointers and value bar.
+
 <img src="https://raw.githubusercontent.com/GeekyAnts/GaugesFlutter/main/example/screens/valuebar.png" alt="accessibility text">
 
+
 ### **RangeLinearGauge**
 
 The `RangeLinearGauge` class enables you to customize the ruler appearance in the `LinearGauge`. You can display multiple ranges by providing a list of `RangeLinearGauge` values, and customize the color, start, and end values to match your requirements.
-<img src="https://raw.githubusercontent.com/GeekyAnts/GaugesFlutter/main/example/screens/rangelineargauge.png" alt="accessibility text">
+
+<p align='center'><img src="https://raw.githubusercontent.com/GeekyAnts/GaugesFlutter/main/example/screens/range-1.png" alt="accessibility text"></p>
+<p align='center'><img src="https://raw.githubusercontent.com/GeekyAnts/GaugesFlutter/main/example/screens/range-2.png" alt="accessibility text"></p>
+
+
 
 ### **CustomCurve**
 
 The `CustomCurve` class allows you to draw Bezier and Straight curves on the `LinearGauge`, providing a high degree of customization for visualizing data.
-<img src="https://raw.githubusercontent.com/GeekyAnts/GaugesFlutter/main/example/screens/customCurve.png" atl="CustomCurve">
+
+<p align='center'><img src="https://raw.githubusercontent.com/GeekyAnts/GaugesFlutter/main/example/screens/curve.png" atl="CustomCurve"></p>
 
 ### **Animations**
 
 The `LinearGauge` class includes pre-made animations that can be applied to its pointers, value bars, or the gauge's overall visibility. These animations can help to make the gauge more visually engaging and dynamic.
-<img src="https://raw.githubusercontent.com/GeekyAnts/GaugesFlutter/main/example/screens/animations.gif" alt="animations gif">
+
+<p align='center'><img src="https://raw.githubusercontent.com/GeekyAnts/GaugesFlutter/main/example/screens/animation.gif" alt="animations gif" height=140></p>
+
+### **Interactivity**
+
+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)**
+
+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=300>
+<img src="https://raw.githubusercontent.com/GeekyAnts/GaugesFlutter/main/example/screens/radial-2.png" alt="radial png"  height=300>
+<img src="https://raw.githubusercontent.com/GeekyAnts/GaugesFlutter/main/example/screens/radial-3.png" alt="radial png"  height=300>
+<img src="https://raw.githubusercontent.com/GeekyAnts/GaugesFlutter/main/example/screens/radial-5.png" alt="radial png"  height=300>
+<img src="https://raw.githubusercontent.com/GeekyAnts/GaugesFlutter/main/example/screens/radial-4.png" alt="radial png"  height=300>
+<img src="https://raw.githubusercontent.com/GeekyAnts/GaugesFlutter/main/example/screens/radial-6.png" alt="radial png"  height=300>
+
 
 ## License
 

diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -1,11 +1,12 @@
+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: MyGaugeExample(),
+      home: MyValueBarPosition(),
     ),
   );
 }

diff --git a/example/lib/valuebar_position.dart b/example/lib/valuebar_position.dart
@@ -9,68 +9,78 @@ class MyValueBarPosition extends StatefulWidget {
 }
 
 class _MyValueBarPositionState extends State<MyValueBarPosition> {
+  double value = 50;
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: Center(
-        child: LinearGauge(
-          gaugeOrientation: GaugeOrientation.horizontal,
+      body: Padding(
+        padding: const EdgeInsets.all(40.0),
+        child: Center(
+          child: LinearGauge(
+            gaugeOrientation: GaugeOrientation.horizontal,
+            linearGaugeBoxDecoration: const LinearGaugeBoxDecoration(
+                thickness: 10,
+                linearGradient: LinearGradient(colors: [
+                  Color.fromARGB(255, 114, 191, 255),
+                  Color.fromARGB(255, 107, 255, 115),
+                  Color.fromARGB(255, 255, 114, 107),
+                ])),
 
-          // curves: [
-          //   CustomCurve(
-          //     curvePosition: CurvePosition.top,
-          //     midPoint: 50,
-          //     start: 10,
-          //     end: 50,
-          //     startHeight: 100,
-          //     endHeight: 100,
-          //     midHeight: 100,
-          //   )
-          // ],
-          // linearGaugeBoxDecoration: LinearGaugeBoxDecoration(thickness: 80),
-          pointers: [
-            Pointer(
-              value: 90,
-              shape: PointerShape.circle,
-              height: 100,
-              width: 100,
-              color: Colors.black.withOpacity(0.3),
-              labelStyle: const TextStyle(color: Colors.black),
-              pointerPosition: PointerPosition.top,
-            ),
-            // ShapePointer(
-            //   value: 0,
-            //   shape: PointerShape.circle,
-            //   height: 200,
-            //   // height: 20,
-            //   pointerPosition: PointerPosition.top,
-            //   pointerAlignment: PointerAlignment.center,
-            // )
-            // ,
-            WidgetPointer(
-                value: 50,
-                pointerPosition: PointerPosition.center,
-                child: Container(
-                  height: 100,
-                  width: 60,
-                  color: Colors.amber,
-                ))
-          ],
-          // extendLinearGauge: 10,
-          // customLabels: const [
-          //   CustomRulerLabel(text: "0", value: 0),
-          //   CustomRulerLabel(text: "50", value: 50),
-          //   CustomRulerLabel(text: "100", value: 100),
-          // ],
-          rulers: RulerStyle(
-            inverseRulers: true,
-            rulerPosition: RulerPosition.center,
-            labelOffset: 10,
-            rulersOffset: 10,
-            primaryRulersHeight: 30,
-            textStyle: const TextStyle(
-              fontFamily: 'Roboto',
-              color: Colors.black,
+            // curves: [
+            //   CustomCurve(
+            //     curvePosition: CurvePosition.top,
+            //     midPoint: 50,
+            //     start: 10,
+            //     end: 50,
+            //     startHeight: 100,
+            //     endHeight: 100,
+            //     midHeight: 100,
+            //   )
+            // ],
+            // linearGaugeBoxDecoration: LinearGaugeBoxDecoration(thickness: 80),
+            pointers: [
+              Pointer(
+                value: value,
+                shape: PointerShape.circle,
+                height: 100,
+                isInteractive: true,
+                onChanged: (v) {
+                  setState(() {
+                    value = v;
+                  });
+                },
+                width: 100,
+                color: Colors.black.withOpacity(0.3),
+                labelStyle: const TextStyle(color: Colors.black),
+                pointerPosition: PointerPosition.top,
+              ),
+              // WidgetPointer(
+              //     value: 50,
+              //     pointerPosition: PointerPosition.center,
+              //     child: Container(
+              //       height: 100,
+              //       width: 60,
+              //       color: Colors.amber,
+              //     ))
+            ],
+            // extendLinearGauge: 10,
+            // customLabels: const [
+            //   CustomRulerLabel(text: "0", value: 0),
+            //   CustomRulerLabel(text: "50", value: 50),
+            //   CustomRulerLabel(text: "100", value: 100),
+            // ],
+            rulers: RulerStyle(
+              inverseRulers: true,
+              rulerPosition: RulerPosition.bottom,
+              labelOffset: 10,
+              rulersOffset: 8,
+              primaryRulersHeight: 20,
+              secondaryRulersHeight: 10,
+              textStyle: const TextStyle(
+                fontFamily: 'Roboto',
+                color: Colors.black,
+              ),
             ),
           ),
         ),

diff --git a/example/screens/RULERSTYLE.png b/example/screens/RULERSTYLE.png
diff --git a/example/screens/animation.gif b/example/screens/animation.gif
diff --git a/example/screens/animations.gif b/example/screens/animations.gif
diff --git a/example/screens/curve.png b/example/screens/curve.png
diff --git a/example/screens/customCurve.png b/example/screens/customCurve.png
diff --git a/example/screens/default-horizontal.png b/example/screens/default-horizontal.png
diff --git a/example/screens/default-vertical.png b/example/screens/default-vertical.png
diff --git a/example/screens/demo.gif b/example/screens/demo.gif
diff --git a/example/screens/horizontal-gradient (1).png b/example/screens/horizontal-gradient (1).png
diff --git a/example/screens/horizontal-gradient (3).png b/example/screens/horizontal-gradient (3).png
diff --git a/example/screens/interactivity.gif b/example/screens/interactivity.gif
diff --git a/example/screens/radial-1.png b/example/screens/radial-1.png
diff --git a/example/screens/radial-2.png b/example/screens/radial-2.png
diff --git a/example/screens/radial-3.png b/example/screens/radial-3.png
diff --git a/example/screens/radial-4.png b/example/screens/radial-4.png
diff --git a/example/screens/radial-5.png b/example/screens/radial-5.png
diff --git a/example/screens/radial-6.png b/example/screens/radial-6.png
diff --git a/example/screens/range-1.png b/example/screens/range-1.png
diff --git a/example/screens/range-2.png b/example/screens/range-2.png
diff --git a/example/screens/valuebar.png b/example/screens/valuebar.png