From 199d0a1b057c642a8a36ddaa2a569cacdff3a95b Mon Sep 17 00:00:00 2001 From: HarshaMidadhalaKhajareddyMidadhala Date: Wed, 29 Jul 2026 14:44:21 +0530 Subject: [PATCH 1/2] Updated radial ug content --- Flutter/radial-gauge/accessibility.md | 37 +- Flutter/radial-gauge/animation.md | 156 +- Flutter/radial-gauge/annotation.md | 164 ++- Flutter/radial-gauge/axes.md | 1276 +++++++++++------ Flutter/radial-gauge/export-radial-gauge.md | 358 +++-- Flutter/radial-gauge/getting-started.md | 257 +++- .../how-to/custom-widget-on-flutterflow.md | 10 +- ...e-snippent.png => Adding-code-snippet.png} | Bin ...ottaion_angle.jpg => annotation_angle.jpg} | Bin ...nnottaion_axis.jpg => annotation_axis.jpg} | Bin ...ge_annottaion.jpg => image_annotation.jpg} | Bin Flutter/radial-gauge/needle-pointer.md | 502 ++++--- Flutter/radial-gauge/pointers.md | 137 +- Flutter/radial-gauge/radial-gauge-title.md | 42 +- Flutter/radial-gauge/range-pointer.md | 284 ++-- Flutter/radial-gauge/ranges.md | 416 +++--- Flutter/radial-gauge/widget-pointer.md | 64 +- 17 files changed, 2560 insertions(+), 1143 deletions(-) rename Flutter/radial-gauge/how-to/how-to-section-images/{Adding-code-snippent.png => Adding-code-snippet.png} (100%) rename Flutter/radial-gauge/images/annotation/{annottaion_angle.jpg => annotation_angle.jpg} (100%) rename Flutter/radial-gauge/images/annotation/{annottaion_axis.jpg => annotation_axis.jpg} (100%) rename Flutter/radial-gauge/images/annotation/{image_annottaion.jpg => image_annotation.jpg} (100%) diff --git a/Flutter/radial-gauge/accessibility.md b/Flutter/radial-gauge/accessibility.md index e9621d0c6..ecace02e2 100644 --- a/Flutter/radial-gauge/accessibility.md +++ b/Flutter/radial-gauge/accessibility.md @@ -2,7 +2,7 @@ layout: post title: Accessibility in Flutter Radial Gauge widget | Syncfusion description: Learn here all about the accessibility support in Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and how to customize it. -platform: Flutter +platform: flutter control: SfRadialGauge documentation: ug --- @@ -14,8 +14,38 @@ documentation: ug The [`SfRadialGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) can be made accessible to screen readers by wrapping it with the flutter [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) widget. This provides meaningful information about the gauge to assistive technologies. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return MaterialApp( + title: 'Radial Gauge Demo', + theme: ThemeData( + primarySwatch: Colors.blue, + ), + home: const MyHomePage(), + ); + } +} + +class MyHomePage extends StatefulWidget { + const MyHomePage({Key? key}) : super(key: key); + + @override + State createState() => _MyHomePageState(); +} + +class _MyHomePageState extends State { double _value = 50; @override @@ -30,13 +60,14 @@ The [`SfRadialGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/la ), ); } +} {% endhighlight %} {% endtabs %} ## Sufficient contrast -You can customize the color of the [`SfRadialGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) elements using the following APIs for the sufficient contrast. +You can customize the color of the [`SfRadialGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) elements using the following APIs for a sufficient contrast. * [Title](https://help.syncfusion.com/flutter/radial-gauge/radial-gauge-title#text-alignment) * [Axis labels](https://help.syncfusion.com/flutter/radial-gauge/axes#label-style-customization) diff --git a/Flutter/radial-gauge/animation.md b/Flutter/radial-gauge/animation.md index 675e8fa5f..70cb0f9a4 100644 --- a/Flutter/radial-gauge/animation.md +++ b/Flutter/radial-gauge/animation.md @@ -2,7 +2,7 @@ layout: post title: Animation in Flutter Radial Gauge widget | Syncfusion description: Learn here all about adding and customizing animation of Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more. -platform: Flutter +platform: flutter control: SfRadialGauge documentation: ug --- @@ -11,46 +11,59 @@ documentation: ug ## Initial animation -The radial gauge allows all of its elements to be animated with [`enableLoadingAnimation`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge/enableLoadingAnimation.html) property. The default value for this property is false. The duration of the animation can be controlled by [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge/animationDuration.html) property of the gauge. +The radial gauge allows all of its elements to be animated with [`enableLoadingAnimation`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge/enableLoadingAnimation.html) property. The default value for this property is false. The duration of the animation can be controlled by the [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge/animationDuration.html) property of the gauge. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - enableLoadingAnimation: true, - animationDuration: 4500, - axes: [ - RadialAxis( - minimum: 0, - maximum: 150, - ranges: [ - GaugeRange(startValue: 0, endValue: 50, color: Colors.green, startWidth: 10, endWidth: 10), - GaugeRange(startValue: 50, endValue: 100, color: Colors.orange, startWidth: 10, endWidth: 10), - GaugeRange(startValue: 100, endValue: 150, color: Colors.red, startWidth: 10, endWidth: 10) - ], - pointers: [ - NeedlePointer(value: 90) - ], - annotations: [ - GaugeAnnotation( - widget: Container( - child: Text('90.0', style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold)) - ), - angle: 90, - positionFactor: 0.5 - ) - ] - ) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + enableLoadingAnimation: true, + animationDuration: 4500, + axes: [ + RadialAxis( + minimum: 0, + maximum: 150, + ranges: [ + GaugeRange(startValue: 0, endValue: 50, color: Colors.green, startWidth: 10, endWidth: 10), + GaugeRange(startValue: 50, endValue: 100, color: Colors.orange, startWidth: 10, endWidth: 10), + GaugeRange(startValue: 100, endValue: 150, color: Colors.red, startWidth: 10, endWidth: 10) + ], + pointers: [ + NeedlePointer(value: 90) + ], + annotations: [ + GaugeAnnotation( + widget: Container( + child: Text('90.0', style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold)) + ), + angle: 90, + positionFactor: 0.5 + ) + ] + ) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![gauge loading animation](images/animation/initial_Animation.gif) @@ -66,52 +79,65 @@ The [`enableAnimation`](https://pub.dev/documentation/syncfusion_flutter_gauges/ * `linear` * `slowMiddle` -The animation type can be changed using the [`animationType`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/animationType.html) property of pointer. By default, the animation type is linear. +The animation type can be changed using the [`animationType`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/animationType.html) property of pointer. By default, the animation type is `ease`. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - axisLineStyle: AxisLineStyle(thickness: 30), - showTicks: false, - pointers: [ - NeedlePointer( - value: 60, - enableAnimation: true, - needleStartWidth: 0, - needleEndWidth: 5, - needleColor: Color(0xFFDADADA), - knobStyle: KnobStyle( - color: Colors.white, - borderColor: Color(0xFFDADADA), - knobRadius: 0.06, - borderWidth: 0.04 + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + axisLineStyle: AxisLineStyle(thickness: 30), + showTicks: false, + pointers: [ + NeedlePointer( + value: 60, + enableAnimation: true, + needleStartWidth: 0, + needleEndWidth: 5, + needleColor: Color(0xFFDADADA), + knobStyle: KnobStyle( + color: Colors.white, + borderColor: Color(0xFFDADADA), + knobRadius: 0.06, + borderWidth: 0.04 + ), + tailStyle: TailStyle( + color: Color(0xFFDADADA), + width: 5, + length: 0.15 + ) ), - tailStyle: TailStyle( - color: Color(0xFFDADADA), - width: 5, - length: 0.15 + RangePointer( + value: 60, + width: 30, + enableAnimation: true, + color: Colors.orange ) - ), - RangePointer( - value: 60, - width: 30, - enableAnimation: true, - color: Colors.orange - ) - ] - ) - ], - ) + ] + ) + ], + ), + ), ), ); } +} {% endhighlight %} +{% endtabs %} ![pointer animation](images/animation/animation.gif) diff --git a/Flutter/radial-gauge/annotation.md b/Flutter/radial-gauge/annotation.md index 4ec2eaff3..31cf3c89e 100644 --- a/Flutter/radial-gauge/annotation.md +++ b/Flutter/radial-gauge/annotation.md @@ -2,7 +2,7 @@ layout: post title: Annotation in Flutter Radial Gauge widget | Syncfusion description: Learn here all about adding and customizing Annotation in Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more. -platform: Flutter +platform: flutter control: SfRadialGauge documentation: ug --- @@ -11,7 +11,7 @@ documentation: ug [`Radial axis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) allows you to add multiple widgets such as text and image as annotations to specific points of interest in the radial gauge. -The following properties are available in [`annotation`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation-class.html) to customizes the position and alignment of [`annotation widget`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/widget.html) +The following properties are available in [`annotation`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation-class.html) to customize the position and alignment of [`annotation widget-based`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/widget.html) * [`angle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/angle.html) – Allows you to position the annotation using the angle. @@ -21,8 +21,31 @@ The following properties are available in [`annotation`](https://pub.dev/documen * [`horizontalAlignment`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/horizontalAlignment.html) – Specifies the horizontal alignment for positioning the annotation widget. * [`verticalAlignment`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/verticalAlignment.html) – Specifies the vertical alignment for positioning the annotation. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(MyApp()); +} + +class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return MaterialApp( + home: MyHomePage(), + ); + } +} + +class MyHomePage extends StatefulWidget { + @override + State createState() => MyHomePageState(); +} + +class MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( @@ -46,8 +69,10 @@ The following properties are available in [`annotation`](https://pub.dev/documen ) ); } +} {% endhighlight %} +{% endtabs %} ![default annotation position](images/annotation/annotation_default_position.jpg) @@ -55,8 +80,31 @@ The following properties are available in [`annotation`](https://pub.dev/documen The annotation can be positioned either using the [`angle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/angle.html) or [`axis value`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/axisValue.html). When providing both the [`angle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/angle.html) and the [`axis value`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/axisValue.html), priority will be given to the angle value. The following example shows how to position the annotation widget using angle. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(MyApp()); +} + +class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return MaterialApp( + home: MyHomePage(), + ); + } +} + +class MyHomePage extends StatefulWidget { + @override + State createState() => MyHomePageState(); +} + +class MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( @@ -81,15 +129,40 @@ The annotation can be positioned either using the [`angle`](https://pub.dev/docu ), ); } +} {% endhighlight %} +{% endtabs %} -![annotation position with angle](images/annotation/annottaion_angle.jpg) +![annotation position with angle](images/annotation/annotation_angle.jpg) The following code example shows how to position the annotation using [`axis value`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/axisValue.html) +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(MyApp()); +} + +class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return MaterialApp( + home: MyHomePage(), + ); + } +} + +class MyHomePage extends StatefulWidget { + @override + State createState() => MyHomePageState(); +} + +class MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( @@ -113,10 +186,12 @@ The following code example shows how to position the annotation using [`axis val ) ); } +} {% endhighlight %} +{% endtabs %} -![annotation position with axis](images/annotation/annottaion_axis.jpg) +![annotation position with axis](images/annotation/annotation_axis.jpg) The [`positionFactor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/positionFactor.html) is used to move the annotation widget from the center of axis to the edge of the axis. For example, when you specify the [`positionFactor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/positionFactor.html) as 0.5, the annotation widget will be moved from the center towards the corresponding direction with the distance of half of the radius value of the axis. @@ -126,8 +201,31 @@ By default, the value of [`positionFactor`](https://pub.dev/documentation/syncfu Annotations provide options to add any image over the gauge control with respect to its offset position. You can add multiple images in a single control. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(MyApp()); +} + +class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return MaterialApp( + home: MyHomePage(), + ); + } +} + +class MyHomePage extends StatefulWidget { + @override + State createState() => MyHomePageState(); +} + +class MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( @@ -157,8 +255,8 @@ Annotations provide options to add any image over the gauge control with respect Container( width: 50.00, height: 50.00, - decoration: new BoxDecoration( - image: new DecorationImage( + decoration: BoxDecoration( + image: DecorationImage( image: ExactAssetImage('images/sun.png'), fit: BoxFit.fitHeight, ), @@ -185,10 +283,12 @@ Annotations provide options to add any image over the gauge control with respect ) ); } +} {% endhighlight %} +{% endtabs %} -![image annotation](images/annotation/image_annottaion.jpg) +![image annotation](images/annotation/image_annotation.jpg) ## Alignment of annotation @@ -196,8 +296,31 @@ Annotations provide options to add any image over the gauge control with respect The following code example demonstrates how to set the [`horizontalAlignment`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/horizontalAlignment.html) for annotation +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(MyApp()); +} + +class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return MaterialApp( + home: MyHomePage(), + ); + } +} + +class MyHomePage extends StatefulWidget { + @override + State createState() => MyHomePageState(); +} + +class MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( @@ -222,15 +345,40 @@ The following code example demonstrates how to set the [`horizontalAlignment`](h ) ); } +} {% endhighlight %} +{% endtabs %} ![horizontal alignment](images/annotation/annotation_horizontal.jpg) The following code example demonstrates how to set [`verticalAlignment`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/verticalAlignment.html) for annotation, +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(MyApp()); +} + +class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return MaterialApp( + home: MyHomePage(), + ); + } +} + +class MyHomePage extends StatefulWidget { + @override + State createState() => MyHomePageState(); +} + +class MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( @@ -255,7 +403,9 @@ The following code example demonstrates how to set [`verticalAlignment`](https:/ ) ); } +} {% endhighlight %} +{% endtabs %} ![vertical alignment](images/annotation/annotation_vertical.jpg) \ No newline at end of file diff --git a/Flutter/radial-gauge/axes.md b/Flutter/radial-gauge/axes.md index a111f80b6..8e0736b4c 100644 --- a/Flutter/radial-gauge/axes.md +++ b/Flutter/radial-gauge/axes.md @@ -11,28 +11,41 @@ documentation: ug The [`radial axis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) is a circular arc in which a set of values are displayed along a linear or custom scale based on the design requirements. Axis elements such as labels, ticks, and axis line can be easily customized with built-in properties. -## Axis Customization +## Axis customization **Axis minimum and maximum** -The [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/minimum.html) and [`maximum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/maximum.html) properties of an axis can be used to customize the axis range.The default value of [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/minimum.html) is 0, and the default value of [`maximum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/maximum.html) is 100. +The [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/minimum.html) and [`maximum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/maximum.html) properties of an axis can be used to customize the axis range. The default value of [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/minimum.html) is 0, and the default value of [`maximum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/maximum.html) is 100. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis(minimum: -60, maximum: 60) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis(minimum: -60, maximum: 60) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis range](images/axis/axis_range.jpg) @@ -40,22 +53,35 @@ The [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/g The start and end angles of radial axis can be customized using the [`startAngle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/startAngle.html) and [`endAngle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/endAngle.html) properties. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis(startAngle: 180, endAngle: 90) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis(startAngle: 180, endAngle: 90) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis angle customization](images/axis/axis_angle.jpg) @@ -63,23 +89,36 @@ The start and end angles of radial axis can be customized using the [`startAngle The radius of the radial axis can be customized using the [`radiusFactor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/radiusFactor.html) property. The default value of the [`radiusFactor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/radiusFactor.html) is 0.95. The value of [`radiusFactor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/radiusFactor.html) ranges from 0 to 1. For example, When the [`radiusFactor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/radiusFactor.html) value is 1, the full radius will be considered for rendering the axis, and when the [`radiusFactor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/radiusFactor.html) value is 0.5, then half of the radius value will be considered for rendering the circle. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis(), - RadialAxis(radiusFactor: 0.5) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis(), + RadialAxis(radiusFactor: 0.5) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis radius customization](images/axis/axis_radius.jpg) @@ -87,58 +126,84 @@ The radius of the radial axis can be customized using the [`radiusFactor`](https The position of the [`radial axis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) can be customized using the [`centerX`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/centerX.html) and [`centerY`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/centerY.html) values. The default value of [`centerX`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/centerX.html) and [`centerY`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/centerY.html) properties is 0.5. Therefore, the axis will be positioned in the center of provided size of gauge. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis(startAngle: 270, endAngle: 270, interval: 10), - RadialAxis( - centerY: 0.55, - centerX: 0.35, - radiusFactor: 0.3, - startAngle: 270, - endAngle: 270, - interval: 20 - ) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis(startAngle: 270, endAngle: 270, interval: 10), + RadialAxis( + centerY: 0.55, + centerX: 0.35, + radiusFactor: 0.3, + startAngle: 270, + endAngle: 270, + interval: 20 + ) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis position customization](images/axis/axis_center.jpg) **Positioning axis based on its angle** -The [`canScaleToFit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/canScaleToFit.html) property of [`radial axis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) allows to position the axis and its features based on the provided [`start`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/startAngle.html) and [`end angle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/endAngle.html). By default, the [`canScaleToFit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/canScaleToFit.html) is false, therefore the axis will be positioned based on the [`centerX`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/centerX.html) and [`centerY`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/centerY.html) value. +The [`canScaleToFit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/canScaleToFit.html) property of [`radial axis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) allows you to position the axis and its features based on the provided [`start`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/startAngle.html) and [`end angle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/endAngle.html). By default, the [`canScaleToFit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/canScaleToFit.html) is false, therefore the axis will be positioned based on the [`centerX`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/centerX.html) and [`centerY`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/centerY.html) value. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - startAngle: 180, - endAngle: 0, - interval: 10, - canScaleToFit: true - ) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + startAngle: 180, + endAngle: 0, + interval: 10, + canScaleToFit: true + ) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis fit to scale](images/axis/axis_fitToScale.png) @@ -147,22 +212,35 @@ The [`canScaleToFit`](https://pub.dev/documentation/syncfusion_flutter_gauges/la The axis label can be rotated based on its current angle using the [`canRotateLabels`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/canRotateLabels.html) property of axis. The default value of [`canRotateLabels`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/canRotateLabels.html) is false. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis(canRotateLabels: true) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis(canRotateLabels: true) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis label rotation](images/axis/axis_rotate.jpg) @@ -175,29 +253,42 @@ The visibility of the first and last labels of an axis can be customized using t The default value of both the [`showFirstLabel`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/showFirstLabel.html) and the [`showLastLabel`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/showLastLabel.html) properties is true. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - interval: 1, - showFirstLabel: false, - startAngle: 270, - endAngle: 270, - minimum: 0, - maximum: 12 - ) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + interval: 1, + showFirstLabel: false, + startAngle: 270, + endAngle: 270, + minimum: 0, + maximum: 12 + ) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis edge label](images/axis/axis_showfirstlabel.jpg) @@ -205,43 +296,69 @@ The default value of both the [`showFirstLabel`](https://pub.dev/documentation/s The direction of [`radial axis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) can be customized by its [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/isInversed.html) property. -When the [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/isInversed.html) property is true, the axis can be placed in counter-clockwise direction. When the [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/isInversed.html) property is set to false, the axis will be positioned in clockwise direction. +When the [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/isInversed.html) property is true, the axis can be placed in a counter-clockwise direction. When the [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/isInversed.html) property is set to false, the axis will be positioned in a clockwise direction. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis( isInversed: true)] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis( isInversed: true)] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis direction](images/axis/axis_inversed.jpg) **Maximum number of labels per 100 logical pixels** -By default, a maximum of three labels are displayed for each 100 logical pixels in an axis. The maximum number of labels that should present within 100 logical pixels length can be customized using the [`maximumLabels`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/maximumLabels.html) property of the axis. This property is applicable only for automatic range calculation and will not work if you set value for interval property of an axis. +By default, a maximum of three labels are displayed for each 100 logical pixels in an axis. The maximum number of labels that should be present within 100 logical pixels length can be customized using the [`maximumLabels`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/maximumLabels.html) property of the axis. This property is applicable only for automatic range calculation and will not work if you set value for interval property of an axis. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis( maximumLabels: 5)] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis( maximumLabels: 5)] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis maximum labels](images/axis/axis_maximumlabels.jpg) @@ -249,22 +366,35 @@ By default, a maximum of three labels are displayed for each 100 logical pixels The interval between labels can be customized using the [`interval`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/interval.html) property of axis. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis(interval: 20) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis(interval: 20) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis label interval](images/axis/axis_interval.jpg) @@ -279,28 +409,41 @@ The radial axis line can be customized using the [`axisLineStyle`](https://pub.d * [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/AxisLineStyle/dashArray.html) – Allows to customize the axis line as dashed circular arc. * [`gradient`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/AxisLineStyle/gradient.html) - Allows to apply the gradient for axis line. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - axisLineStyle: AxisLineStyle( - thickness: 0.1, - thicknessUnit: GaugeSizeUnit.factor, - color: Colors.deepPurple + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + axisLineStyle: AxisLineStyle( + thickness: 0.1, + thicknessUnit: GaugeSizeUnit.factor, + color: Colors.deepPurple + ) ) - ) - ] + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis line customization](images/axis/axis_color.jpg) @@ -308,27 +451,40 @@ The radial axis line can be customized using the [`axisLineStyle`](https://pub.d The [`cornerStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/AxisLineStyle/cornerStyle.html) property of [`axisLineStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/AxisLineStyle-class.html) specifies the corner type for axis line. The corners can be customized using the bothFlat, bothCurve, startCurve, and endCurve options. The default value of this property is bothFlat. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - axisLineStyle: AxisLineStyle( - thickness: 15, - cornerStyle: CornerStyle.bothCurve + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + axisLineStyle: AxisLineStyle( + thickness: 15, + cornerStyle: CornerStyle.bothCurve + ) ) - ) - ] + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis corner](images/axis/axis_corner.jpg) @@ -336,24 +492,37 @@ The [`cornerStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/late The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/AxisLineStyle/dashArray.html) property of [`axisLineStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/AxisLineStyle-class.html) allows to render the dashed axis line. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - axisLineStyle: AxisLineStyle(dashArray: [5, 5]) - ) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + axisLineStyle: AxisLineStyle(dashArray: [5, 5]) + ) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![dashed axis line](images/axis/axis_dasharray.jpg) @@ -361,31 +530,44 @@ The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest The [`gradient`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/AxisLineStyle/gradient.html) property of [`axisLineStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/AxisLineStyle-class.html) allows to specify the smooth color transition to the axis line by specifying the different colors based on provided factor value. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - axisLineStyle: AxisLineStyle( - thickness: 0.1, - thicknessUnit: GaugeSizeUnit.factor, - gradient: const SweepGradient( - colors: [Color(0xFFFF7676), Color(0xFFF54EA2)], - stops: [0.25, 0.75] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + axisLineStyle: AxisLineStyle( + thickness: 0.1, + thicknessUnit: GaugeSizeUnit.factor, + gradient: const SweepGradient( + colors: [Color(0xFFFF7676), Color(0xFFF54EA2)], + stops: [0.25, 0.75] + ) ) ) - ) - ] + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis gradient line](images/axis/axis_gradient.jpg) @@ -393,22 +575,35 @@ The [`gradient`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/ The visibility of the axis line can be customized using the [`showAxisLine`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/showAxisLine.html) property of axis. By default, this property is set to true. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis(showAxisLine: false) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis(showAxisLine: false) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis line visibility](images/axis/axis_showline.jpg) @@ -416,21 +611,34 @@ The visibility of the axis line can be customized using the [`showAxisLine`](htt [`Radial gauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) allows customizing its background color using [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge/backgroundColor.html) property. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - backgroundColor: Colors.lightBlue, - axes: [RadialAxis()] - ) + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + backgroundColor: Colors.lightBlue, + axes: [RadialAxis()] + ) + ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axisbackground color](images/axis/axis_backgroundColor.png) @@ -438,76 +646,121 @@ The visibility of the axis line can be customized using the [`showAxisLine`](htt [`Radial axis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) allows to add an image frame as its background using [`backgroundImage`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/backgroundImage.html) property. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Padding( - padding: EdgeInsets.fromLTRB(10, 0, 10, 0), + return MaterialApp( + home: Scaffold( + body: Center( child: SfRadialGauge( axes: [ RadialAxis( - showAxisLine: false, - radiusFactor: 1, - showLastLabel: false, - canRotateLabels: true, - tickOffset: 0.32, - offsetUnit: GaugeSizeUnit.factor, - onLabelCreated: axisLabelCreated, - startAngle: 270, - endAngle: 270, - labelOffset: 0.05, - maximum: 360, - minimum: 0, - interval: 30, - minorTicksPerInterval: 4, - axisLabelStyle: GaugeTextStyle(color: const Color(0xFF949494)), - minorTickStyle: MinorTickStyle( - color: const Color(0xFF616161), - thickness: 1.6, - length: 0.058, - lengthUnit: GaugeSizeUnit.factor - ), - majorTickStyle: MajorTickStyle( - color: const Color(0xFF949494), - thickness: 2.3, - length: 0.087, - lengthUnit: GaugeSizeUnit.factor - ), - backgroundImage: const AssetImage('images/dark_theme_gauge.png'), - pointers: [ - MarkerPointer( - value: 90, - color: const Color(0xFFDF5F2D), - enableAnimation: true, - animationDuration: 1200, - markerOffset: 0.71, - offsetUnit: GaugeSizeUnit.factor, - markerType: MarkerType.triangle, - markerHeight: 10, - markerWidth: 15 - ) - ], - annotations: [ - GaugeAnnotation( - angle: 270, - positionFactor: 0.025, - widget: Text( - '90', - style: TextStyle( - color: const Color(0xFFDF5F2D), - fontWeight: FontWeight.bold, - fontSize: 22 - ) - ) - ) - ] + backgroundImage: const AssetImage('images/gauge_background.png'), ) ], ), - ) + ), + ), + ); + } +} + +{% endhighlight %} +{% endtabs %} + +The following example demonstrates a more advanced usage with background image, custom styling, pointers, and annotations: + +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: Padding( + padding: const EdgeInsets.fromLTRB(10, 0, 10, 0), + child: SfRadialGauge( + axes: [ + RadialAxis( + showAxisLine: false, + radiusFactor: 1, + showLastLabel: false, + canRotateLabels: true, + tickOffset: 0.32, + offsetUnit: GaugeSizeUnit.factor, + onLabelCreated: axisLabelCreated, + startAngle: 270, + endAngle: 270, + labelOffset: 0.05, + maximum: 360, + minimum: 0, + interval: 30, + minorTicksPerInterval: 4, + axisLabelStyle: const GaugeTextStyle(color: Color(0xFF949494)), + minorTickStyle: const MinorTickStyle( + color: Color(0xFF616161), + thickness: 1.6, + length: 0.058, + lengthUnit: GaugeSizeUnit.factor + ), + majorTickStyle: const MajorTickStyle( + color: Color(0xFF949494), + thickness: 2.3, + length: 0.087, + lengthUnit: GaugeSizeUnit.factor + ), + backgroundImage: const AssetImage('images/dark_theme_gauge.png'), + pointers: [ + MarkerPointer( + value: 90, + color: const Color(0xFFDF5F2D), + enableAnimation: true, + animationDuration: 1200, + markerOffset: 0.71, + offsetUnit: GaugeSizeUnit.factor, + markerType: MarkerType.triangle, + markerHeight: 10, + markerWidth: 15 + ) + ], + annotations: [ + GaugeAnnotation( + angle: 270, + positionFactor: 0.025, + widget: const Text( + '90', + style: TextStyle( + color: Color(0xFFDF5F2D), + fontWeight: FontWeight.bold, + fontSize: 22 + ) + ) + ) + ] + ) + ], + ), + ) + ), ), ); } @@ -515,7 +768,7 @@ The visibility of the axis line can be customized using the [`showAxisLine`](htt void axisLabelCreated(AxisLabelCreatedArgs args) { if (args.text == '90') { args.text = 'E'; - args.labelStyle = GaugeTextStyle(color: const Color(0xFFDF5F2D)); + args.labelStyle = const GaugeTextStyle(color: Color(0xFFDF5F2D)); } else { if (args.text == '0') { args.text = 'N'; @@ -524,11 +777,13 @@ The visibility of the axis line can be customized using the [`showAxisLine`](htt } else if (args.text == '270') { args.text = 'W'; } - args.labelStyle = GaugeTextStyle(color: const Color(0xFFFFFFFF)); + args.labelStyle = const GaugeTextStyle(color: Color(0xFFFFFFFF)); } } +} {% endhighlight %} +{% endtabs %} ![axis background image](images/axis/axis_background.png) @@ -542,30 +797,43 @@ The axis labels can be customized using the [`axisLabelStyle`](https://pub.dev/d * [`fontWeight`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTextStyle/fontWeight.html) – Allows to specify the font weight for labels. * [`fontSize`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTextStyle/fontSize.html) – Allows to specify the font size for labels. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - axisLabelStyle: GaugeTextStyle( - color: Colors.red, - fontSize: 15, - fontStyle: FontStyle.italic, - fontWeight: FontWeight.bold, - fontFamily: 'Times' + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + axisLabelStyle: const GaugeTextStyle( + color: Colors.red, + fontSize: 15, + fontStyle: FontStyle.italic, + fontWeight: FontWeight.bold, + fontFamily: 'Times' + ) ) - ) - ] + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis label customization](images/axis/axis_label.jpg) @@ -575,43 +843,70 @@ The following property of the axis allows to customize the axis label text: * [`labelFormat`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/labelFormat.html) - Allows to add prefix or suffix with the axis labels. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis(labelFormat: '{value}m') - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis(labelFormat: '{value}m') + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis label format](images/axis/axis_labelFormat.jpg) * [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/numberFormat.html)- Allows to customize the axis label with the [`globalized label format`](https://pub.dev/documentation/intl/latest/intl/NumberFormat-class.html). +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; +import 'package:intl/intl.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis(numberFormat: NumberFormat.compactSimpleCurrency()) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis(numberFormat: NumberFormat.compactSimpleCurrency()) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis number format](images/axis/axis_numberFormat.jpg) @@ -619,20 +914,33 @@ The following property of the axis allows to customize the axis label text: The [`showLabels`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/showLabels.html) property of axis allows to enable or disable the visibility of labels. The default value of the property is true. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis(showLabels: false ),] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis(showLabels: false )] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis label visibility](images/axis/axis_showLabels.jpg) @@ -650,35 +958,48 @@ The major and minor tick lines of an axis can be customized using the [`majorTic * [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MajorTickStyle/dashArray.html) – Specify the dash array to draw the dashed tick line. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - majorTickStyle: MajorTickStyle( - length: 0.1, - lengthUnit: GaugeSizeUnit.factor, - thickness: 1.5, - color: Colors.black - ), - minorTickStyle: MinorTickStyle( - length: 0.05, - lengthUnit: GaugeSizeUnit.factor, - thickness: 1.5, - color: Colors.black + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + majorTickStyle: const MajorTickStyle( + length: 0.1, + lengthUnit: GaugeSizeUnit.factor, + thickness: 1.5, + color: Colors.black + ), + minorTickStyle: const MinorTickStyle( + length: 0.05, + lengthUnit: GaugeSizeUnit.factor, + thickness: 1.5, + color: Colors.black + ) ) - ) - ] + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis tick customization](images/axis/axis_ticks.jpg) @@ -686,25 +1007,38 @@ The major and minor tick lines of an axis can be customized using the [`majorTic The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MajorTickStyle/dashArray.html) property of both the [`majorTickStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/majorTickStyle.html) and [`minorTickStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/minorTickStyle.html) allows to draw the tick line as dashed line. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - majorTickStyle: MajorTickStyle(length: 20, dashArray: [5, 2.5]), - minorTickStyle: MinorTickStyle(length: 15, dashArray: [3, 2.5]) - ) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + majorTickStyle: const MajorTickStyle(length: 20, dashArray: [5, 2.5]), + minorTickStyle: const MinorTickStyle(length: 15, dashArray: [3, 2.5]) + ) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![dashed tick lines](images/axis/axis_tickdash.jpg) @@ -712,22 +1046,34 @@ The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest The major ticks are generated based on the [`interval`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/interval.html) property. Like major ticks, the minor ticks are calculated using the [`minorTicksPerInterval`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/minorTicksPerInterval.html) property of axis. By default, the value of this property is 1. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis(minorTicksPerInterval: 4 - ), - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis(minorTicksPerInterval: 4), + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![minor tick line](images/axis/axis_minortick.jpg) @@ -735,20 +1081,33 @@ The major ticks are generated based on the [`interval`](https://pub.dev/document The [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/showTicks.html) property of the axis is used to enable or disable the visibility of both the major and the minor ticks of axis. The default value of this property is true. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis(showTicks: false)] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis(showTicks: false)] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![tick line visibility](images/axis/axis_showticks.jpg) @@ -756,22 +1115,35 @@ The [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest The [`radial axis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) allows to position the labels and ticks either inside or outside the axis line using the [`labelsPosition`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/labelsPosition.html) and [`ticksPosition`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/ticksPosition.html) properties. By default, both labels and ticks are positioned inside the axis. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis( - labelsPosition: ElementsPosition.outside, - ticksPosition: ElementsPosition.outside)] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis( + labelsPosition: ElementsPosition.outside, + ticksPosition: ElementsPosition.outside)] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![label and tick placement](images/axis/axis_outside.jpg) @@ -781,46 +1153,72 @@ The ticks can be moved near or far to the axis line using the [`tickOffset`](htt The default value of tick offset is 0. While setting offset for the ticks, the axis labels are also moved along with the ticks. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis( - tickOffset: 20)] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis( + tickOffset: 20)] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis tick offset](images/axis/axis_tickOffset.jpg) The following code example shows how to add tick offset with the [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/offsetUnit.html) property of axis. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - tickOffset: 0.2, - labelOffset: 0.2, - offsetUnit: GaugeSizeUnit.factor - ) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + tickOffset: 0.2, + labelOffset: 0.2, + offsetUnit: GaugeSizeUnit.factor + ) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis tick and label offset](images/axis/axis_bothOffset.jpg) @@ -828,23 +1226,36 @@ The following code example shows how to add tick offset with the [`offsetUnit`]( The [`labelOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/labelOffset.html) property allows to adjust the distance between the tick end and the labels. The [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/offsetUnit.html) property of axis allows to specify the label offset either in factor or logical pixels. By default, the value of the label offset is 15. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis( - labelOffset: 0.3, offsetUnit: GaugeSizeUnit.factor - ), - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis( + labelOffset: 0.3, offsetUnit: GaugeSizeUnit.factor + ), + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis label offset](images/axis/axis_labelOffset.jpg) @@ -856,44 +1267,56 @@ N> [`GaugeSizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/lat The [`Radial Gauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) allows you to add n number of radial axis in its axes collection. You can also customize individual axis added in the [`axes`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge/axes.html) collection. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ RadialAxis(minimum: 0 , maximum: 100, interval: 10, - ticksPosition: ElementsPosition.outside, - labelsPosition: ElementsPosition.outside, - minorTicksPerInterval: 5, - radiusFactor: 0.9, labelOffset: 15, - minorTickStyle: MinorTickStyle(thickness: 1.5, - color: Color.fromARGB(255, 143, 20, 2), - length: 0.07, lengthUnit: GaugeSizeUnit.factor), - majorTickStyle: MinorTickStyle(thickness: 1.5, - color: Color.fromARGB(255, 143, 20, 2), - length: 0.15, lengthUnit: GaugeSizeUnit.factor,), - axisLineStyle: AxisLineStyle( thickness: 3, - color: Color.fromARGB(255, 143, 20, 2), ), - axisLabelStyle: GaugeTextStyle(fontSize: 12, - color:Color.fromARGB(255, 143, 20, 2),),), - RadialAxis(minimum: 0 , maximum: 60, interval: 10, - radiusFactor: 0.6, labelOffset: 15, isInversed: true, + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ RadialAxis(minimum: 0 , maximum: 100, interval: 10, + ticksPosition: ElementsPosition.outside, + labelsPosition: ElementsPosition.outside, minorTicksPerInterval: 5, - minorTickStyle: MinorTickStyle(color: Colors.black, thickness: 1.5, - lengthUnit: GaugeSizeUnit.factor, length: 0.07), - majorTickStyle: MajorTickStyle(color: Colors.black, thickness: 1.5, - lengthUnit: GaugeSizeUnit.factor, length: 0.15), - axisLineStyle: AxisLineStyle(color: Colors.black, thickness: 3, ), - axisLabelStyle: GaugeTextStyle(color: Colors.black, fontSize: 12)), - ], - ) - ), - ); + radiusFactor: 0.9, labelOffset: 15, + minorTickStyle: const MinorTickStyle(thickness: 1.5, + color: Color.fromARGB(255, 143, 20, 2), + length: 0.07, lengthUnit: GaugeSizeUnit.factor), + majorTickStyle: const MinorTickStyle(thickness: 1.5, + color: Color.fromARGB(255, 143, 20, 2), + length: 0.15, lengthUnit: GaugeSizeUnit.factor,), + axisLineStyle: const AxisLineStyle( thickness: 3, + color: Color.fromARGB(255, 143, 20, 2), ), + axisLabelStyle: const GaugeTextStyle(fontSize: 12, + color:Color.fromARGB(255, 143, 20, 2),),), + RadialAxis(minimum: 0 , maximum: 60, interval: 10, + radiusFactor: 0.6, labelOffset: 15, isInversed: true, + minorTicksPerInterval: 5, + minorTickStyle: const MinorTickStyle(color: Colors.black, thickness: 1.5, + lengthUnit: GaugeSizeUnit.factor, length: 0.07), + majorTickStyle: const MajorTickStyle(color: Colors.black, thickness: 1.5, + lengthUnit: GaugeSizeUnit.factor, length: 0.15), + axisLineStyle: const AxisLineStyle(color: Colors.black, thickness: 3, ), + axisLabelStyle: const GaugeTextStyle(color: Colors.black, fontSize: 12)), + ], + ) + ), + ); } +} {% endhighlight %} +{% endtabs %} ![axis label offset](images/axis/axis_multiplescale.jpg) @@ -909,16 +1332,27 @@ The [`onLabelCreated`](https://pub.dev/documentation/syncfusion_flutter_gauges/l N> If both [`axisLabelStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/axisLabelStyle.html) property of radial axis and [`labelStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/AxisLabelCreatedArgs/labelStyle.html) property of the [`onLabelCreated`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/onLabelCreated.html) event args are set, the values of the [`labelStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/AxisLabelCreatedArgs/labelStyle.html) property of the event args will take precedence. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis( - onLabelCreated:axisLabelCreated,), - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis( + onLabelCreated:axisLabelCreated,), + ] + ), ), ), ); @@ -926,14 +1360,16 @@ N> If both [`axisLabelStyle`](https://pub.dev/documentation/syncfusion_flutter_g void axisLabelCreated(AxisLabelCreatedArgs args){ if(args.text == '100'){ - args.labelStyle = GaugeTextStyle(color: Colors.red,fontStyle: FontStyle.italic, + args.labelStyle = const GaugeTextStyle(color: Colors.red,fontStyle: FontStyle.italic, fontFamily: 'Times', fontWeight: FontWeight.bold, fontSize: 15); args.canRotate = true; args.text = '100 %'; } } +} {% endhighlight %} +{% endtabs %} ![axis label offset](images/axis/axis_labelCreated.jpg) @@ -941,118 +1377,144 @@ N> If both [`axisLabelStyle`](https://pub.dev/documentation/syncfusion_flutter_g The [`onAxisTapped`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/onAxisTapped.html) event is called when an axis is tapped. The corresponding axis value at the tapped position will be got from the event. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis( - onAxisTapped: axisTapped), - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis( + onAxisTapped: axisTapped), + ] + ), ), ), ); } - void axisTapped(double _tappedValue){ + void axisTapped(double tappedValue){ // Handle the tapped value } +} {% endhighlight %} +{% endtabs %} ## Custom scale [`Radial gauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) allows you to display a set of values along with a custom scale based on your business logic using the [`onCreateAxisRenderer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/onCreateAxisRenderer.html) event of the axis. The [`onCreateAxisRenderer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/onCreateAxisRenderer.html) event allows returning the custom renderer for the axis. In that, we can override methods of `RadialAxisRenderer` to create the custom axis. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge(axes: [ - RadialAxis( - minimum: 0, - maximum: 150, - onCreateAxisRenderer: () { - final CustomAxisRenderer renderer = CustomAxisRenderer(); - return renderer; - }, - ) - ]), + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge(axes: [ + RadialAxis( + minimum: 0, + maximum: 150, + onCreateAxisRenderer: () { + final CustomAxisRenderer renderer = CustomAxisRenderer(); + return renderer; + }, + ) + ]), + ), ), ); } +} - class _CustomAxisRenderer extends RadialAxisRenderer { - _CustomAxisRenderer() : super(); - - /// Generated the 9 non-linear interval labels from 0 to 150 - /// instead of actual generated labels. - @override - List generateVisibleLabels() { - final List _visibleLabels = []; - for (num i = 0; i < 9; i++) { - final double _value = _calculateLabelValue(i); - final CircularAxisLabel label = CircularAxisLabel( - this.axis.axisLabelStyle, _value.toInt().toString(), i, false); - label.value = _value; - _visibleLabels.add(label); - } +class CustomAxisRenderer extends RadialAxisRenderer { + CustomAxisRenderer() : super(); - return _visibleLabels; + /// Generated the 9 non-linear interval labels from 0 to 150 + /// instead of actual generated labels. + @override + List generateVisibleLabels() { + final List visibleLabels = []; + for (num i = 0; i < 9; i++) { + final double value = _calculateLabelValue(i); + final CircularAxisLabel label = CircularAxisLabel( + axis.axisLabelStyle, value.toInt().toString(), i, false); + label.value = value; + visibleLabels.add(label); } - /// Returns the factor(0 to 1) from value to place the labels in an axis. - @override - double valueToFactor(double value) { - if (value >= 0 && value <= 2) { - return (value * 0.125) / 2; - } else if (value > 2 && value <= 5) { - return (((value - 2) * 0.125) / (5 - 2)) + (1 * 0.125); - } else if (value > 5 && value <= 10) { - return (((value - 5) * 0.125) / (10 - 5)) + (2 * 0.125); - } else if (value > 10 && value <= 20) { - return (((value - 10) * 0.125) / (20 - 10)) + (3 * 0.125); - } else if (value > 20 && value <= 30) { - return (((value - 20) * 0.125) / (30 - 20)) + (4 * 0.125); - } else if (value > 30 && value <= 50) { - return (((value - 30) * 0.125) / (50 - 30)) + (5 * 0.125); - } else if (value > 50 && value <= 100) { - return (((value - 50) * 0.125) / (100 - 50)) + (6 * 0.125); - } else if (value > 100 && value <= 150) { - return (((value - 100) * 0.125) / (150 - 100)) + (7 * 0.125); - } else { - return 1; - } + return visibleLabels; + } + + /// Returns the factor(0 to 1) from value to place the labels in an axis. + @override + double valueToFactor(double value) { + if (value >= 0 && value <= 2) { + return (value * 0.125) / 2; + } else if (value > 2 && value <= 5) { + return (((value - 2) * 0.125) / (5 - 2)) + (1 * 0.125); + } else if (value > 5 && value <= 10) { + return (((value - 5) * 0.125) / (10 - 5)) + (2 * 0.125); + } else if (value > 10 && value <= 20) { + return (((value - 10) * 0.125) / (20 - 10)) + (3 * 0.125); + } else if (value > 20 && value <= 30) { + return (((value - 20) * 0.125) / (30 - 20)) + (4 * 0.125); + } else if (value > 30 && value <= 50) { + return (((value - 30) * 0.125) / (50 - 30)) + (5 * 0.125); + } else if (value > 50 && value <= 100) { + return (((value - 50) * 0.125) / (100 - 50)) + (6 * 0.125); + } else if (value > 100 && value <= 150) { + return (((value - 100) * 0.125) / (150 - 100)) + (7 * 0.125); + } else { + return 1; } + } - /// To return the label value based on interval - double _calculateLabelValue(num value) { - if (value == 0) { - return 0; - } else if (value == 1) { - return 2; - } else if (value == 2) { - return 5; - } else if (value == 3) { - return 10; - } else if (value == 4) { - return 20; - } else if (value == 5) { - return 30; - } else if (value == 6) { - return 50; - } else if (value == 7) { - return 100; - } else { - return 150; - } + /// To return the label value based on interval + double _calculateLabelValue(num value) { + if (value == 0) { + return 0; + } else if (value == 1) { + return 2; + } else if (value == 2) { + return 5; + } else if (value == 3) { + return 10; + } else if (value == 4) { + return 20; + } else if (value == 5) { + return 30; + } else if (value == 6) { + return 50; + } else if (value == 7) { + return 100; + } else { + return 150; } } +} {% endhighlight %} +{% endtabs %} ![custom scale](images/axis/custom_scale.jpg) diff --git a/Flutter/radial-gauge/export-radial-gauge.md b/Flutter/radial-gauge/export-radial-gauge.md index f0997bf95..cef685036 100644 --- a/Flutter/radial-gauge/export-radial-gauge.md +++ b/Flutter/radial-gauge/export-radial-gauge.md @@ -2,7 +2,7 @@ layout: post title: Export in Flutter Radial Gauge widget | Syncfusion description: Learn here all about Export feature of Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more. -platform: Flutter +platform: flutter control: SfRadialGauge documentation: ug --- @@ -13,110 +13,213 @@ documentation: ug ## Export image -To export the Radial Gauge as a PNG image, we can get the image by calling the [`toImage`](https://api.flutter.dev/flutter/rendering/RenderRepaintBoundary/toImage.html) method on a repaint boundary. +To export the Radial Gauge as a PNG image, we can get the image by calling the [`toImage`](https://api.flutter.dev/flutter/rendering/RenderRepaintBoundary/toImage.html) method on a repaint boundary. -{% highlight dart %} +### Add required packages - GlobalKey _globalKey = GlobalKey(); +Add the following packages to your `pubspec.yaml` file: + +```yaml +dependencies: + flutter: + sdk: flutter + syncfusion_flutter_gauges: ^xx.x.x +``` + +### Export image example + +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; +import 'dart:ui' as ui; + +void main() => runApp(const ExportGaugeDemo()); + +class ExportGaugeDemo extends StatelessWidget { + const ExportGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { - return Scaffold( - body: Column( - children: [ - Container( - height: 400, - width: 400, - child: RepaintBoundary( - key: _globalKey, - child: SfRadialGauge( - axes: [ - RadialAxis( - minimum: 0, - maximum: 150, - ranges: [ - GaugeRange( - startValue: 0, - endValue: 50, - color: Colors.green, - startWidth: 10, - endWidth: 10), - GaugeRange( - startValue: 50, - endValue: 100, - color: Colors.orange, - startWidth: 10, - endWidth: 10), - GaugeRange( - startValue: 100, - endValue: 150, - color: Colors.red, - startWidth: 10, - endWidth: 10) - ], - pointers: [NeedlePointer(value: 90)], - ) - ], - ), + return const MaterialApp( + home: ExportGaugeImagePage(), + ); + } +} + +class ExportGaugeImagePage extends StatefulWidget { + const ExportGaugeImagePage({Key? key}) : super(key: key); + + @override + State createState() => _ExportGaugeImagePageState(); +} + +class _ExportGaugeImagePageState extends State { + final GlobalKey _globalKey = GlobalKey(); + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar(title: const Text('Export Gauge to Image')), + body: Column( + children: [ + Container( + height: 400, + width: 400, + child: RepaintBoundary( + key: _globalKey, + child: SfRadialGauge( + axes: [ + RadialAxis( + minimum: 0, + maximum: 150, + ranges: [ + GaugeRange( + startValue: 0, + endValue: 50, + color: Colors.green, + startWidth: 10, + endWidth: 10, + ), + GaugeRange( + startValue: 50, + endValue: 100, + color: Colors.orange, + startWidth: 10, + endWidth: 10, + ), + GaugeRange( + startValue: 100, + endValue: 150, + color: Colors.red, + startWidth: 10, + endWidth: 10, + ), + ], + pointers: [ + NeedlePointer(value: 90), + ], + ), + ], ), ), - Padding( - padding: const EdgeInsets.only(top: 5.0), - child: ElevatedButton( - onPressed: _renderGaugeImage, - child: Text('Gauge to image'), - ), + ), + Padding( + padding: const EdgeInsets.only(top: 5.0), + child: ElevatedButton( + onPressed: _renderGaugeImage, + child: const Text('Gauge to Image'), ), - ], - ), - ); + ), + ], + ), + ); } Future _renderGaugeImage() async { - final RenderRepaintBoundary boundary = - _globalKey.currentContext?.findRenderObject() as RenderRepaintBoundary; + final RenderRepaintBoundary? boundary = + _globalKey.currentContext?.findRenderObject() as RenderRepaintBoundary?; + + if (boundary != null) { final ui.Image data = await boundary.toImage(pixelRatio: 3.0); - final bytes = await data.toByteData(format: ui.ImageByteFormat.png); - if (data != null) { - await Navigator.of(context).push( - MaterialPageRoute( - builder: (BuildContext context) { - return Scaffold( - appBar: AppBar(), - body: Center( - child: Container( - color: Colors.white, - child: Image.memory(bytes!.buffer.asUint8List()), + final ByteData? bytes = + await data.toByteData(format: ui.ImageByteFormat.png); + + if (bytes != null) { + if (mounted) { + await Navigator.of(context).push( + MaterialPageRoute( + builder: (BuildContext context) { + return Scaffold( + appBar: AppBar(title: const Text('Gauge Image')), + body: Center( + child: Container( + color: Colors.white, + child: Image.memory(bytes.buffer.asUint8List()), + ), ), - ), - ); - }, - ), - ); + ); + }, + ), + ); + } } + } } {% endhighlight %} +{% endtabs %} -![image_export](images\export-radial-gauge\export-gauge-image.png) +![image_export](images/export-radial-gauge/export-gauge-image.png) ## Export PDF -Similar to the above way, we can also export the rendered chart as a PDF document. We create the pdf document using pdf component. This can be done in the application level itself and please find the code snippet below. Add the below four packages in your pubspec file and import the respective libraries in your main.dart file. +Similar to the image export, you can also export the rendered gauge as a PDF document. This requires the syncfusion_flutter_pdf package to create the PDF. + +### Add required packages + +Add the following packages to your `pubspec.yaml` file: + +```yaml +dependencies: + flutter: + sdk: flutter + syncfusion_flutter_gauges: ^xx.x.x + syncfusion_flutter_pdf: ^xx.x.x + path_provider: ^x.x.x + open_file: ^x.x.x +``` + +### Platform permissions -* syncfusion_flutter_pdf -* syncfusion_flutter_gauges -* path_provider -* open_file +**Android**: Requires `WRITE_EXTERNAL_STORAGE` permission. Update your `AndroidManifest.xml` file in `android/app/src/main/` and add the following permission: +```xml + +``` + +### Export PDF example + +{% tabs %} {% highlight dart %} -GlobalKey _globalKey = GlobalKey(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; +import 'package:syncfusion_flutter_pdf/pdf.dart'; +import 'package:path_provider/path_provider.dart'; +import 'package:open_file/open_file.dart'; +import 'dart:io'; +import 'dart:typed_data'; +import 'dart:ui' as ui; + +void main() => runApp(const ExportPDFGaugeDemo()); + +class ExportPDFGaugeDemo extends StatelessWidget { + const ExportPDFGaugeDemo({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return const MaterialApp( + home: ExportGaugePDFPage(), + ); + } +} + +class ExportGaugePDFPage extends StatefulWidget { + const ExportGaugePDFPage({Key? key}) : super(key: key); + + @override + State createState() => _ExportGaugePDFPageState(); +} + +class _ExportGaugePDFPageState extends State { + final GlobalKey _globalKey = GlobalKey(); @override Widget build(BuildContext context) { return Scaffold( - appBar: AppBar(title: Text('RenderGaugePdf')), + appBar: AppBar(title: const Text('Export Gauge to PDF')), body: Column( children: [ Container( @@ -131,26 +234,31 @@ GlobalKey _globalKey = GlobalKey(); maximum: 150, ranges: [ GaugeRange( - startValue: 0, - endValue: 50, - color: Colors.green, - startWidth: 10, - endWidth: 10), + startValue: 0, + endValue: 50, + color: Colors.green, + startWidth: 10, + endWidth: 10, + ), GaugeRange( - startValue: 50, - endValue: 100, - color: Colors.orange, - startWidth: 10, - endWidth: 10), + startValue: 50, + endValue: 100, + color: Colors.orange, + startWidth: 10, + endWidth: 10, + ), GaugeRange( - startValue: 100, - endValue: 150, - color: Colors.red, - startWidth: 10, - endWidth: 10) + startValue: 100, + endValue: 150, + color: Colors.red, + startWidth: 10, + endWidth: 10, + ), + ], + pointers: [ + NeedlePointer(value: 90), ], - pointers: [NeedlePointer(value: 90)], - ) + ), ], ), ), @@ -159,7 +267,7 @@ GlobalKey _globalKey = GlobalKey(); padding: const EdgeInsets.only(top: 5.0), child: ElevatedButton( onPressed: _renderGaugePDF, - child: Text('Gauges to pdf'), + child: const Text('Gauge to PDF'), ), ), ], @@ -168,25 +276,47 @@ GlobalKey _globalKey = GlobalKey(); } Future _renderGaugePDF() async { - var document = PdfDocument(); - PdfPage page = document.pages.add(); - final RenderRepaintBoundary boundary = - _globalKey.currentContext?.findRenderObject() as RenderRepaintBoundary; - final ui.Image data = await boundary.toImage(pixelRatio: 3.0); - final bytes = await data.toByteData(format: ui.ImageByteFormat.png); - final Uint8List imageBytes = - bytes!.buffer.asUint8List(bytes.offsetInBytes, bytes.lengthInBytes); - page.graphics - .drawImage(PdfBitmap(imageBytes), Rect.fromLTWH(25, 50, 300, 300)); - var byteData = document.save(); - document.dispose(); - Directory? directory = await getExternalStorageDirectory(); - String path = directory!.path; - File file = File('$path/Output.pdf'); - await file.writeAsBytes(byteData, flush: true); - OpenFile.open('$path/Output.pdf'); + final RenderRepaintBoundary? boundary = + _globalKey.currentContext?.findRenderObject() as RenderRepaintBoundary?; + + if (boundary != null) { + final ui.Image data = await boundary.toImage(pixelRatio: 3.0); + final ByteData? bytes = + await data.toByteData(format: ui.ImageByteFormat.png); + + if (bytes != null) { + final Uint8List imageBytes = + bytes.buffer.asUint8List(bytes.offsetInBytes, bytes.lengthInBytes); + + final PdfDocument document = PdfDocument(); + final PdfPage page = document.pages.add(); + final PdfBitmap bitmap = PdfBitmap(imageBytes); + + page.graphics.drawImage( + bitmap, + const Rect.fromLTWH(25, 50, 300, 300), + ); + + final List byteData = document.save(); + document.dispose(); + + final Directory? directory = await getExternalStorageDirectory(); + if (directory != null) { + final String path = directory.path; + final File file = File('$path/Output.pdf'); + + await file.writeAsBytes(byteData, flush: true); + + if (mounted) { + await OpenFile.open('$path/Output.pdf'); + } + } + } + } } +} + +{% endhighlight %} +{% endtabs %} - {% endhighlight %} - - ![pdf_export](images\export-radial-gauge\export-radial-gauge.png) \ No newline at end of file +![pdf_export](images/export-radial-gauge/export-radial-gauge.png) \ No newline at end of file diff --git a/Flutter/radial-gauge/getting-started.md b/Flutter/radial-gauge/getting-started.md index 1cb6acd75..0b197da8e 100644 --- a/Flutter/radial-gauge/getting-started.md +++ b/Flutter/radial-gauge/getting-started.md @@ -11,7 +11,7 @@ documentation: ug This section explains the steps required to add the Flutter [Radial Gauge](https://www.syncfusion.com/flutter-widgets/flutter-radial-gauge) and its elements such as title, axis, range, pointer and annotation. This section covers only the basic features needed to get started with Syncfusion® radial gauge. -To get start quickly with our Flutter radial gauge widget, you can check on this video: +To get started quickly with our Flutter radial gauge widget, you can check out this video: @@ -24,6 +24,7 @@ Create a simple project using the instructions given in the [Getting Started wit Add the Syncfusion® Flutter Gauge dependency to your pubspec.yaml file. +{% tabs %} {% highlight dart %} dependencies: @@ -31,6 +32,7 @@ Add the Syncfusion® Flutter Gauge dependency to your pubspec.yaml syncfusion_flutter_gauges: ^xx.x.xx {% endhighlight %} +{% endtabs %} N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Gauge`](https://pub.dev/packages/syncfusion_flutter_gauges/versions) package. @@ -38,42 +40,77 @@ N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Gauge`]( Run the following command to get the required packages. -{% highlight dart %} +{% tabs %} +{% highlight dart %} - $ flutter pub get + flutter pub get {% endhighlight %} +{% endtabs %} **Import package** Import the following package in your Dart code. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_gauges/gauges.dart'; + void main() => runApp(const RadialGaugeDemo()); + + class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: Container( + child: SfRadialGauge() + ) + ) + ) + ); + } + } + {% endhighlight %} +{% endtabs %} ## Initialize the radial gauge After the package has been imported, initialize the [SfRadialGauge](https://www.syncfusion.com/flutter-widgets/flutter-radial-gauge) as a child of any widget such as a container widget. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_gauges/gauges.dart'; - @override - Widget build(BuildContext context) { + void main() => runApp(const RadialGaugeDemo()); + + class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({super.key}); + + @override + Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Container( - child:SfRadialGauge() + child: SfRadialGauge() ) ) - ) + ) ); + } } {% endhighlight %} +{% endtabs %} ![Initialize radial gauge](images/getting-started/default_gauge.png) @@ -81,25 +118,36 @@ After the package has been imported, initialize the [SfRadialGauge](https://www. You can add a title to the radial gauge to provide information to users about the designed gauge. The title can be set to the gauge as demonstrated in the following code snippet: -{% highlight dart %} +{% tabs %} +{% highlight dart %} + + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_gauges/gauges.dart'; - @override - Widget build(BuildContext context) { + void main() => runApp(const RadialGaugeDemo()); + + class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({super.key}); + + @override + Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Container( child: SfRadialGauge( - title:GaugeTitle(text: 'Speedometer', textStyle: TextStyle( - fontSize: 20.0,fontWeight: FontWeight.bold)) + title: GaugeTitle(text: 'Speedometer', textStyle: TextStyle( + fontSize: 20.0, fontWeight: FontWeight.bold)) ) ) ) - ) + ) ); + } } {% endhighlight %} +{% endtabs %} ![title to radial gauge](images/getting-started/gauge_title.png) @@ -107,25 +155,37 @@ You can add a title to the radial gauge to provide information to users about th Axes contain a list of axis elements, where you can add any number of radial axes inside the gauge. You can specify the minimum and maximum values of axis using the [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/minimum.html) and [`maximum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/maximum.html) properties as demonstrated in the following code snippet. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_gauges/gauges.dart'; - @override - Widget build(BuildContext context) { + void main() => runApp(const RadialGaugeDemo()); + + class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({super.key}); + + @override + Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Container( - child: SfRadialGauge( - axes: [ - RadialAxis(minimum: 0, maximum: 150)] + child: SfRadialGauge( + axes: [ + RadialAxis(minimum: 0, maximum: 150)] + ) ) ) ) - ) + ) ); + } } {% endhighlight %} +{% endtabs %} ![Axis to radial gauge](images/getting-started/gauge_axis.png) @@ -133,17 +193,42 @@ Axes contain a list of axis elements, where you can add any number of radial axe Ranges contain a list of range elements, where you can add any number of ranges inside the axis. You can specify the start value, end value, and color for range using the [`startValue`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/startValue.html), [`endValue`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/endValue.html), and [`color`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/color.html) properties as demonstrated in the following code. -{% highlight dart %} +{% tabs %} +{% highlight dart %} - axes: [ - RadialAxis(minimum: 0,maximum: 150, - ranges: [ - GaugeRange(startValue: 0,endValue: 50,color: Colors.green,startWidth: 10,endWidth:10), - GaugeRange(startValue: 50,endValue: 100,color: Colors.orange,startWidth: 10,endWidth: 10), - GaugeRange(startValue: 100,endValue: 150,color: Colors.red,startWidth: 10,endWidth: 10)] - )] + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_gauges/gauges.dart'; + + void main() => runApp(const RadialGaugeDemo()); + + class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: Container( + child: SfRadialGauge( + axes: [ + RadialAxis(minimum: 0, maximum: 150, + ranges: [ + GaugeRange(startValue: 0, endValue: 50, color: Colors.green, startWidth: 10, endWidth: 10), + GaugeRange(startValue: 50, endValue: 100, color: Colors.orange, startWidth: 10, endWidth: 10), + GaugeRange(startValue: 100, endValue: 150, color: Colors.red, startWidth: 10, endWidth: 10)] + )] + ) + ) + ) + ) + ) + ); + } + } {% endhighlight %} +{% endtabs %} ![range support to radial gauge](images/getting-started/gauge_range.png) @@ -151,14 +236,39 @@ Ranges contain a list of range elements, where you can add any number of ranges Pointers contains a list of pointer elements, where you can add any number of gauge pointers such as [`needlePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer-class.html), [`rangePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer-class.html), [`markerPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer-class.html), and [`widgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer-class.html) inside the axis to indicate the value. -{% highlight dart %} +{% tabs %} +{% highlight dart %} - axes: [ - RadialAxis(minimum: 0,maximum: 150, - pointers: [NeedlePointer(value:90)] - )] + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_gauges/gauges.dart'; + + void main() => runApp(const RadialGaugeDemo()); + + class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: Container( + child: SfRadialGauge( + axes: [ + RadialAxis(minimum: 0, maximum: 150, + pointers: [NeedlePointer(value: 90)] + )] + ) + ) + ) + ) + ) + ); + } + } {% endhighlight %} +{% endtabs %} ![gauge pointers to radial gauge](images/getting-started/gauge_pointer.png) @@ -166,56 +276,85 @@ Pointers contains a list of pointer elements, where you can add any number of ga You can add any number of widgets such as text or image as an annotation inside the axis. The position of annotation can be customized using the [`angle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/angle.html) and [`positionFactor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/positionFactor.html) properties as demonstrated in the following code. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_gauges/gauges.dart'; + + void main() => runApp(const RadialGaugeDemo()); - axes: [ - RadialAxis(minimum: 0,maximum: 150, - annotations: [ - GaugeAnnotation(widget: Container(child: - Text('90.0',style: TextStyle(fontSize: 25,fontWeight: FontWeight.bold))), - angle: 90,positionFactor: 0.5)] - )] + class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: Container( + child: SfRadialGauge( + axes: [ + RadialAxis(minimum: 0, maximum: 150, + annotations: [ + GaugeAnnotation(widget: Container(child: + Text('90.0', style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold))), + angle: 90, positionFactor: 0.5)] + )] + ) + ) + ) + ) + ) + ); + } + } {% endhighlight %} +{% endtabs %} ![annotation support to the radial gauge](images/getting-started/gauge_annotation.png) The following code example gives you the complete code of above configurations. -{% highlight dart %} +{% tabs %} +{% highlight dart %} import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_gauges/gauges.dart'; - void main() => runApp(ChartApp()); + void main() => runApp(const RadialGaugeDemo()); - class ChartApp extends StatelessWidget { + class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({super.key}); - @override - Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Container( child: SfRadialGauge( axes: [ - RadialAxis(minimum: 0,maximum: 150, - ranges: [ - GaugeRange(startValue: 0,endValue: 50,color: Colors.green,startWidth: 10,endWidth: 10), - GaugeRange(startValue: 50,endValue: 100,color: Colors.orange,startWidth: 10,endWidth: 10), - GaugeRange(startValue: 100,endValue: 150,color: Colors.red,startWidth: 10,endWidth: 10)], - pointers: [NeedlePointer(value:90)], + RadialAxis(minimum: 0, maximum: 150, + ranges: [ + GaugeRange(startValue: 0, endValue: 50, color: Colors.green, startWidth: 10, endWidth: 10), + GaugeRange(startValue: 50, endValue: 100, color: Colors.orange, startWidth: 10, endWidth: 10), + GaugeRange(startValue: 100, endValue: 150, color: Colors.red, startWidth: 10, endWidth: 10)], + pointers: [NeedlePointer(value: 90)], annotations: [ GaugeAnnotation(widget: Container(child: - Text('90.0',style: TextStyle(fontSize: 25,fontWeight:FontWeight.bold))), - angle: 90,positionFactor: 0.5)] + Text('90.0', style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold))), + angle: 90, positionFactor: 0.5)] )] ) ) ) ) - ); - } + ) + ); + } } -{% endhighlight %} \ No newline at end of file +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Flutter/radial-gauge/how-to/custom-widget-on-flutterflow.md b/Flutter/radial-gauge/how-to/custom-widget-on-flutterflow.md index c62ab82d3..c5cb56615 100644 --- a/Flutter/radial-gauge/how-to/custom-widget-on-flutterflow.md +++ b/Flutter/radial-gauge/how-to/custom-widget-on-flutterflow.md @@ -7,7 +7,7 @@ control: SfRadialGauge documentation: ug --- -# How to add Syncfusion® Radial Gauge widget in FlutterFlow? +# How to add Syncfusion® Radial Gauge widget in Flutter? ## Overview @@ -23,7 +23,7 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an 2. Click on the `+ Add` button to open a dropdown menu, then select `Widget`. 3. Update the widget name as desired. 4. Click the `View Boilerplate Code` button on the right side, represented by this icon `[]`. -5. A popup will appear with startup code; locate the button labeled ` Copy to Editor` and click on it. +5. A popup will appear with boilerplate code; locate the button labeled ` Copy to Editor` and click on it. 6. Save the widget. ![Custom Widget](how-to-section-images/custom-widget.png) @@ -35,7 +35,7 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an ![Version](how-to-section-images/copy-version.png) 3. Paste the copied dependency into the text editor, then click `Refresh` and `Save` it. ->**Note**: The live version of [Syncfusion® Flutter Gauges](https://pub.dev/packages/syncfusion_flutter_gauges) has been migrated to the latest version of Flutter SDK. To ensure compatibility, check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion® Flutter Gauges](https://pub.dev/packages/syncfusion_flutter_gauges) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility). +>**Note**: The current version of [Syncfusion® Flutter Gauges](https://pub.dev/packages/syncfusion_flutter_gauges) has been migrated to the latest version of Flutter SDK. To ensure compatibility, check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion® Flutter Gauges](https://pub.dev/packages/syncfusion_flutter_gauges) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility). ![Dependency](how-to-section-images/dependency.png) @@ -52,10 +52,10 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an ### Add widget code snippet in code editor -1. Navigate to the [Example](https://pub.dev/packages/syncfusion_flutter_gauges/example) tab in [Syncfusion® Flutter Gauges](https://pub.dev/packages/syncfusion_flutter_gauges) and copy the widget specific codes. +1. Navigate to the [Example](https://pub.dev/packages/syncfusion_flutter_gauges/example) tab in [Syncfusion® Flutter Gauges](https://pub.dev/packages/syncfusion_flutter_gauges) and copy the widget-specific code sample. ![Code](how-to-section-images/code-snippet.png) 2. Paste the copied code sample into the code editor, click `Format Code`, and `Save` it. -![Code snippet](how-to-section-images/Adding-code-snippent.png) +![Code snippet](how-to-section-images/Adding-code-snippet.png) ### Compiling the codes diff --git a/Flutter/radial-gauge/how-to/how-to-section-images/Adding-code-snippent.png b/Flutter/radial-gauge/how-to/how-to-section-images/Adding-code-snippet.png similarity index 100% rename from Flutter/radial-gauge/how-to/how-to-section-images/Adding-code-snippent.png rename to Flutter/radial-gauge/how-to/how-to-section-images/Adding-code-snippet.png diff --git a/Flutter/radial-gauge/images/annotation/annottaion_angle.jpg b/Flutter/radial-gauge/images/annotation/annotation_angle.jpg similarity index 100% rename from Flutter/radial-gauge/images/annotation/annottaion_angle.jpg rename to Flutter/radial-gauge/images/annotation/annotation_angle.jpg diff --git a/Flutter/radial-gauge/images/annotation/annottaion_axis.jpg b/Flutter/radial-gauge/images/annotation/annotation_axis.jpg similarity index 100% rename from Flutter/radial-gauge/images/annotation/annottaion_axis.jpg rename to Flutter/radial-gauge/images/annotation/annotation_axis.jpg diff --git a/Flutter/radial-gauge/images/annotation/image_annottaion.jpg b/Flutter/radial-gauge/images/annotation/image_annotation.jpg similarity index 100% rename from Flutter/radial-gauge/images/annotation/image_annottaion.jpg rename to Flutter/radial-gauge/images/annotation/image_annotation.jpg diff --git a/Flutter/radial-gauge/needle-pointer.md b/Flutter/radial-gauge/needle-pointer.md index c573d651a..63419b876 100644 --- a/Flutter/radial-gauge/needle-pointer.md +++ b/Flutter/radial-gauge/needle-pointer.md @@ -2,7 +2,7 @@ layout: post title: Needle Pointer in Flutter Radial Gauge widget | Syncfusion description: Learn here all about adding and customizing Needle Pointer of Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more. -platform: Flutter +platform: flutter control: SfRadialGauge documentation: ug --- @@ -13,25 +13,39 @@ documentation: ug {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const NeedlePointerDemo()); + +class NeedlePointerDemo extends StatelessWidget { + const NeedlePointerDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - pointers: [ - NeedlePointer(value: 60) - ] - ) - ], - ) + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + NeedlePointer(value: 60) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% tabs %} +{% endtabs %} + ![default needle pointer](images/needle-pointer/range_needleLength.jpg) ## Needle customization @@ -40,7 +54,7 @@ The needle can be customized using the following properties: * [`needleLength`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/needleLength.html) – Customizes the length of the needle. The length of the pointer can be set either in logical pixel or factor. -* [`lengthUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/lengthUnit.html) –Specifies whether to set the length in logical pixel or factor. +* [`lengthUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/lengthUnit.html) – Specifies whether to set the length in logical pixel or factor. * [`needleStartWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/needleStartWidth.html) – Specifies the start width of the needle. @@ -59,29 +73,43 @@ If the [`lengthUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/la {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const NeedleLengthDemo()); + +class NeedleLengthDemo extends StatelessWidget { + const NeedleLengthDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - pointers: [ - NeedlePointer( - value: 60, - lengthUnit: GaugeSizeUnit.logicalPixel, - needleLength: 130 - ) - ] - ) - ], - ) + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + NeedlePointer( + value: 60, + lengthUnit: GaugeSizeUnit.logicalPixel, + needleLength: 130 + ) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% tabs %} +{% endtabs %} + ![needle pointer length](images/needle-pointer/needle_lengthPixel.jpg) **Needle width customization** @@ -90,32 +118,46 @@ The width of the needle pointer can be customized using the [`needleStartWidth`] {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const NeedleWidthDemo()); + +class NeedleWidthDemo extends StatelessWidget { + const NeedleWidthDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - pointers: [ - NeedlePointer( - value: 60, - lengthUnit: GaugeSizeUnit.factor, - needleLength: 0.75, - needleColor: Colors.red, - needleStartWidth: 6, - needleEndWidth: 6 - ) - ] - ) - ], - ) + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + NeedlePointer( + value: 60, + lengthUnit: GaugeSizeUnit.factor, + needleLength: 0.75, + needleColor: Colors.red, + needleStartWidth: 6, + needleEndWidth: 6 + ) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% tabs %} +{% endtabs %} + ![needle width customization](images/needle-pointer/needle_customization.jpg) **Gradient support for needle** @@ -124,43 +166,57 @@ The width of the needle pointer can be customized using the [`needleStartWidth`] {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const NeedleGradientDemo()); + +class NeedleGradientDemo extends StatelessWidget { + const NeedleGradientDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - pointers: [ - NeedlePointer( - value: 65, - lengthUnit: GaugeSizeUnit.factor, - needleLength: 0.8, - needleEndWidth: 11, - gradient: const LinearGradient( - colors: [ - Color(0xFFFF6B78), Color(0xFFFF6B78), - Color(0xFFE20A22), Color(0xFFE20A22) - ], - stops: [0, 0.5, 0.5, 1] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + NeedlePointer( + value: 65, + lengthUnit: GaugeSizeUnit.factor, + needleLength: 0.8, + needleEndWidth: 11, + gradient: const LinearGradient( + colors: [ + Color(0xFFFF6B78), Color(0xFFFF6B78), + Color(0xFFE20A22), Color(0xFFE20A22) + ], + stops: [0, 0.5, 0.5, 1] + ), + needleColor: const Color(0xFFF67280), + knobStyle: KnobStyle( + knobRadius: 0.08, + sizeUnit: GaugeSizeUnit.factor, + color: Colors.black + ) ), - needleColor: const Color(0xFFF67280), - knobStyle: KnobStyle( - knobRadius: 0.08, - sizeUnit: GaugeSizeUnit.factor, - color: Colors.black - ) - ), - ] - ), - ] + ] + ), + ] + ), ), ), ); } +} {% endhighlight %} +{% tabs %} +{% endtabs %} + ![needle pointer gradient](images/needle-pointer/needle_gradient.jpg) ## Knob customization @@ -184,37 +240,51 @@ The logical pixel value can be set to knob radius when the [`sizeUnit`](https:// {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const KnobRadiusDemo()); + +class KnobRadiusDemo extends StatelessWidget { + const KnobRadiusDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - pointers: [ - NeedlePointer( - value: 60, - needleStartWidth: 1, - needleEndWidth: 5, - knobStyle: KnobStyle( - knobRadius: 10, - sizeUnit: GaugeSizeUnit.logicalPixel, - color: Colors.red + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + NeedlePointer( + value: 60, + needleStartWidth: 1, + needleEndWidth: 5, + knobStyle: KnobStyle( + knobRadius: 10, + sizeUnit: GaugeSizeUnit.logicalPixel, + color: Colors.red + ) ) - ) - ] - ) - ], - ) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% tabs %} +{% endtabs %} + ![knob radius customization](images/needle-pointer/knob_pixel.jpg) -If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/KnobStyle/sizeUnit.html) is set to factor, the factor value will be set to knob radius. The factor value ranges from 0 to 1. For example, if the needle length is set to 0.1, 10% of the radius value of [`axis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) will be set to knob radius. By default, the value of [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/KnobStyle/sizeUnit.html) is GaugeSizeUnit.factor +If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/KnobStyle/sizeUnit.html) is set to factor, the factor value will be set to knob radius. The factor value ranges from 0 to 1. For example, if the knob radius is set to 0.1, 10% of the radius value of [`axis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) will be set to knob radius. By default, the value of [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/KnobStyle/sizeUnit.html) is GaugeSizeUnit.factor **Knob border customization** @@ -222,38 +292,52 @@ Like radius, the [`borderWidth`](https://pub.dev/documentation/syncfusion_flutte {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const KnobBorderDemo()); + +class KnobBorderDemo extends StatelessWidget { + const KnobBorderDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - pointers: [ - NeedlePointer( - value: 60, - needleStartWidth: 1, - needleEndWidth: 5, - knobStyle: KnobStyle( - knobRadius: 0.05, - borderColor: Colors.black, - borderWidth: 0.02, - color: Colors.white + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + NeedlePointer( + value: 60, + needleStartWidth: 1, + needleEndWidth: 5, + knobStyle: KnobStyle( + knobRadius: 0.05, + borderColor: Colors.black, + borderWidth: 0.02, + color: Colors.white + ) ) - ) - ] - ) - ], - ) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% tabs %} +{% endtabs %} + ![knob border customization](images/needle-pointer/knob_border.jpg) -## Tail Customization +## Tail customization The [`tail`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/tailStyle.html) of the needle can be customized using the following properties, @@ -269,97 +353,142 @@ The [`tail`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gaug * [`gradient`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/gradient.html) - Specifies the gradient for the tail. -By default, the value of [`lengthUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/TailStyle/lengthUnit.html) is GaugeSizeUnit.factor.The factor value ranges from 0 to 1. When the length is set to 0.2, 20 % of axis radius value will be considered as tail length.The following code example shows how to specify the length in factor. +By default, the value of [`lengthUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/TailStyle/lengthUnit.html) is GaugeSizeUnit.factor. The factor value ranges from 0 to 1. When the length is set to 0.2, 20% of axis radius value will be considered as tail length. The following code example shows how to specify the length in factor. {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const TailFactorDemo()); + +class TailFactorDemo extends StatelessWidget { + const TailFactorDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - pointers: [ - NeedlePointer( - value: 60, - tailStyle: TailStyle(width: 8, length: 0.15) - ) - ] - ) - ], - ) + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + NeedlePointer( + value: 60, + tailStyle: TailStyle(width: 8, length: 0.15) + ) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% tabs %} +{% endtabs %} + ![needle tail](images/needle-pointer/needle_tail.jpg) The following code example shows how to specify the length in logical pixels. {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const TailPixelDemo()); + +class TailPixelDemo extends StatelessWidget { + const TailPixelDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - pointers: [ - NeedlePointer( - value: 60, - needleStartWidth: 3, - needleEndWidth: 3, - knobStyle: KnobStyle( - color: Colors.white, - knobRadius: 0.07, - borderColor: Colors.black, - borderWidth: 0.02 - ), - tailStyle: TailStyle( - width: 5, - length: 30, - lengthUnit: GaugeSizeUnit.logicalPixel, - color: Colors.white, - borderWidth: 3, - borderColor: Colors.black + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + NeedlePointer( + value: 60, + needleStartWidth: 3, + needleEndWidth: 3, + knobStyle: KnobStyle( + color: Colors.white, + knobRadius: 0.07, + borderColor: Colors.black, + borderWidth: 0.02 + ), + tailStyle: TailStyle( + width: 5, + length: 30, + lengthUnit: GaugeSizeUnit.logicalPixel, + color: Colors.white, + borderWidth: 3, + borderColor: Colors.black + ) ) - ) - ] - ) - ], - ) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% tabs %} +{% endtabs %} + ![needle tail customization](images/needle-pointer/tail_border.jpg) The following code shows how to apply the gradient for the tail. {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const TailGradientDemo()); + +class TailGradientDemo extends StatelessWidget { + const TailGradientDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - pointers: [ - NeedlePointer( - value: 65, - lengthUnit: GaugeSizeUnit.factor, - needleLength: 0.8, - needleEndWidth: 11, - tailStyle: TailStyle( - length: 0.2, - width: 11, + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + NeedlePointer( + value: 65, + lengthUnit: GaugeSizeUnit.factor, + needleLength: 0.8, + needleEndWidth: 11, + tailStyle: TailStyle( + length: 0.2, + width: 11, + gradient: LinearGradient( + colors: [ + Color(0xFFFF6B78), Color(0xFFFF6B78), + Color(0xFFE20A22), Color(0xFFE20A22) + ], + stops: [0, 0.5, 0.5, 1] + ), + ), gradient: LinearGradient( colors: [ Color(0xFFFF6B78), Color(0xFFFF6B78), @@ -367,31 +496,28 @@ The following code shows how to apply the gradient for the tail. ], stops: [0, 0.5, 0.5, 1] ), + needleColor: Color(0xFFF67280), + knobStyle: KnobStyle( + knobRadius: 0.08, + sizeUnit: GaugeSizeUnit.factor, + color: Colors.black + ) ), - gradient: LinearGradient( - colors: [ - Color(0xFFFF6B78), Color(0xFFFF6B78), - Color(0xFFE20A22), Color(0xFFE20A22) - ], - stops: [0, 0.5, 0.5, 1] - ), - needleColor: Color(0xFFF67280), - knobStyle: KnobStyle( - knobRadius: 0.08, - sizeUnit: GaugeSizeUnit.factor, - color: Colors.black - ) - ), - ] - ), - ] + ] + ), + ] + ), ), ), ); } +} {% endhighlight %} +{% tabs %} +{% endtabs %} + ![needle tail gradient](images/needle-pointer/tail_gradient.jpg) diff --git a/Flutter/radial-gauge/pointers.md b/Flutter/radial-gauge/pointers.md index f9e824e21..c4081339d 100644 --- a/Flutter/radial-gauge/pointers.md +++ b/Flutter/radial-gauge/pointers.md @@ -2,7 +2,7 @@ layout: post title: Pointers in Flutter Radial Gauge widget | Syncfusion description: Learn here all about adding and customizing Pointers of Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more. -platform: Flutter +platform: flutter control: SfRadialGauge documentation: ug --- @@ -22,10 +22,32 @@ All pointers can be customized to meet your specific requirement. You can add mu ## Multiple pointers -In addition to the default pointer, you can add any number of pointers to an axis by adding then to the [`pointers`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/pointers.html) collection. +By default, no pointer is added to the axis. In addition to the default pointer, you can add any number of pointers to an axis by adding them to the [`pointers`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/pointers.html) collection. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp(); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: const MultiplePointersExample(), + ); + } +} + +class MultiplePointersExample extends StatelessWidget { + const MultiplePointersExample(); + @override Widget build(BuildContext context) { return Scaffold( @@ -44,17 +66,41 @@ In addition to the default pointer, you can add any number of pointers to an axi ), ); } +} {% endhighlight %} +{% endtabs %} ![multiple pointers](images/pointers/multiple_pointer.jpg) -## Pointer Dragging +## Pointer dragging Pointers can be dragged over the scale to change their values interactively. This can be achieved by clicking and dragging the pointer. To enable or disable pointer dragging, use the [`enableDragging`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/enableDragging.html) property. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp(); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: const PointerDraggingExample(), + ); + } +} + +class PointerDraggingExample extends StatelessWidget { + const PointerDraggingExample(); + @override Widget build(BuildContext context) { return Scaffold( @@ -83,8 +129,10 @@ Pointers can be dragged over the scale to change their values interactively. Thi ), ); } +} {% endhighlight %} +{% endtabs %} ![pointer dragging](images/pointers/pointer-interaction.gif) @@ -98,8 +146,35 @@ Pointers can be dragged over the scale to change their values interactively. Thi [`onValueChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/onValueChangeEnd.html) - Occurs when the pointer dragging is completed. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp(); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: const EventExample(), + ); + } +} + +class EventExample extends StatefulWidget { + const EventExample(); + + @override + State createState() => _EventExampleState(); +} + +class _EventExampleState extends State { @override Widget build(BuildContext context) { return Scaffold( @@ -133,13 +208,52 @@ Pointers can be dragged over the scale to change their values interactively. Thi // Handle the value change print('Pointer value changed to: $value'); } +} {% endhighlight %} +{% endtabs %} The [`onCreatePointerRenderer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/onCreatePointerRenderer.html) callback allows you to create a custom pointer in the radial gauge. This callback is available for both the [`NeedlePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer-class.html) or [`MarkerPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer-class.html) types. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp(); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: const CustomPointerExample(), + ); + } +} + +class _CustomPointerRenderer extends MarkerPointerRenderer { + @override + void drawPointer( + Canvas canvas, + PointerPaintingDetails pointerPaintingDetails, + SfGaugeThemeData gaugeThemeData, + ) { + canvas.drawCircle( + pointerPaintingDetails.startOffset, + 10, + Paint()..color = Colors.red, + ); + } +} + +class CustomPointerExample extends StatelessWidget { + const CustomPointerExample(); + @override Widget build(BuildContext context) { return Scaffold( @@ -161,22 +275,9 @@ The [`onCreatePointerRenderer`](https://pub.dev/documentation/syncfusion_flutter ), ); } - - class _CustomPointerRenderer extends MarkerPointerRenderer { - @override - void drawPointer( - Canvas canvas, - PointerPaintingDetails pointerPaintingDetails, - SfGaugeThemeData gaugeThemeData, - ) { - canvas.drawCircle( - pointerPaintingDetails.startOffset, - 10, - Paint()..color = Colors.red, - ); - } - } +} {% endhighlight %} +{% endtabs %} ![create pointer callback](images/pointers/on-create-pointer-renderer.png) diff --git a/Flutter/radial-gauge/radial-gauge-title.md b/Flutter/radial-gauge/radial-gauge-title.md index e7da7b0f4..af7ad97c5 100644 --- a/Flutter/radial-gauge/radial-gauge-title.md +++ b/Flutter/radial-gauge/radial-gauge-title.md @@ -2,7 +2,7 @@ layout: post title: Title in Flutter Radial Gauge widget | Syncfusion description: Learn here all about adding and customizing Title of Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more. -platform: Flutter +platform: flutter control: SfRadialGauge documentation: ug --- @@ -15,17 +15,43 @@ The following properties are used to customize the appearance of title, * [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle/backgroundColor.html) - Changes the background color of the title. -* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle/borderWidth.html) – Changes the border width of the title.. +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle/borderWidth.html) – Changes the border width of the title. * [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle/borderColor.html) – Changes the border color of the title. * [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle/textStyle.html) - Changes the text color, size, font family, fontStyle, and font weight. -## Text Alignment +## Text alignment -You can align the title text content horizontally to the near(left), center, or far(right) position relative to the gauge using the [`alignment`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle/alignment.html) property of[`title`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle-class.html). +You can align the title text content horizontally to the near (left), center, or far (right) position relative to the gauge using the [`alignment`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle/alignment.html) property of [`title`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle-class.html). The default alignment is `GaugeAlignment.center`. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return MaterialApp( + title: 'Radial Gauge', + theme: ThemeData( + primarySwatch: Colors.blue, + ), + home: const MyHomePage(), + ); + } +} + +class MyHomePage extends StatelessWidget { + const MyHomePage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -35,7 +61,7 @@ You can align the title text content horizontally to the near(left), center, or title: GaugeTitle( text: 'SfRadialGauge', backgroundColor: Colors.lightBlueAccent, - textStyle: TextStyle( + textStyle: const TextStyle( fontSize: 15, fontWeight: FontWeight.bold, fontStyle: FontStyle.italic, @@ -49,11 +75,13 @@ You can align the title text content horizontally to the near(left), center, or axes: [ RadialAxis() ], - ) + ), ), ); } +} {% endhighlight %} +{% endtabs %} ![Gauge title](images/title/gauge_title.jpg) \ No newline at end of file diff --git a/Flutter/radial-gauge/range-pointer.md b/Flutter/radial-gauge/range-pointer.md index 409d1589b..6aae412bc 100644 --- a/Flutter/radial-gauge/range-pointer.md +++ b/Flutter/radial-gauge/range-pointer.md @@ -2,35 +2,50 @@ layout: post title: Range Pointer in Flutter Radial Gauge widget | Syncfusion description: Learn here all about adding and customizing Range Pointer of Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more. -platform: Flutter +platform: flutter control: SfRadialGauge documentation: ug --- # Range Pointer in Flutter Radial Gauge (SfRadialGauge) -A range pointer is an accenting line or shaded background range that can be placed on a gauge to mark the current value. +A range pointer is an accenting line or shaded background range that can be placed on a gauge to mark the current value. The default width is 10 logical pixels, with a default color of RGB(0, 168, 231). +{% tabs %} {% highlight dart %} +import 'package:syncfusion_flutter_gauges/gauges.dart'; +import 'package:flutter/material.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - pointers: [ - RangePointer(value: 30) - ] - ) - ], - ) + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + RangePointer(value: 30) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% endtabs %} ![default range pointer](images/range-pointer/pointer_default.jpg) @@ -42,33 +57,48 @@ The following properties are used to customize the range pointer: * [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html) – Specifies whether the [`width`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/width.html) and the [`pointerOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/pointerOffset.html) are defined in logical pixels or factor. -The [`width`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/width.html) of the pointer can be specified either in logical pixel or factor. If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html) is specified as logicalPixel, then the range will be rendered based on the provided pixel value. If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html)is set as factor, the provided factor value will be multiplied with axis radius. For example, if the width is set as 0.1, then 10% of axis radius is considered as the range pointer width. +The [`width`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/width.html) of the pointer can be specified either in logical pixel or factor. If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html) is specified as [`GaugeSizeUnit.logicalPixel`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeSizeUnit.html), then the range will be rendered based on the provided pixel value. If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html) is set as [`GaugeSizeUnit.factor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeSizeUnit.html), the provided factor value will be multiplied with axis radius. For example, if the width is set as 0.1, then 10% of axis radius is considered as the range pointer width. +{% tabs %} {% highlight dart %} +import 'package:syncfusion_flutter_gauges/gauges.dart'; +import 'package:flutter/material.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - pointers: [ - RangePointer( - value: 30, - width: 0.1, - color: Colors.indigo, - sizeUnit: GaugeSizeUnit.factor - ) - ] - ) - ], - ) + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + RangePointer( + value: 30, + width: 0.1, + color: Colors.indigo, + sizeUnit: GaugeSizeUnit.factor + ) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% endtabs %} ![range pointer customization](images/range-pointer/pointer_customization.jpg) @@ -78,29 +108,44 @@ The [`width`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gau The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/dashArray.html) property of [`range pointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer-class.html) allows rendering the range pointer as a dashed line. +{% tabs %} {% highlight dart %} +import 'package:syncfusion_flutter_gauges/gauges.dart'; +import 'package:flutter/material.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - pointers: [ - RangePointer( - value: 60, - dashArray: [8, 2] - ) - ] - ) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + RangePointer( + value: 60, + dashArray: [8, 2] + ) + ] + ) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![range pointer dasharray](images/range-pointer/pointer_dasharray.png) @@ -109,68 +154,98 @@ The [`width`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gau The [`gradient`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/gradient.html) property of [`range pointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer-class.html) allows you to specify a smooth color transition for the pointer by defining different colors based on provided factor values. - {% highlight dart %} + {% tabs %} +{% highlight dart %} + +import 'package:syncfusion_flutter_gauges/gauges.dart'; +import 'package:flutter/material.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - axisLineStyle: AxisLineStyle( - thickness: 0.1, - thicknessUnit: GaugeSizeUnit.factor, + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + axisLineStyle: AxisLineStyle( + thickness: 0.1, + thicknessUnit: GaugeSizeUnit.factor, + ), + pointers: [ + RangePointer( + value: 40, + width: 0.1, + sizeUnit: GaugeSizeUnit.factor, + gradient: const SweepGradient( + colors: [Color(0xFFCC2B5E), Color(0xFF753A88)], + stops: [0.25, 0.75] + ), + ) + ] ), - pointers: [ - RangePointer( - value: 40, - width: 0.1, - sizeUnit: GaugeSizeUnit.factor, - gradient: const SweepGradient( - colors: [Color(0xFFCC2B5E), Color(0xFF753A88)], - stops: [0.25, 0.75] - ), - ) - ] - ), - ] + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![range pointer gradient](images/range-pointer/pointer_gradient.jpg) -**Corner customization** +**corner customization** The [`cornerStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/cornerStyle.html) property of [`range pointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer-class.html) specifies the corner type for the pointer. The corners can be customized using the bothFlat, bothCurve, startCurve, and endCurve options. The default value of this property is bothFlat. - {% highlight dart %} + {% tabs %} +{% highlight dart %} + +import 'package:syncfusion_flutter_gauges/gauges.dart'; +import 'package:flutter/material.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - pointers: [ - RangePointer( - value: 30, - cornerStyle: CornerStyle.bothCurve - ) - ] - ) - ], - ) + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + RangePointer( + value: 30, + cornerStyle: CornerStyle.bothCurve + ) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% endtabs %} ![range pointer customization](images/range-pointer/pointer_corner.jpg) @@ -178,32 +253,47 @@ The [`width`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gau The range pointer can be moved farther from or closer to the axis line using the [`pointerOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/pointerOffset.html) property. The [`pointerOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/pointerOffset.html) can be set either in logical pixel or factor value using its [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html). The [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html) property is common for both[`width`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/width.html) and [`pointerOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/pointerOffset.html) +{% tabs %} {% highlight dart %} +import 'package:syncfusion_flutter_gauges/gauges.dart'; +import 'package:flutter/material.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - pointers: [ - RangePointer( - value: 30, - pointerOffset: 50 - ) - ] - ) - ], - ) + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + RangePointer( + value: 30, + pointerOffset: 50 + ) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% endtabs %} ![pointer position customization](images/range-pointer/pointer_offset.jpg) -When you set the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html) as logical pixel, the pointer will be moved to the provided logical pixel value. +When you set the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html) as [`GaugeSizeUnit.logicalPixel`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeSizeUnit.html), the pointer will be moved to the provided logical pixel value. -If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html) is specified as factor, the factor value will be multiplied with the axis radius. For example, if you set [`pointerOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/pointerOffset.html) as 0.1, then the pointer offset is considered as 10% of axis radius. +If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html) is specified as [`GaugeSizeUnit.factor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeSizeUnit.html), the factor value will be multiplied with the axis radius. For example, if you set [`pointerOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/pointerOffset.html) as 0.1, then the pointer offset is considered as 10% of axis radius. diff --git a/Flutter/radial-gauge/ranges.md b/Flutter/radial-gauge/ranges.md index ce4802b6b..ae84d57f1 100644 --- a/Flutter/radial-gauge/ranges.md +++ b/Flutter/radial-gauge/ranges.md @@ -15,26 +15,39 @@ Gauge ranges are visual elements that help to quickly visualize where a value fa The start and end values of ranges are set using the [`startValue`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/startValue.html) and [`endValue`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/endValue.html) properties. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RangesDemo()); + +class RangesDemo extends StatelessWidget { + const RangesDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - ranges: [ - GaugeRange(startValue: 30, endValue: 65) - ] - ) - ], - ) + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + ranges: [ + GaugeRange(startValue: 30, endValue: 65) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% endtabs %} ![default range](images/range/range_default.jpg) @@ -52,31 +65,44 @@ The following properties are used for range customization: * [`gradient`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/gradient.html) - Specifies the gradient for the range. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RangesDemo()); + +class RangesDemo extends StatelessWidget { + const RangesDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - ranges: [ - GaugeRange( - startValue: 30, - endValue: 65, - startWidth: 5, - endWidth: 20 - ) - ] - ) - ], - ) + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + ranges: [ + GaugeRange( + startValue: 30, + endValue: 65, + startWidth: 5, + endWidth: 20 + ) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% endtabs %} ![range thickness](images/range/range_thickness.jpg) @@ -88,35 +114,48 @@ If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/late The [`gradient`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/gradient.html) property of [`range`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange-class.html) allows to specify the smooth color transition to pointer by specifying the different colors based on provided factor value. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RangesDemo()); + +class RangesDemo extends StatelessWidget { + const RangesDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - ranges: [ - GaugeRange( - startValue: 30, - endValue: 65, - gradient: const SweepGradient( - colors: [Color(0xFFBC4E9C), Color(0xFFF80759)], - stops: [0.25, 0.75] - ), - startWidth: 5, - endWidth: 20 - ) - ] - ) - ], - ) + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + ranges: [ + GaugeRange( + startValue: 30, + endValue: 65, + gradient: const SweepGradient( + colors: [Color(0xFFBC4E9C), Color(0xFFF80759)], + stops: [0.25, 0.75] + ), + startWidth: 5, + endWidth: 20 + ) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% endtabs %} ![range gradient](images/range/range_gradient.jpg) @@ -126,33 +165,46 @@ If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/late If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/sizeUnit.html) is set as logical pixels, then the range will be moved based on the provided logical pixel value. -If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/sizeUnit.html) is set as factor, the factor value will be multiplied with the axis radius.Then the pointer will be moved to the corresponding value +If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/sizeUnit.html) is set as factor, the provided factor value will be multiplied with the axis radius. Then the range will be moved to the corresponding value. The [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/sizeUnit.html) property is common for the [`rangeOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/rangeOffset.html), [`startWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/startWidth.html) and the [`endWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/endWidth.html) properties. The default value of [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/sizeUnit.html) is logicalPixel. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RangesDemo()); + +class RangesDemo extends StatelessWidget { + const RangesDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - ranges: [ - GaugeRange( - startValue: 30, - endValue: 65, - rangeOffset: 50 - ) - ] - ) - ], - ) + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + ranges: [ + GaugeRange( + startValue: 30, + endValue: 65, + rangeOffset: 50 + ) + ] + ) + ], + ) + ), ), ); } - +} + {% endhighlight %} +{% endtabs %} ![range offset](images/range/range_offset.jpg) @@ -160,75 +212,88 @@ The [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/ You can apply range color to axis labels and ticks using the [`useRangeColorForAxis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/useRangeColorForAxis.html) property of the axis. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RangesDemo()); + +class RangesDemo extends StatelessWidget { + const RangesDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - showAxisLine: false, - ticksPosition: ElementsPosition.outside, - labelsPosition: ElementsPosition.outside, - startAngle: 270, - endAngle: 270, - useRangeColorForAxis: true, - interval: 10, - axisLabelStyle: GaugeTextStyle( - fontWeight: FontWeight.w500, - fontSize: 12 - ), - majorTickStyle: MajorTickStyle( - length: 0.15, - lengthUnit: GaugeSizeUnit.factor, - thickness: 1 - ), - minorTicksPerInterval: 4, - labelOffset: 15, - minorTickStyle: MinorTickStyle( - length: 0.04, - lengthUnit: GaugeSizeUnit.factor, - thickness: 1 - ), - ranges: [ - GaugeRange( - startValue: 0, - endValue: 35, - color: Color(0xFFF8B195), - sizeUnit: GaugeSizeUnit.factor, - rangeOffset: 0.06, - startWidth: 0.05, - endWidth: 0.25 + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + showAxisLine: false, + ticksPosition: ElementsPosition.outside, + labelsPosition: ElementsPosition.outside, + startAngle: 270, + endAngle: 270, + useRangeColorForAxis: true, + interval: 10, + axisLabelStyle: GaugeTextStyle( + fontWeight: FontWeight.w500, + fontSize: 12 ), - GaugeRange( - startValue: 35, - endValue: 70, - rangeOffset: 0.06, - sizeUnit: GaugeSizeUnit.factor, - color: Color(0xFFC06C84), - startWidth: 0.05, - endWidth: 0.25 + majorTickStyle: MajorTickStyle( + length: 0.15, + lengthUnit: GaugeSizeUnit.factor, + thickness: 1 ), - GaugeRange( - startValue: 70, - endValue: 100, - rangeOffset: 0.06, - sizeUnit: GaugeSizeUnit.factor, - color: Color(0xFF355C7D), - startWidth: 0.05, - endWidth: 0.25 + minorTicksPerInterval: 4, + labelOffset: 15, + minorTickStyle: MinorTickStyle( + length: 0.04, + lengthUnit: GaugeSizeUnit.factor, + thickness: 1 ), - ] - ) - ], - ) + ranges: [ + GaugeRange( + startValue: 0, + endValue: 35, + color: Color(0xFFF8B195), + sizeUnit: GaugeSizeUnit.factor, + rangeOffset: 0.06, + startWidth: 0.05, + endWidth: 0.25 + ), + GaugeRange( + startValue: 35, + endValue: 70, + rangeOffset: 0.06, + sizeUnit: GaugeSizeUnit.factor, + color: Color(0xFFC06C84), + startWidth: 0.05, + endWidth: 0.25 + ), + GaugeRange( + startValue: 70, + endValue: 100, + rangeOffset: 0.06, + sizeUnit: GaugeSizeUnit.factor, + color: Color(0xFF355C7D), + startWidth: 0.05, + endWidth: 0.25 + ), + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% endtabs %} ![range color to axis element](images/range/range_axislabels.jpg) @@ -236,63 +301,76 @@ You can apply range color to axis labels and ticks using the [`useRangeColorForA Text can be displayed on a range using the [`label`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/label.html) property. The provided text can be customized using the [`labelStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/labelStyle.html) property. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RangesDemo()); + +class RangesDemo extends StatelessWidget { + const RangesDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - showLabels: false, - showAxisLine: false, - showTicks: false, - minimum: 0, - maximum: 99, - ranges: [ - GaugeRange( - startValue: 0, - endValue: 33, - color: Color(0xFFFE2A25), - label: 'Slow', - sizeUnit: GaugeSizeUnit.factor, - labelStyle: GaugeTextStyle(fontFamily: 'Times', fontSize: 20), - startWidth: 0.65, - endWidth: 0.65 - ), - GaugeRange( - startValue: 33, - endValue: 66, - color: Color(0xFFFFBA00), - label: 'Moderate', - labelStyle: GaugeTextStyle(fontFamily: 'Times', fontSize: 20), - startWidth: 0.65, - endWidth: 0.65, - sizeUnit: GaugeSizeUnit.factor - ), - GaugeRange( - startValue: 66, - endValue: 99, - color: Color(0xFF00AB47), - label: 'Fast', - labelStyle: GaugeTextStyle(fontFamily: 'Times', fontSize: 20), - sizeUnit: GaugeSizeUnit.factor, - startWidth: 0.65, - endWidth: 0.65 - ), - ], - pointers: [ - NeedlePointer(value: 60) - ] - ) - ], - ) + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + showLabels: false, + showAxisLine: false, + showTicks: false, + minimum: 0, + maximum: 99, + ranges: [ + GaugeRange( + startValue: 0, + endValue: 33, + color: Color(0xFFFE2A25), + label: 'Slow', + sizeUnit: GaugeSizeUnit.factor, + labelStyle: GaugeTextStyle(fontFamily: 'Times', fontSize: 20), + startWidth: 0.65, + endWidth: 0.65 + ), + GaugeRange( + startValue: 33, + endValue: 66, + color: Color(0xFFFFBA00), + label: 'Moderate', + labelStyle: GaugeTextStyle(fontFamily: 'Times', fontSize: 20), + startWidth: 0.65, + endWidth: 0.65, + sizeUnit: GaugeSizeUnit.factor + ), + GaugeRange( + startValue: 66, + endValue: 99, + color: Color(0xFF00AB47), + label: 'Fast', + labelStyle: GaugeTextStyle(fontFamily: 'Times', fontSize: 20), + sizeUnit: GaugeSizeUnit.factor, + startWidth: 0.65, + endWidth: 0.65 + ), + ], + pointers: [ + NeedlePointer(value: 60) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% endtabs %} ![range label](images/range/range_datalabel.jpg) diff --git a/Flutter/radial-gauge/widget-pointer.md b/Flutter/radial-gauge/widget-pointer.md index 5c0d1bc9d..9476927cd 100644 --- a/Flutter/radial-gauge/widget-pointer.md +++ b/Flutter/radial-gauge/widget-pointer.md @@ -2,7 +2,7 @@ layout: post title: Widget Pointer in Flutter Radial Gauge widget | Syncfusion description: Learn here all about adding and customizing Widget Pointer of Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more. -platform: Flutter +platform: flutter control: SfRadialGauge documentation: ug --- @@ -11,8 +11,33 @@ documentation: ug [`WidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer-class.html) allows you to point to a desired value with any Flutter widget in a gauge scale. You can set the desired widget to its [`child`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer/child.html) property to annotate the pointer value. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + appBar: AppBar(title: const Text('Widget Pointer')), + body: const MyHomePage(), + ), + ); + } +} + +class MyHomePage extends StatelessWidget { + const MyHomePage({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return Scaffold( @@ -42,7 +67,7 @@ documentation: ug height: 30.00, decoration: BoxDecoration( image: DecorationImage( - image: ExactAssetImage('images/sun.png'), + image: AssetImage('images/sun.png'), fit: BoxFit.fitHeight, ), ) @@ -70,8 +95,10 @@ documentation: ug ), ); } +} {% endhighlight %} +{% endtabs %} ![default widget pointer](images/widget-pointer/widget_pointer.png) @@ -79,10 +106,37 @@ documentation: ug The widget pointer can be moved near or far from its actual position using the [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer/offset.html) and [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer/offsetUnit.html) properties. -When you set [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer/offsetUnit.html) to logical pixel, then the widget pointer will be moved based on the logical pixel value. If you set [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer/offsetUnit.html) to factor, then provided factor will be multiplied with the axis radius value, and then the pointer will be moved to corresponding value. The default value of [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer/offsetUnit.html) is [`GaugeSizeUnit.logicalPixel`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeSizeUnit-class.html). +When you set [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer/offsetUnit.html) to logical pixel, the widget pointer will be moved based on the logical pixel value. If you set [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer/offsetUnit.html) to factor, the provided factor will be multiplied by the axis radius value, and the pointer will be moved to the corresponding value. The default value of [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer/offsetUnit.html) is [`GaugeSizeUnit.logicalPixel`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeSizeUnit.html). + +**Note:** Add the image to your pubspec.yaml assets section. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + appBar: AppBar(title: const Text('Widget Pointer with Offset')), + body: const MyHomePage(), + ), + ); + } +} + +class MyHomePage extends StatelessWidget { + const MyHomePage({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return Scaffold( @@ -113,7 +167,7 @@ When you set [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gau height: 30.00, decoration: BoxDecoration( image: DecorationImage( - image: ExactAssetImage('images/sun.png'), + image: AssetImage('images/sun.png'), fit: BoxFit.fitHeight, ), ) @@ -141,7 +195,9 @@ When you set [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gau ), ); } +} {% endhighlight %} +{% endtabs %} ![widget pointer position](images/widget-pointer/widget_pointer_position.png) From 1547eecdbece9fc0a77c94409adf2130947eec90 Mon Sep 17 00:00:00 2001 From: Harsha-SF4223 <154403270+Harsha-SF4223@users.noreply.github.com> Date: Tue, 4 Aug 2026 15:10:38 +0530 Subject: [PATCH 2/2] reverted FlutterFlow changes --- Flutter/radial-gauge/how-to/custom-widget-on-flutterflow.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Flutter/radial-gauge/how-to/custom-widget-on-flutterflow.md b/Flutter/radial-gauge/how-to/custom-widget-on-flutterflow.md index c5cb56615..8815e456b 100644 --- a/Flutter/radial-gauge/how-to/custom-widget-on-flutterflow.md +++ b/Flutter/radial-gauge/how-to/custom-widget-on-flutterflow.md @@ -7,7 +7,7 @@ control: SfRadialGauge documentation: ug --- -# How to add Syncfusion® Radial Gauge widget in Flutter? +# How to add Syncfusion® Radial Gauge widget in FlutterFlow? ## Overview