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 Linear Progress Bar
  • Customizing Linear Progress Bar
  • Changing size
  • Changing thickness
  • Common customization
  1. BUILDING UI
  2. Widgets
  3. Base Widgets

Linear Progress Bar

The LinearProgressBar widget is used to represent the progress of any task linearly. The Linear Progress Bar is displayed in a rectangular shape and laid out horizontally on the screen.

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

Adding Linear Progress Bar

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

  1. Select the Linear 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 Linear Progress Bar

The Widget 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:

  1. Select Linear Progress Bar from the widget tree.

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

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

Changing thickness

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

  1. Select Linear Progress Bar from the widget tree.

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

  3. Find the Thickness property and enter the value.

Common customization

PreviousLottie AnimationNextYouTube Player

Last updated 1 month ago

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