ProgressBar

The ProgressBar widget is used to represent the progress of any task.

You can use the ProgressBar widget to build a UI that shows downloading/uploading of files, sales this week, hours spent, overall score, etc.

Adding ProgressBar

Here's how you can add the ProgressBar widget to your project:

Add the ProgressBar widget by dragging it from the Base Elements tab or directly from the widget tree and align it in the center.
Move to the Property Editor (on the right side of your screen) and scroll down to the Progress Bar Properties section.
Find the Progress Bar Shape dropdown and set it to either Circular or Linear.
- Circular: The ProgressBar is displayed in a Circle shape. This is the default shape set to the ProgressBar.
- Linear: The ProgressBar is displayed in a rectangular shape and laid out horizontally on the screen.
To set the progress, find the Progress Value input box and enter the value between 0 to 1.0. For example, a value of 0.3 will fill 30% of the portion on the ProgressBar.
To change the progress text (displayed in the center), scroll down to the Text section, find the Text property, and enter the value.

Customizing circular progressBar

The Properties Panel can be used to customize the appearance and behavior of the Circular Progress Bar.

Changing size

You may want to change the default size of the Circular ProgressBar to match your design. You can do so using the Diameter property.

To change the size of the Circular progress bar:

Select ProgressBar from the widget tree or the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Progress Bar Properties section.
Find the Diameter property. Now, there are two ways to change the size:
- To set to an exact size, select PX and enter the desired values.
- To set the size as a % of the screen size, select % and enter the desired value.

Changing thickness

Changing the thickness property allows you to change the size of the progress bar belt.

Select ProgressBar from the widget tree or the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Progress Bar Properties section.
Find the Thickness property and enter the value.

Changing start angle

By default, the progress bar starts filling the progress from the top-center position (i.e., 0 degree). However, you can set it to start the progress bar from a specific angle using the Start Angle property.

To change the start angle:

Select ProgressBar from the widget tree or the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Progress Bar Properties section.
Find the Start Angle (degree) property and enter the value in degree. For example, entering a value of 90 fills the progress bar from the right. Whereas the value of 180 fills the progress bar from the bottom.

Customizing linear progress bar

The Properties Panel can be used to customize the appearance and behavior of the Linear Progress Bar.

Changing size

You can change the default size using the Width property.

To change the size of the Linear Progress Bar:

Select ProgressBar from the widget tree or the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Progress Bar Properties section.
Find the Width property. Now, there are two ways to change the size:
- To set to an exact size, select PX and enter the desired values.
- To set the size as a % of the screen size, select % and enter the desired value.

Changing thickness

Changing the thickness property allows you to change the height of the progress bar.

Select ProgressBar from the widget tree or the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Progress Bar Properties section.
Find the Thickness property and enter the value.

Changing end radius

By default, the progress bar appears in a rectangular shape. However, you can make it rounded rectangular using the End Radius property.

To change the end radius:

Select ProgressBar from the widget tree or the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Progress Bar Properties section.
Find the End Radius property and enter the value.

Common customization

There are some common customizations that you can make on both Circular and Linear ProgressBar, such as Animation on Page load, Changing Color, and Styling Text.

Animating ProgressBar

The Animate Progress Property allows you to define whether the progress bar should animate on page load.

To enable/disable progress bar animation:

Select ProgressBar from the widget tree or the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Progress Bar Properties section.
Find the Animate Progress property, and check/uncheck to enable/disable progress bar animation on page load.

By default, the progress bar animates on page load.

Changing color

To change the progress bar and background color:

Select ProgressBar from the widget tree or the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Progress Bar Properties section.
To change the color of the filled portion of the progress bar, find the Progress Color property, click on the box next to Unset, select the color, and then click Use Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.
Similarly to change the color of the unfilled portion of the progress bar, find the Background Color property and change the color.

Styling text

Here are the instructions on styling the Text.

Set color dynamically

See how to set a color from variable to any color property of this widget.

Show progress from Firestore Data

You may be using the Firstore to store your app data in the collection-document model. Let's build an example of showing the progress value inside the ProgressBar from the Firestore data.

Showing progress from Firestore data comprises of following steps:

1. Prerequisites

Before we fetch data from Firestore, make sure you incorporate all the mentioned prerequisites to have some data in Firestore.

Be familiar with Structuring the Firebase Database.
Complete all steps in the Firebase Setup section for your project.
Create a Collection called Todos.
Add Data to Collection.

A record/document inside the collection should look similar to the following:

2. Querying a single document

Querying a single document on a page helps you retrieve the document data that may contain the value to display on ProgressBar.

To query a single document on page:

Select a page.
Click on the Backend Query tab (on the right side of your screen).
Set the Query Type to Query Collection.
Scroll down to find the Collection dropdown and change it to your collection.
Set the Query Type to Single Documents.
Click on the + Filter to find the exact document/record.
Find the Field Name and click on the Unset and select a field on which you would like to apply the filter.
Find Relation dropdown, click on the Unset and choose the relation amongst the list.
Find the Value property and set it to an appropriate value.
Click Save.

3. Creating custom function

If you have stored the progress value as shown in the first step such as 20, 30, 70 then you need to create a custom function that divides the value by 100 and returns the result as 0.2, 0.3, 0.7. This is helpful in setting the value for the Progress Value property.

To create a custom function:

Define the function by giving it a proper name, add the Return Data Type as Double, and then create the Argument with Data Type as Integer. Find instructions on how to define function here.
Add the code that divides the value by 100. Find instructions on how to add code here.
Test the function by passing some random value. Find instructions on how to test code here.
Click Save.

Custom Function Code:

import 'dart:math' as math;

double gerProgressValue(int percentage) {
  return percentage / 100;
}

4. Showing value on ProgressBar

To show progress on ProgressBar, you need to call the custom function (created in the previous step) and then pass the value from Firestore data.

To show value on the progress bar:

Select the ProgressBar widget, move to the properties panel, find the Progress Value property and click on the Set from Variable.
Set the Source to Custom Functions > Function Name (created in the previous step).
Under the Set Function Arguments, click on the Argument Name (created while defining the custom function) to open the section.
1. Set the Value Source to From Variable.
2. Click on UNSET and select Source as [collection_name] Document and Available Options to the field you wish to show.
Click Confirm.

5. Showing value in ProgressBar text

The progress bar text appears in the center of the ProgressBar. Since you need to display the value with a percent sign such as 20%, 30%, or 70%, you should combine the two texts. The first text is from Firestore data, and the second text is the '%' sign.

To show value in progress bar text:

Select the ProgressBar widget, move to the properties panel, find the Text property and click on the Set from Variable.
Select Source > Combine Text.
Set Text 1 from the variable as [collection_name] Document and Available Options to the field you wish to show.
Click Add Text and enter the value as a '%' sign.
Click Confirm.