--- title: "Design a Temperature Monitor in 20 Minutes Using Flutter Radial Gauge" published_at: "2020-05-04T10:30:24+00:00" modified_at: "2025-03-20T11:29:44+00:00" url: "https://www.syncfusion.com/blogs/post/temperature-monitor-using-flutter-radial-gauge" excerpt: "In this tech-driven world, physical instruments are not used anymore to visualize units of temperature, speed, and other data. Every bit of detail is shown accurately using mobile phones and other electronic devices. Designing a temperature-monitoring application has become an..." taxonomy_category: - "Desktop" - "Flutter" taxonomy_post_tag: - "Android" - "Example" - "Flutter" - "iOS" - "Radial Gauge" - "Temperature monitor" - "Web Development" --- # Design a Temperature Monitor in 20 Minutes Using Flutter Radial Gauge [Devi Aruna Maharasi Murugan](https://www.syncfusion.com/blogs/author/deviaruna-murugan) ![Spend 20 mins to Design a Temperature Monitor using Flutter Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2020/05/Spend-20-mins-to-Design-a-Temperature-Monitor-using-Flutter-Radial-Gauge.png) In this tech-driven world, physical instruments are not used anymore to visualize units of temperature, speed, and other data. Every bit of detail is shown accurately using mobile phones and other electronic devices. Designing a temperature-monitoring application has become an effortless task with our [Syncfusion Flutter Radial Gauge widget](https://www.syncfusion.com/flutter-widgets/flutter-radial-gauge) . In this blog, you are going to learn how to create a **temperature monitor** application using various features of the Flutter Radial Gauge widget. ![Temperature monitor designed using Syncfusion Flutter Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2020/05/Temperature-monitor-designed-using-Syncfusion-Flutter-Radial-Gauge.png) Temperature monitor designed using Syncfusion Flutter Radial Gauge We’ll use the following features of the Radial Gauge widget: [Axes](https://help.syncfusion.com/flutter/radial-gauge/axes) : To display the temperature range from its [minimum](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/minimum.html) to [maximum](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/maximum.html) values with specific [intervals](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/interval.html) in the radial scale along with the labels and ticks [Range](https://help.syncfusion.com/flutter/radial-gauge/ranges) : To indicate the temperature range. Multiple [range](https://help.syncfusion.com/flutter/radial-gauge/ranges) s can be added to explain the level of severity of the temperature level. The range appearance is highly customizable with [gradient colors.](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/gradient.html) [Pointer](https://help.syncfusion.com/flutter/radial-gauge/pointers) : To point to the current value in the temperature scale. [Annotation](https://help.syncfusion.com/flutter/radial-gauge/annotation) **:** To represent the unit of temperature provided in the corresponding radial scale. ## Configuring Radial Gauge widget Follow the instructions provided in the [Getting Started](https://flutter.dev/docs/get-started/test-drive?tab=vscode#create-app) documentation to create a basic project in Flutter. ### Add Radial Gauge dependency Include the [Syncfusion Flutter Radial Gauge](https://pub.dev/packages/syncfusion_flutter_gauges) package dependency in the pubspec.yaml file in your project. ``` syncfusion_flutter_gauges: ^18.1.45 ``` ### Get package To get the referenced package, run the following command in the terminal window of your project. ``` $ flutter pub get ``` ### Import package Import the Radial Gauge package into your main.dart file as shown in the following code example. ``` import 'package:syncfusion_flutter_gauges/gauges.dart'; ``` ### Add Radial Gauge widget Once the Radial Gauge package is imported in the sample, initialize the Radial Gauge widget and add it to the widget tree. ``` @override Widget build(BuildContext context) { return Scaffold( body: Center( child: SfRadialGauge(), ), ); } ``` ## Design temperature scale In the process of designing the temperature monitor, the very first step is to design a temperature scale to display the temperature range. To achieve this, you need to initialize a [radial axis](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) and add it to the [axes](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge/axes.html) collection of the widget. The radial axis allows you to display scale values that represent temperature in the axis labels of the circular scale from desired minimum to maximum values with the predefined interval. You can use the [minimum](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/minimum.html) and the [maximum](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/maximum.html) properties of the radial axis to define the minimum and maximum temperature values of the temperature scale. The [interval](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/interval.html) property of radial axis is used to control the scale interval. To customize the temperature scale start and end positions, use 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 of the radial axis. ``` axes: [ RadialAxis( minimum: -60, maximum: 120, interval: 20, startAngle: 115, endAngle: 65, ), ] ``` ![Design temperature scale on Radial Gauge widget](https://www.syncfusion.com/blogs/wp-content/uploads/2020/05/Design-temperature-scale1.png) The major elements present in the temperature scale are labels, an axis line, and major and minor ticks. In this demo, the following properties of a radial axis are used to design this highly customizable temperature scale: [axisLineStyle](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/axisLineStyle.html) : To customize the appearance of temperature scale line. [axisLabelStyle](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/axisLabelStyle.html) : To customize the appearance of temperature labels. [minorTicksPerInterval](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/minorTicksPerInterval.html) : To increase the number of minor tick counts per interval. [majorTickStyle](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/majorTickStyle.html) : To customize the appearance of ticks corresponding to the temperature scale labels. [minorTickStyle](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/minorTickStyle.html) : To customize the appearance of minor ticks that occur between the axis labels. [ticksPosition](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/ticksPosition.html) : To place the major and minor ticks either inside or outside the axis line. [labelsPosition](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/labelsPosition.html) : To place the axis labels either inside or outside the axis line. [radiusFactor](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/radiusFactor.html) : To customize the size of the radial axis. ``` axes: [ RadialAxis( ticksPosition: ElementsPosition.outside, labelsPosition: ElementsPosition.outside, minorTicksPerInterval: 5, axisLineStyle: AxisLineStyle( thicknessUnit: GaugeSizeUnit.factor, thickness: 0.1, ), axisLabelStyle: GaugeTextStyle(fontWeight: FontWeight.bold, fontSize: 16), radiusFactor: 0.97, majorTickStyle: MajorTickStyle( length: 0.1, thickness: 2, lengthUnit: GaugeSizeUnit.factor), minorTickStyle: MinorTickStyle( length: 0.05, thickness: 1.5, lengthUnit: GaugeSizeUnit.factor), minimum: -60, maximum: 120, interval: 20, startAngle: 115, endAngle: 65, ), ] ``` ![Design temperature scale 2 on Radial Gauge widget](https://www.syncfusion.com/blogs/wp-content/uploads/2020/05/Design-temperature-scale2.png) ## Add temperature range indicator Once the temperature scale design is completed, add the temperature range indicator to indicate the level of severity of the temperature. To achieve this, add a single range with gradient colors or multiple ranges using the [ranges](https://help.syncfusion.com/flutter/radial-gauge/ranges) collection property of the radial axis. In this demo, we have added a single [range](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange-class.html) with [gradient colors](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/gradient.html) to indicate the severity of the temperature: - The green color indicates the low-temperature range. - The yellow color indicates the moderate temperature range. - The red color indicates the high-temperature range. The start and the end values of the range can be controlled with 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. To customize the range width and color, use width and [gradient](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/gradient.html) properties, respectively. ``` ranges: [ GaugeRange( startValue: -60, endValue: 120, startWidth: 0.1, sizeUnit: GaugeSizeUnit.factor, endWidth: 0.1, gradient: SweepGradient( stops: [0.2, 0.5, 0.75], colors: [Colors.green, Colors.yellow, Colors.red])) ] ``` ![Adding temperature range indicator in Radial Gauge widget](https://www.syncfusion.com/blogs/wp-content/uploads/2020/05/Adding-temperature-range-indicator.png) ## Design needle pointer to indicate current temperature value Add a [needle pointer](https://help.syncfusion.com/flutter/radial-gauge/needle-pointer) to the [pointers](https://help.syncfusion.com/flutter/radial-gauge/pointers) collection of the radial axis to indicate the current temperature value in the axis. Customize the appearance of the needle pointer with its various properties: [needleColor](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/needleColor.html) : To customize the needle color. [tailStyle](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/tailStyle.html) : To customize the tail appearance of the needle. [knobStyle](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/knobStyle.html) : To customize the knob appearance. [needleLength](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/needleLength.html) : To alter the needle length. [needleStartWidth](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/needleStartWidth.html) : To customize the start width of the needle. [needleEndWidth](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/needleEndWidth.html) : To customize the end width of the needle. ``` pointers: [ NeedlePointer( value: 60, needleColor: Colors.black, tailStyle: TailStyle( length: 0.18, width: 8, color: Colors.black, lengthUnit: GaugeSizeUnit.factor), needleLength: 0.68, needleStartWidth: 1, needleEndWidth: 8, knobStyle: KnobStyle( knobRadius: 0.07, color: Colors.white, borderWidth: 0.05, borderColor: Colors.black), lengthUnit: GaugeSizeUnit.factor) ], ``` ![Design needle pointer to indicate current temperature value on the Radial Gauge widget](https://www.syncfusion.com/blogs/wp-content/uploads/2020/05/Design-needle-pointer-to-indicate-current-temperature-value.png) ## Annotate temperature unit In this example, we have used [gauge annotation](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation-class.html) to indicate whether the temperature unit type is **°F** or **°C**. The text widget displays the current unit. This text is set to the [widget](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/widget.html) property and placed in the desired location with the [positionFactor](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/positionFactor.html) and [angle](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/angle.html) properties of gauge annotation. ``` annotations: [ GaugeAnnotation( widget: Text( '°F', style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600), ), positionFactor: 0.8, angle: 90) ], ``` ![Annotate temperature unit on the Radial Gauge widget](https://www.syncfusion.com/blogs/wp-content/uploads/2020/05/Annotate-temperature-unit.png) ## Add a Celsius scale In the above section, we designed the scale to display the temperature value in Fahrenheit. Now you are going to add a temperature scale in Celsius (**°C**). To create a scale in **°C**, initialize a [radial axis](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) and insert it at the zeroth index of the [axes](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge/axes.html) collection so that the [needle pointer](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer-class.html) of the previous axis is rendered on the top of this axis For Celsius scale, we are going to use the [backgroundImage](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/backgroundImage.html) property of the radial axis. In this demo, [AssetImage](https://api.flutter.dev/flutter/painting/AssetImage-class.html) is provided as the background image of the radial axis. Refer to [this KB](https://www.syncfusion.com/kb/11333/how-to-set-a-graphical-frame-image-as-a-background-for-the-radial-gauge-widget) to learn how to set the [AssetImage](https://api.flutter.dev/flutter/painting/AssetImage-class.html) as a background image for a radial axis ``` axes: [ RadialAxis( backgroundImage: const AssetImage('images/light_frame.png')), ] ``` Customize the appearance of the temperature scale (**°C**) by using the various properties of the [radial axis](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) . ``` RadialAxis( backgroundImage: const AssetImage('images/light_frame.png'), minimum: -50, maximum: 50, interval: 10, radiusFactor: 0.5, showAxisLine: false, labelOffset: 5, useRangeColorForAxis: true, axisLabelStyle: GaugeTextStyle(fontWeight: FontWeight.bold), ), ``` ![Add a Celsius scale on the Radial Gauge widget](https://www.syncfusion.com/blogs/wp-content/uploads/2020/05/Add-a-Celsius-scale.png) As in the temperature scale in **°F**, the [ranges](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange-class.html) are added in this axis, too, to indicate the level of severity of the temperature range. ``` ranges: [ GaugeRange( startValue: -50, endValue: -20, sizeUnit: GaugeSizeUnit.factor, color: Colors.green, endWidth: 0.03, startWidth: 0.03), GaugeRange( startValue: -20, endValue: 20, sizeUnit: GaugeSizeUnit.factor, color: Colors.yellow, endWidth: 0.03, startWidth: 0.03), GaugeRange( startValue: 20, endValue: 50, sizeUnit: GaugeSizeUnit.factor, color: Colors.red, endWidth: 0.03, startWidth: 0.03), ], ``` In this axis, set the individual range color to the corresponding ticks and axis labels using the **useRangeColorForAxis** property of the radial axis. ``` annotations: [ GaugeAnnotation( widget: Text( '°C', style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600), ), positionFactor: 0.8, angle: 90) ], ``` ![Adding temperature range indicator to Celsius scale](https://www.syncfusion.com/blogs/wp-content/uploads/2020/05/Adding-temperature-range-indicator-to-celcius-scale.png) As with the previous axis, [annotation](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation-class.html) is added for displaying the temperature units of the axis.![Temperature monitor in Flutter's Radial Gauge widget](https://www.syncfusion.com/blogs/wp-content/uploads/2020/05/Temperature-monitor-Flutter.png) You can download the entire sample code of this demo from this [GitHub](https://github.com/SyncfusionExamples/flutter-temperature-monitor-demo) location [https://www.syncfusion.com/downloads/flutter](https://www.syncfusion.com/downloads/flutter) ## Conclusion I hope you now have a clear idea about the various features available for the [Syncfusion Flutter Radial Gauge widget](https://www.syncfusion.com/flutter-widgets/flutter-radial-gauge) and how to create a highly customizable application with them. Browse our [documentation](https://help.syncfusion.com/flutter/introduction/overview) to learn more about our Flutter widgets. You can find all our new features and controls in our [release notes](https://help.syncfusion.com/flutter/release-notes/v18.1.0.42?type=all) and [What’s New](https://www.syncfusion.com/products/whatsnew/flutter) page. You can also see Syncfusion’s Flutter app with many examples in this [GitHub repo](https://github.com/syncfusion/flutter-examples) . Don’t miss our demo app in [Google Play](https://play.google.com/store/apps/details?id=com.syncfusion.flutter.examples&hl=en) and the [App Store](https://apps.apple.com/in/app/syncfusion-flutter-ui-widgets/id1475231341) . If you have any questions about this control, please let us know in the comments section. You can also contact us through our [support forum](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback) . We are happy to assist you! ## Related blogs - [Flutter Succinctly](https://www.syncfusion.com/succinctly-free-ebooks/flutter-succinctly) - [What’s New in Flutter: 2023 Volume 4](https://www.syncfusion.com/blogs/post/flutter-2023-volume-4.aspx) - [Create Dynamic Forms in Flutter](https://www.syncfusion.com/blogs/post/dynamic-forms-in-flutter.aspx) - [Seamless Excel-Like Filtering Support in Flutter DataGrid](https://www.syncfusion.com/blogs/post/seamless-excel-like-filtering-in-flutter-datagrid.aspx)