---
title: "Create Stunning Circular Progress Bars with Flutter Radial Gauge: Part 1"
published_at: "2020-08-13T10:00:55+00:00"
modified_at: "2025-04-14T11:10:53+00:00"
url: "https://www.syncfusion.com/blogs/post/circular-progress-bars-flutter-radial-gauge-p1"
excerpt: "Learn how to create stunning and animated circular progress bars using the Syncfusion Flutter Radial Gauge widget with step-by-step instructions and customizable styles."
taxonomy_category:
  - "Desktop"
  - "Development"
  - "Flutter"
  - "Mobile"
  - "Progress Bar"
  - "Radial Gauge"
taxonomy_post_tag:
  - "Flutter"
  - "Mobile"
  - "Mobile App Development"
  - "Progress Bar Control"
  - "Radial Gauge"
---

# Create Stunning Circular Progress Bars with Flutter Radial Gauge: Part 1

[Sheik Syed](https://www.syncfusion.com/blogs/author/sheiksyedm)

![Create Stunning Circular Progress Bars with Flutter Radial Gauge: Part 1](https://www.syncfusion.com/blogs/wp-content/uploads/2020/08/Create-Stunning-Circular-Progress-Bars-with-Flutter-Radial-Gauge-Part-1.png)


**TL;DR:** The blog introduces the Syncfusion Flutter Radial Gauge widget for visualizing data and tracking progress in circular formats. It covers creating animated circular progress indicators in styles like determinate, indeterminate, and segmented. Steps include configuring the Radial Gauge, adding dependencies, initializing the widget, and customizing progress bar styles. Detailed code examples show how to adjust axis labels, ticks, values, axis lines, range pointer styles, and add custom annotations.

The [Syncfusion Flutter Radial Gauge](https://www.syncfusion.com/flutter-widgets/flutter-radial-gauge)
 widget is a multi-purpose data visualization widget. It visualizes different types of data and displays the progress of various processes in a circular format.

We have already published blogs on different use cases, such as creating a [speedometer](https://www.syncfusion.com/blogs/post/speedometer-using-flutter-radial-gauge.aspx)
 and [temperature monitor](https://www.syncfusion.com/blogs/post/temperature-monitor-using-flutter-radial-gauge.aspx)
 using the Flutter Radial Gauge. To continue these use-case series posts, we will create different styles of animated circular progress indicators using the Syncfusion Flutter Radial Gauge.

The circular progress bar is used to visualize the work progress or an operation such as a download, file transfer, or installation. It can be used for showing different progress states, such as:

- Determinate
- Indeterminate
- Segmented progress

I’ve separated designing various styles for circular progress bars into a two-part blog. In this first part, you will learn about building different styles of a determinate-type circular progress bar.

![Circular Progress Bar Styles](https://www.syncfusion.com/blogs/wp-content/uploads/2020/08/Circular-Progress-Bar-Styles.gif)

Circular Progress Bar Styles

Let’s get started!

## Configuring the Radial Gauge widget

### Creating a Flutter project

First, we need to configure the Radial Gauge widget in our application. To do this, follow the instructions 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 of your project.

```
syncfusion_flutter_gauges: ^18.2.44
```

### Get packages

To download the package to the local disk, run the following command in your project terminal window.

| $ flutter pub get |
| --- |

### Import package

Import the Radial Gauge package in the **main.dart** using the following code example.

```
import 'package:syncfusion_flutter_gauges/gauges.dart';
```

### Add Radial Gauge widget

After importing the Radial Gauge package to the sample, initialize the Radial Gauge widget and add it to the widget tree, as shown in the following code example.

```
@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SfRadialGauge(),
      ),
    );
  }
```

Now that we have configured the Radial Gauge widget in our application. Let’s see the magical ways to create charming styles in it.

## Various styles in determinate-type circular progress bar

A determinate-type progress bar is used when it is possible to estimate the completion percentage of a process. Let’s see how to design the following styles in a determinate progress bar by using the Flutter Radial Gauge:

- [Normal progress bar](#normal-progress-bar)
- [Filled-track and filled-style progress bar](#filled-track-and-filled-style-progress-bar)
- [Gradient progress bar with marker](#gradient-progress-bar-with-marker-style)
- [Semi-circular progress bar style](#semi-circular-progress-bar-style)
- [Buffer progress bar](#buffer-style-progress-bar)
- [Segmented circular progress bar](#segmented-circular-progress-bar-style)

To achieve all these determinate-type circular progress bar designs, you need to use the radial axis, range pointer, and annotation features in the Radial Gauge.

### Normal progress bar style

![Normal Progress Bar](https://www.syncfusion.com/blogs/wp-content/uploads/2020/08/Normal-Progress-Bar.jpg)

Normal Progress Bar

To get the normal progress bar style, we need to disable the **labels** and ** ticks** properties in the [RadialAxis](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html)
 class and set the axis range values in 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 based on your design needs.

To show 100 percent progress, you need to define the axis’s minimum value as 0 and maximum as 100. You can also show the progress line (track) of the progress bar by customizing the **axisLineStyle**, as shown in the following code example.

```
SfRadialGauge(axes: <RadialAxis>[
                      RadialAxis(
                        minimum: 0,
                        maximum: 100,
                        showLabels: false,
                        showTicks: false,
                        axisLineStyle: AxisLineStyle(
                          thickness: 0.2,
                          cornerStyle: CornerStyle.bothCurve,
                          color: Color.fromARGB(30, 0, 169, 181),
                          thicknessUnit: GaugeSizeUnit.factor,
                        ),
                      )
                    ]),
```

![Progress Bar with Progress Line (Track)](https://www.syncfusion.com/blogs/wp-content/uploads/2020/08/Progress-Bar-with-Progress-Line-Track.jpg)

Progress Bar with Progress Line (Track)

You can add a pointer to the progress bar by customizing the position and size of the [RangePointer](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer-class.html)
 class. To show progress, the pointer [Value](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/value.html)
 should be updated with a delay action, such as a timer. Then, the pointer value will be dynamically updated by a timer for a specific duration of time. Refer to the following code example.

```
pointers: <GaugePointer>[
  RangePointer(
  value: progressValue,
  cornerStyle: CornerStyle.bothCurve,
  width: 0.2,
  sizeUnit: GaugeSizeUnit.factor,
   )
  ],
```

![Progress Bar with Custom Range Pointer](https://www.syncfusion.com/blogs/wp-content/uploads/2020/08/Progress-Bar-with-Custom-Range-Pointer.jpg)

Progress Bar with Custom Range Pointer

To add custom content to the center of the circular progress bar to indicate the completion of a progression or to convey its current status, you can use the [annotations](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/annotations.html)
 feature. To display the current updated progress value, set the pointer value to the annotation text.

```
annotations: <GaugeAnnotation>[
  GaugeAnnotation(
  positionFactor: 0.1,
  angle: 90,
  widget: Text(
  progressValue.toStringAsFixed(0) + ' / 100',
  style: TextStyle(fontSize: 11),
  ))
  ])
```

![Progress Bar with Annotation](https://www.syncfusion.com/blogs/wp-content/uploads/2020/08/Progress-Bar-with-Annotation.jpg)

Progress Bar with Annotation

### Filled-track and filled-style progress bar

To fill the track color, set the axis line [thickness](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/AxisLineStyle/thickness.html)
 to 1, [thicknessUnit](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/AxisLineStyle/thicknessUnit.html)
 to **GaugeSizeUnit.factor**, and the axis line color to fill the entire gauge radius. Add the range pointer with the offset position to show the progression.

```
RadialAxis(
                        minimum: 0,
                        maximum: 100,
                        showLabels: false,
                        showTicks: false,
                        startAngle: 270,
                        endAngle: 270,
                        axisLineStyle: AxisLineStyle(
                          thickness: 1,
                          color: const Color.fromARGB(255, 0, 169, 181),
                          thicknessUnit: GaugeSizeUnit.factor,
                        ),
                        pointers: <GaugePointer>[
                          RangePointer(
                            value: progressValue,
                            width: 0.15
                            color: Colors.white,
                            pointerOffset: 0.1,
                            cornerStyle: CornerStyle.bothCurve,
                            sizeUnit: GaugeSizeUnit.factor,
                          )
                        ],
```

Add an annotation with the current progress value, as explained in the example of the previous code.

![Filled-Track-Style Progress Bar](https://www.syncfusion.com/blogs/wp-content/uploads/2020/08/Filled-Track-Style-Progress-Bar.jpg)

Filled-Track-Style Progress Bar

To fill the progress color, set the range pointer [width](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/width.html)
 to 0.95, [sizeUnit](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html)
 to GaugeSizeUnit.factor, and the pointer’s color to fill the entire gauge radius. Add an axis line with appropriate thickness to show the track color.

```
RadialAxis(
                      minimum: 0,
                      maximum: 100,
                      showLabels: false,
                      showTicks: false,
                      startAngle: 270,
                      endAngle: 270,
                      axisLineStyle: AxisLineStyle(
                        thickness: 0.05,
                        color: const Color.fromARGB(100, 0, 169, 181),
                        thicknessUnit: GaugeSizeUnit.factor,
                      ),
                      pointers: <GaugePointer>[
                        RangePointer(
                          value: progressValue,
                          width: 0.95,
                          pointerOffset: 0.05,
                          sizeUnit: GaugeSizeUnit.factor,
                        )
                      ],
                    )
```

![Filled Progress Style](https://www.syncfusion.com/blogs/wp-content/uploads/2020/08/Filled-Progress-Style.jpg)

Filled Progress Style

### Gradient progress bar with marker style

To apply a gradient to the progress bar, set the SweepGradient with its appropriate colors and offset values to the [gradient](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/gradient.html)
 property of the range pointer. Also, add the [MarkerPointer](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer-class.html)
 and the range pointer and use the same progress value to update both pointers, as shown in the following code example.

```
pointers: <GaugePointer>[
                        RangePointer(
                            value: progressValue,
                            width: 0.1,
                            sizeUnit: GaugeSizeUnit.factor,
                            cornerStyle: CornerStyle.startCurve,
                            gradient: const SweepGradient(colors: <Color>[
                              Color(0xFF00a9b5),
                              Color(0xFFa4edeb)
                            ], stops: <double>[
                              0.25,
                              0.75
                            ])),
                        MarkerPointer(
                          value: progressValue,
                          markerType: MarkerType.circle,
                          color: const Color(0xFF87e8e8),
                        )
                      ],
```

![Gradient Progress with Marker Style](https://www.syncfusion.com/blogs/wp-content/uploads/2020/08/Gradient-Progress-with-Marker-Style.jpg)

Gradient Progress with Marker Style

### Semi-circular progress bar style

You can customize 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 to design full and semi-circular progress bars. To make a semi-circle progress bar, set the **startAngle** value to 180 and the ** endAngle** value to 0, as shown in the following code example.

```
RadialAxis(
                      showLabels: false,
                      showTicks: false,
                      startAngle: 180,
                      endAngle: 0,
                      radiusFactor: 0.7,
                      canScaleToFit: true,
                      axisLineStyle: AxisLineStyle(
                        thickness: 0.1,
                        color: const Color.fromARGB(30, 0, 169, 181),
                        thicknessUnit: GaugeSizeUnit.factor,
                        cornerStyle: CornerStyle.startCurve,
                      ),
                      pointers: <GaugePointer>[
                        RangePointer(
                            value: progressValue,
                            width: 0.1,
                            sizeUnit: GaugeSizeUnit.factor,
                            cornerStyle: CornerStyle.bothCurve)
                      ],
```

![Semi-Circular Progress Bar Style](https://www.syncfusion.com/blogs/wp-content/uploads/2020/08/Semi-Circular-Progress-Bar-Style.jpg)

Semi-Circular Progress Bar Style

### Buffer-style progress bar

In this buffer-style progress bar, you can use a secondary progress indicator to denote the primary progression, which depends on the secondary progression. This style will allow you to visualize both primary and secondary progressions simultaneously. To add primary and secondary progress pointers, use two range pointers with different progress values.

```
pointers: <GaugePointer>[
                      RangePointer(
                          value: secondaryProgressValue,
                          width: 0.1,
                          sizeUnit: GaugeSizeUnit.factor,
                          color: const Color.fromARGB(120, 0, 169, 181),
                          cornerStyle: CornerStyle.bothCurve),
                      RangePointer(
                          value: progressValue,
                          width: 0.1,
                          sizeUnit: GaugeSizeUnit.factor,
                          cornerStyle: CornerStyle.bothCurve)
                    ],
```

![Buffer Progress Bar](https://www.syncfusion.com/blogs/wp-content/uploads/2020/08/Buffer-Progress-Bar.jpg)

Buffer Progress Bar

### Segmented circular progress bar style

The segmented circular progress bar style allows you to divide a progress bar into multiple segments to visualize the progress of multi-sequence tasks.

![Segmented Circular Progress Bar Styles](https://www.syncfusion.com/blogs/wp-content/uploads/2020/08/Segmented-Circular-Progress-Bar-Styles.jpg)

Segmented Circular Progress Bar Styles

Design the segmented progress bar by customizing the RadialAxis and the RangePointer. In addition, you need to add one more RadialAxis over the first axis to create the segmented line in the progress bar. The segmented lines are generated by enabling the major ticks for the secondary radial axis with a certain interval and disabling the other axis elements.

```
axes: <RadialAxis>[
                    // Create a primary radial axis
                    RadialAxis(
                      minimum: 0,
                      maximum: 100,
                      showLabels: false,
                      showTicks: false,
                      startAngle: 270,
                      endAngle: 270,
                      radiusFactor: 0.7,
                      axisLineStyle: AxisLineStyle(
                        thickness: 0.2,
                        color: const Color.fromARGB(30, 0, 169, 181),
                        thicknessUnit: GaugeSizeUnit.factor,
                      ),
                      pointers: <GaugePointer>[
                        RangePointer(
                            value: progressValue,
                            width: 0.05,
                            pointerOffset: 0.07,
                            sizeUnit: GaugeSizeUnit.factor,
                            )
                      ],
                    ),
                    // Create a secondary radial axis for segmented line
                    RadialAxis(
                      minimum: 0,
                      interval: 1,
                      maximum: 4,
                      showLabels: false,
                      showTicks: true,
                      showAxisLine: false,
                      tickOffset: -0.05,
                      offsetUnit: GaugeSizeUnit.factor,
                      minorTicksPerInterval: 0,
                      startAngle: 270,
                      endAngle: 270,
                      radiusFactor: 0.7,
                      majorTickStyle: MajorTickStyle(
                          length: 0.3,
                          thickness: 3,
                          lengthUnit: GaugeSizeUnit.factor,
                          color: Colors.white),
                    )
                  ]
```

![Segmented Progress Bar](https://www.syncfusion.com/blogs/wp-content/uploads/2020/08/Segmented-Progress-Bar.jpg)

Segmented Progress Bar

## Animate progression with real-time data

We have explored different styles of the circular progress bar. Now, let’s see how to update real-time data.

In the real-time application, the progress value will be fetched from a service and updated in the pointer. This demo uses a timer to stimulate progress updates that last 100 milliseconds. The app state will be changed to rebuild the widgets.

The **progressValue** variable sets the pointer value and the annotation’s text value. In each timer tick, the ** progressValue** variable is incremented by 1 in the ** setState** callback, as shown in the following code. This is to update the pointer and annotation text values.

```
_timer = Timer.periodic(const Duration(milliseconds: 100),(_timer)
{
  setState(() {
    _progressValue++;
  });
});
```

In the RangePoiner, set the [animationType](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/animationType.html)
 property to linear and the timer duration to the pointer’s [animationDuration](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/animationDuration.html)
 property to make the animated progression.

```
pointers: <GaugePointer>[
                        RangePointer(
                            value: _value1,
                            width: 0.05,
                            sizeUnit: GaugeSizeUnit.factor,
                            enableAnimation: true,
                            animationDuration: 100,
                            animationType: AnimationType.linear)
                      ],
```

## GitHub reference:

You can download the sample code of all the explained circular progress bar types from this [GitHub](https://github.com/SyncfusionExamples/Flutter_circular_progress_bar)
 location.  
 [https://www.syncfusion.com/downloads/maui](https://www.syncfusion.com/downloads/maui)

## Conclusion

I hope you have enjoyed reading this blog and have a clear idea about how to create various styles for a determinate-type circular progress bar. In the upcoming part 2 blog, you can expect some more beautiful styles.

The [Syncfusion Flutter Radial Gauge widget](https://www.syncfusion.com/flutter-widgets/flutter-radial-gauge)
 has been designed with flexible UI customization options to adapt to your app easily. It also includes developer-friendly APIs to increase your productivity.

The complete user guide is [here](https://help.syncfusion.com/flutter/radial-gauge/getting-started)
, and you can also check out our other samples in this [GitHub location](https://github.com/syncfusion/flutter-examples)
. Additionally, you can download and check out our demo app in [Google Play](https://play.google.com/store/apps/details?id=com.syncfusion.flutter.examples&hl=en)
, the [App Store](https://apps.apple.com/in/app/syncfusion-flutter-ui-widgets/id1475231341)
, and our [website](https://flutter.syncfusion.com/#/)
.

The Radial Gauge is also available for our [Xamarin](https://www.syncfusion.com/xamarin-ui-controls/xamarin-circular-gauge)
, [UWP](https://www.syncfusion.com/uwp-ui-controls/radial-gauge)
, [WinForms](https://www.syncfusion.com/winforms-ui-controls/radial-gauge)
, [WPF](https://www.syncfusion.com/wpf-ui-controls/radial-gauge)
, [Blazor](https://www.syncfusion.com/blazor-components/blazor-circular-gauge)
, ASP .NET ([Core](https://www.syncfusion.com/aspnet-core-ui-controls/circular-gauge)
, [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/circular-gauge)
, [Web Forms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls/circular-gauge)
), [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-circular-gauge)
, [Angular](https://www.syncfusion.com/angular-ui-components/angular-circular-gauge)
, [React](https://www.syncfusion.com/react-ui-components/react-circular-gauge)
, and [Vue](https://www.syncfusion.com/vue-ui-components/vue-circular-gauge)
 platforms.

Check them out and create stunning circular progress bars!

The newest version of Essential Studio®® is available on the [license and downloads](https://www.syncfusion.com/account)
 page for existing Syncfusion customers. If you are not a customer, try our 30-day [free trial](https://www.syncfusion.com/downloads)
 to test the latest features.

You can always contact us through our [support forums](https://www.syncfusion.com/forums)
, [support portal](https://support.syncfusion.com/)
, or [feedback portal](https://www.syncfusion.com/feedback)
. We are always happy to assist you!