Digia Academy
Digia StudioDiscordLinkedIn
  • Introduction
    • FAQs
  • What's New
    • 2024
      • March
  • DIGIA STUDIO INTRODUCTION
    • Dashboard
    • Builder Tool
      • Navigation Menu
      • Tool Bar
      • Pages and Widgets Panel
      • Canvas Area
      • Properties Panel
    • Creating a New Project
    • Creating new Pages
    • Working with Widget Tree
    • Build Your First App
      • Hello World
      • Bytes App
        • Onboarding
        • Defining API Calls
        • Courses
        • Articles
        • Viewing your App
    • SDK Integration
      • Insert Single Pages from Digia Studio
  • Actions
    • Call API Rest Action
    • Call Rest API
    • Pop Current
    • Pop to Route
    • openUrl
    • Go To Page
    • Post Message
    • Set Page State
    • Wait (delay)
    • Drawer
    • Toast
    • Open Dialog
    • Share
    • Copy to Clipboard
  • Operations
    • API Call
    • Operators
      • Json Operators
      • Logical Operators
      • Date Time Operators
      • Math Operators
      • String Operations
  • BUILDING UI
    • Widgets
      • Form Widgets
        • PinField
        • Calendar
        • Text Form Field
      • Base Widgets
        • Animated Button
        • Check Box
        • Video Player
        • Spacer
        • Stack
        • Wrap
        • Text
        • Avatar
        • Rich Text
        • Image
        • Button
        • Icon
        • Switch
        • Sized Box
        • HtmlView
        • Lottie Animation
        • Linear Progress Bar
        • YouTube Player
        • Circular Progress Bar
      • Layout Widgets
        • ListView
        • Web View
        • Future Builder
        • Conditional Builder
        • Stream Builder
        • GridView
        • Column
        • Row
        • Container
        • Expandable
        • Divider (Horizontal)
        • Divider (Vertical)
        • Carousel
      • Persistent Footers Widgets
        • NavigationBar Widget
      • Page Widgets
        • Stepper Widget
        • Scaffold Widget
        • Paginated Listview Widget
        • TabView
        • AppBar
      • Widget Commonalities
    • Event Handlers
  • Theme
    • Colors
    • Typography
  • DATA AND BACKEND
    • API Calls
      • Setting up API Calls
      • Create API Calls
      • Import API From Curl
  • DEPLOYING YOUR APP
    • Deployment
    • Release History
  • Settings
    • App Settings
    • App Assets
    • Media Assets
  • JARGON
    • Data integration
Powered by GitBook
On this page
  • Adding Circular Progress Bar
  • Customizing Circular Progress Bar
  • Changing Stroke Width
  • Changing Stroke Align
  • Changing Stroke Cap
  • Common customization
  1. BUILDING UI
  2. Widgets
  3. Base Widgets

Circular Progress Bar

The Circular Progress Bar widget is used to represent the progress of any task linearly. It is displayed in a Circle shape.

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

Adding Circular Progress Bar

Here's how you can add the Circular Progress Bar widget to your project:

  1. Select the Circular Progress Bar widget from the Add Widget Button or add it directly from the widget tree.

  2. Move to the Property Editor (on the right side of your screen) and scroll down to the Widget Properties section to customize it.

Customizing Circular Progress Bar

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

Changing Stroke Width

You can change the default Width of the Indicator using this property.

To change the Stroke Width of the Circular Progress Bar:

  1. Select Circular Progress Bar from the widget tree.

  2. Move to the Property Editor (on the right side of your screen).

  3. Find the Stroke Width property and enter the desired values.

Changing Stroke Align

To change the alignment of the Indicator:

  1. Select Circular Progress Bar from the widget tree.

  2. Move to the Property Editor (on the right side of your screen).

  3. Find the Stroke Align property and enter the value.

Changing Stroke Cap

You can customize the styles to use for line endings.

To change the Stroke Cap:

  1. Select Circular Progress Bar from the widget tree.

  2. Move to the Property Editor (on the right side of your screen).

  3. Select the Stroke Cap from the Dropdown menu.

    1. Rounded This will begin and end contours with a semi-circle extension.

Common customization

PreviousYouTube PlayerNextLayout Widgets

Last updated 2 months ago

Square This will begin and end contours with a half square extension.

Butt This will begin and end contours with a flat edge and no extension.

There are some common customizations that you can make on both Circular and Linear ProgressBar, such as Background Color, Indicator Color, Animation Duration, Animation End Length, Border Radius and Curve (Animation). You can find the details .

here