FlutterFlow Docs
Search…
⌃K

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 to Your Project

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 add it 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 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, the 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 and 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 from 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 from 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 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 from 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 from 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 from 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 from 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 Progress Bar

The Animate Progress Property allows you to define whether the progress bar should animate on page load.
Circular
Linear
To enable/disable progress bar animation:
  • Select ProgressBar from the widget tree or from 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, check/uncheck to enable/disable progress bar animation on page load.
By default, the progress bar animates on page load.
Circular
Linear

Changing Color

To change the progress bar and background color:
  • Select ProgressBar from the widget tree or from 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.
Circular
Linear

Styling the 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.
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 from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the Progress Bar Properties section.
  • Find the Progress Value property, click on the Set from Variable on the right. (This will open a new panel)
    • Find the Source dropdown, click on unset, and select the Custom Function.
    • Set the Function Name to the custom function 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.
      • Set the Value Source to From Variable.
      • Set the Source to [collection] Record (from PageName).
      • Set the Available Options to the field that holds the value to be shown inside the ProgressBar.
    • Click Save.

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%, 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 from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the Progress Bar Properties section.
  • Scroll down to the Text section and find the Text property and then click on the Set from Variable on the right. (This will open a new panel)
    • Set the Source to Combine Text.
    • Under the Combine Texts section, click on Text 1 to open the section.
      • Set the Value Source to From Variable.
      • Set the Source to [collection] Record (from PageName).
      • Set the Available Options to the field that holds the value to be shown inside the ProgressBar.
      • Set the Default Value to 0.
    • Click on the + Text.
    • Click on Text 2 to open the section.
      • Set the Value Source to Specific Value.
      • Inside the Value input box, enter %.
    • Click Save.

Adding Action

To perform any action on click of the ProgressBar, add an Action in FlutterFlow. You can find the instructions on adding the Action here.

Show/Hide Container

Please find the instructions to show/hide the widget here