Design a Temperature Monitor in 20 Minutes Using Flutter Radial Gauge
Tags: flutter, android, ios, webdev
Published: 2020-05-06 05:28:12

---
title: Design a Temperature Monitor in 20 Minutes Using Flutter Radial Gauge
published: true
date: 2020-05-04 10:30:24 UTC
tags: flutter, android, ios, webdev
canonical_url: https://www.syncfusion.com/blogs/post/temperature-monitor-using-flutter-radial-gauge.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/b21qvajjf0w9gfp060s2.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)<figcaption>Temperature monitor designed using Syncfusion Flutter Radial Gauge</figcaption>

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/GaugeAxis/minimum.html) to [**maximum**](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAxis/maximum.html) values with specific [**intervals**](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAxis/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 [**ranges**](https://help.syncfusion.com/flutter/radial-gauge/ranges) 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.

```cmd
syncfusion\_flutter\_gauges: ^18.1.45
```

### Get package

To get the referenced package, run the following command in the terminal window of your project.

```cmd
$ flutter pub get
```

### Import package

Import the Radial Gauge package into your main.dart file as shown in the following code example.

```js
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.

```js
@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/GaugeAxis/minimum.html) and the [**maximum**](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAxis/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/GaugeAxis/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.

```js
axes: <RadialAxis>[
        RadialAxis(
          minimum: -60,
          maximum: 120,
          interval: 20,
          startAngle: 115,
          endAngle: 65,
        ),
      ]
```

![](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/GaugeAxis/axisLineStyle.html): To customize the appearance of temperature scale line.

[**axisLabelStyle**](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAxis/axisLabelStyle.html): To customize the appearance of temperature labels.

[**minorTicksPerInterval**](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAxis/minorTicksPerInterval.html): To increase the number of minor tick counts per interval.

[**majorTickStyle**](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAxis/majorTickStyle.html): To customize the appearance of ticks corresponding to the temperature scale labels.

[**minorTickStyle**](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAxis/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/GaugeAxis/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/GaugeAxis/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.

```js
axes: <RadialAxis>[
        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 scale2](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.

```js
ranges: <GaugeRange>[
              GaugeRange(
                  startValue: -60,
                  endValue: 120,
                  startWidth: 0.1,
                  sizeUnit: GaugeSizeUnit.factor,
                  endWidth: 0.1,
                  gradient: SweepGradient(
                      stops: <double>[0.2, 0.5, 0.75],
                      colors: <Color>[Colors.green, Colors.yellow, Colors.red]))
            ]
```

![](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.

```js
pointers: <GaugePointer>[
              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](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.

```js
annotations: <GaugeAnnotation>[
                GaugeAnnotation(
                    widget: Text(
                      '°F',
                      style:
                          TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
                    ),
                    positionFactor: 0.8,
                    angle: 90)
              ],
```

![](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

```js
axes: <RadialAxis>[
          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).

```js
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](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://help.syncfusion.com/flutter/radial-gauge/ranges) are added in this axis, too, to indicate the level of severity of the temperature range.

```js
ranges: <GaugeRange>[
            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**](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAxis/useRangeColorForAxis.html) property of the radial axis.

```js
annotations: <GaugeAnnotation>[
                GaugeAnnotation(
                    widget: Text(
                      '°C',
                      style:
                          TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
                    ),
                    positionFactor: 0.8,
                    angle: 90)
              ],
```

![](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. ![](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

## 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), [Direct-Trac](https://www.syncfusion.com/support/directtrac/), or [feedback portal](https://www.syncfusion.com/feedback). We are happy to assist you!

The post [Design a Temperature Monitor in 20 Minutes Using Flutter Radial Gauge](https://www.syncfusion.com/blogs/post/temperature-monitor-using-flutter-radial-gauge.aspx) appeared first on [Syncfusion Blogs](https://www.syncfusion.com/blogs).