{"id":7380,"date":"2021-07-22T10:34:10","date_gmt":"2021-07-22T10:34:10","guid":{"rendered":"https:\/\/www.getwidget.dev\/blogs\/flutter-progress-bar-indicator\/"},"modified":"2024-11-21T11:53:26","modified_gmt":"2024-11-21T11:53:26","slug":"flutter-progress-bar-indicator","status":"publish","type":"post","link":"https:\/\/www.getwidget.dev\/blog\/flutter-progress-bar-indicator\/","title":{"rendered":"Linear Progress Bar Indicator In Flutter"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title ez-toc-toggle\" style=\"cursor:pointer\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.getwidget.dev\/blog\/flutter-progress-bar-indicator\/#flutter-progress-bar-%e2%80%93-a-widget-that-graphically-controls-the-component-which-shows-the-progress-of-a-task\" >Flutter Progress Bar &#8211; A widget that graphically controls the component which shows the progress of a task<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.getwidget.dev\/blog\/flutter-progress-bar-indicator\/#%e2%80%8cflutter-progress-bar-widget\" >\u200cFlutter Progress Bar Widget:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.getwidget.dev\/blog\/flutter-progress-bar-indicator\/#getwidget-progress-bar-widget-for-flutter\" >GetWidget Progress Bar Widget for Flutter:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.getwidget.dev\/blog\/flutter-progress-bar-indicator\/#how-to-start\" >How to Start:<\/a><\/li><\/ul><\/nav><\/div>\n<h2 id=\"flutter-progress-bara-widget-that-graphically-controls-the-component-which-shows-the-progress-of-a-task\"><span class=\"ez-toc-section\" id=\"flutter-progress-bar-%e2%80%93-a-widget-that-graphically-controls-the-component-which-shows-the-progress-of-a-task\"><\/span>Flutter Progress Bar &#8211; A widget that graphically controls the component which shows the progress of a task<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3 id=\"what-is-a-linear-progress-indicator\"><strong>What is a Linear Progress Indicator?<\/strong><\/h3>\n<p>Linear Progress Indicator is predefined in the flutter using which we can make the user aware that some task is being executed by the application and once it finishes they will have the output or result. It can also be used for loading time so that users don\u2019t have to see the blank screen.<\/p>\n<h3 id=\"types\"><strong>Types:<\/strong><\/h3>\n<p><strong>Indeterminate:<\/strong> Indeterminate progress indicator just used to show that the app is running and performing some tasks. However, a user won\u2019t have any clue when that background process will finish. For creating an indeterminate progress bar we set the value property null.<\/p>\n<p><strong>Determinate:<\/strong> It is a type of indicator some set time has been calculated for the execution of tasks. It also indicates how much progress is completed. The value in the determinate progress indicator ranges from 0 to 1 where 0 indicates that progress is just started and 1 indicates that the progress is completed.<\/p>\n<p><a href=\"https:\/\/docs.getwidget.dev\/gf-progress-bar\/\" target=\"_blank\" rel=\"noopener\"><strong>Flutter Progress Bar<\/strong><\/a> is a <strong>Flutter Progress Button<\/strong> that tells the percentage of progress of work that is been done in any given task or work.<\/p>\n<h2 id=\"%E2%80%8Cflutter-progress-bar-widget\"><span class=\"ez-toc-section\" id=\"%e2%80%8cflutter-progress-bar-widget\"><\/span>\u200cFlutter Progress Bar Widget:<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Flutter uses a progress bar to indicate the progress of a particular task such as downloading, uploading, file transfer, etc.<\/p>\n<p>In Flutter, we can define the progress bar of widgets inside the scaffold. Therefore before adding a progress bar of a widget we need to define a Scaffold. When we create a sample flutter app, it comes with the default scaffold.<\/p>\n<p>So, are you ready to make use of this widget package in the Flutter application? This Flutter widget visualizes the work done percentage in graphically. If so, then let&#8217;s quickly jump into the usage and the ways a Progress Bar can be modified and used to make user-friendly apps. Here I am going to use an open-source UI Library known as GetWidget to build this Progress Bar widget in Flutter.<\/p>\n<h2 id=\"getwidget-progress-bar-widget-for-flutter\"><span class=\"ez-toc-section\" id=\"getwidget-progress-bar-widget-for-flutter\"><\/span>GetWidget Progress Bar Widget for Flutter:<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>It allows you to speed up your Flutter app development by 20-30%. It has almost all widget that allows you to enhance your Flutter UI design and speed up flutter development with fully customizable features.<\/p>\n<blockquote><p><em>Now here is i am going to talk about what is <strong>GetWidget<\/strong> <a href=\"https:\/\/www.getwidget.dev\/blog\/top-flutter-progress-bar-widget-list\/\" rel=\"noreferrer\"><em>Progress Bar <\/em><\/a>widget and how we implement this on Flutter app to build awesome Flutter Progress Bar widget for an app.<\/em><\/p><\/blockquote>\n<h2 id=\"how-to-start\"><span class=\"ez-toc-section\" id=\"how-to-start\"><\/span>How to Start:<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Now here is the guide about how we should start developing the <a href=\"https:\/\/docs.getwidget.dev\/gf-progress-bar\/\" target=\"_blank\" rel=\"noopener\"><strong>GFProgressBar<\/strong><\/a> Widget with the help of the <strong>GetWidget<\/strong> UI Library.<\/p>\n<p>First, Let go with<strong> <a href=\"https:\/\/docs.getwidget.dev\/getting-started\/\" target=\"_blank\" rel=\"noopener\"><strong>Getting started<\/strong><\/a><\/strong>, It will guide you on how to start building a beautiful <a href=\"https:\/\/market.getwidget.dev\/products\/\" target=\"_blank\" rel=\"noopener\">flutter application<\/a> UI with the <strong>GetWidget<\/strong> UI library. Now, we have to install the <strong>GetWidget<\/strong> package from the <strong>pub.dev<\/strong> and use our 1000+ inbuilt Widget. To import the package in your Flutter project follow the below guide.<\/p>\n<blockquote><p><em>Install Package from pub.dev :<\/em><\/p><\/blockquote>\n<p><a href=\"https:\/\/pub.dev\/packages\/getwidget\/\" target=\"_blank\" rel=\"noopener\"><strong>https:\/\/pub.dev\/packages\/getwidget<\/strong><\/a><strong> &#8211; Check the details about GetWidget Package.<\/strong><\/p>\n<h3 id=\"import-full-package\">Import full package:<\/h3>\n<p>import &#8216;package:getwidget\/getwidget.dart&#8217;;<\/p>\n<p><strong>Note: dependencies: getwidget: ^ 4.0.0<\/strong><\/p>\n<blockquote><p><em>Keep playing with the pre-built UI components.<\/em><\/p><\/blockquote>\n<p><strong>GetWidget <\/strong>progress bar shows us the amount of work done by a component that shows in a percentage form.<\/p>\n<p>It can be of two types: Linear Progress Bar and Circular Progress Bar.<\/p>\n<p><strong>Also Read &#8211;<\/strong> <a href=\"https:\/\/www.getwidget.dev\/blog\/choosing-right-flutter-app-development-company\/\">How to Choose the Right Flutter App Development Company: A Comprehensive Guide<\/a><\/p>\n<h3 id=\"linear-flutter-progress-bar-indicator-with-percentage\">Linear Flutter Progress Bar Indicator With Percentage<\/h3>\n<p><strong>Linear GFProgressBar<\/strong> is straight and it will cover the screen width. we can use the below code to build the <em>Flutter Progress Bar Widget with many custom properties<\/em>.\u200c\u200c<\/p>\n<figure class=\"kg-card kg-image-card\"><img decoding=\"async\" class=\"kg-image lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/\/2023\/04\/linear-progress-bar.png\" alt=\"Linear Flutter Progress Bar Indicator With Percentage \" width=\"676\" height=\"689\" \/><noscript><img decoding=\"async\" class=\"kg-image lazyload\" src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/\/2023\/04\/linear-progress-bar.png\" alt=\"Linear Flutter Progress Bar Indicator With Percentage \" width=\"676\" height=\"689\" \/><\/noscript><\/figure>\n<figure class=\"kg-card kg-code-card\">\n<pre><code class=\"language-javascript\"> import 'package:getwidget\/getwidget.dart';\n\n GFProgressBar(\n     percentage: 0.9,\n     backgroundColor : Colors.pink,\n     progressBarColor: Colors.red,\n)<\/code><\/pre><figcaption><span style=\"white-space: pre-wrap;\">Linear Flutter Progress Bar indicator Example Code<\/span><\/figcaption><\/figure>\n<h3 id=\"flutter-circular-progress-bar-indicator-with-getwidget\">Flutter Circular Progress Bar Indicator with Getwidget<\/h3>\n<p><strong>A circular Flutter progressbar<\/strong> is of a circular structure. Here we use width and radius properties to make it circular.<\/p>\n<p>we can use the below code to build the Circular <em>Flutter Progress Bar indicator with Percentage Widget<\/em>.\u200c\u200c<\/p>\n<figure class=\"kg-card kg-image-card\"><img decoding=\"async\" class=\"kg-image lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/\/2023\/04\/MicrosoftTeams-image--101-.png\" alt=\"Flutter Circular Progress Bar Indicator with Getwidget\" width=\"696\" height=\"577\" \/><noscript><img decoding=\"async\" class=\"kg-image lazyload\" src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/\/2023\/04\/MicrosoftTeams-image--101-.png\" alt=\"Flutter Circular Progress Bar Indicator with Getwidget\" width=\"696\" height=\"577\" \/><\/noscript><\/figure>\n<figure class=\"kg-card kg-code-card\">\n<pre><code class=\"language-javascript\"> import 'package:getwidget\/getwidget.dart';\n \n GFProgressBar(\n     percentage: 0.6,\n     width:150,\n     radius: 100,\n     backgroundColor : Colors.black38,\n     progressBarColor: Colors.green,\n)<\/code><\/pre><figcaption><span style=\"white-space: pre-wrap;\">Flutter Circular Progress bar indicator<\/span><\/figcaption><\/figure>\n<h3 id=\"flutter-custom-progressbar-with-child-property\">Flutter Custom ProgressBar with child property<\/h3>\n<p>The <strong>Flutter Custom progress bar<\/strong> can be customized to show the percentage of work completed. By using the child property we can graphically add some enhancements to it. We can use the below code to build the GFProgressBar with child property.\u200c\u200c<\/p>\n<figure class=\"kg-card kg-image-card\"><img decoding=\"async\" class=\"kg-image lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/\/2023\/04\/MicrosoftTeams-image--103-.png\" alt=\"Flutter Custom ProgressBar with child property\" width=\"695\" height=\"343\" \/><noscript><img decoding=\"async\" class=\"kg-image lazyload\" src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/\/2023\/04\/MicrosoftTeams-image--103-.png\" alt=\"Flutter Custom ProgressBar with child property\" width=\"695\" height=\"343\" \/><\/noscript><\/figure>\n<figure class=\"kg-card kg-code-card\">\n<pre><code class=\"language-javascript\">import 'package:getwidget\/getwidget.dart';\n\nGFProgressBar(\n    percentage: 0.4,\n    lineHeight: 30,\n    child: const Padding(\n        padding: EdgeInsets.only(right: 5),\n        child: Text('40%', textAlign: TextAlign.end,\n                    style: TextStyle(fontSize: 17, color: Colors.white),\n               ),\n        ),\n     backgroundColor: Colors.black26,\n     progressBarColor: Colors.green,\n)<\/code><\/pre><figcaption><span style=\"white-space: pre-wrap;\">Flutter Custom Progress bar<\/span><\/figcaption><\/figure>\n<h3 id=\"gf-flutter-progressbar-with-leading-and-trailing-icons\">GF Flutter ProgressBar with leading and trailing icons<\/h3>\n<p>The <strong>GFProgress bar<\/strong> can be customized to show the percentage of processes completed. By using the leading and trailing property we can identify the percentage of work done. we can use the below code to build the custom GFProgressBar.\u200c\u200c<\/p>\n<figure class=\"kg-card kg-image-card\"><img decoding=\"async\" class=\"kg-image lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/\/2023\/04\/MicrosoftTeams-image--102--1.png\" alt=\"GF Flutter ProgressBar with leading and trailing icons\" width=\"697\" height=\"327\" \/><noscript><img decoding=\"async\" class=\"kg-image lazyload\" src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/\/2023\/04\/MicrosoftTeams-image--102--1.png\" alt=\"GF Flutter ProgressBar with leading and trailing icons\" width=\"697\" height=\"327\" \/><\/noscript><\/figure>\n<figure class=\"kg-card kg-code-card\">\n<pre><code class=\"language-javascript\">import 'package:getwidget\/getwidget.dart';\n\nGFProgressBar(\n     percentage: 0.7,\n     lineHeight: 30,\n     alignment: MainAxisAlignment.spaceBetween,\n     child: const Text('70%', textAlign: TextAlign.end,\n                  style: TextStyle(fontSize: 18, color: Colors.white),\n                  ),\n     leading  : Icon( Icons.sentiment_dissatisfied, color: Colors.red),\n     trailing: Icon( Icons.sentiment_satisfied, color: Colors.green),\n     backgroundColor: Colors.black12,\n     progressBarColor: Colors.blue,\n)<\/code><\/pre><figcaption><span style=\"white-space: pre-wrap;\">Flutter Progress bar with icon and percentage\u00a0<\/span><\/figcaption><\/figure>\n<h3 id=\"gf-progressbar-custom-properties\">GF ProgressBar Custom Properties<\/h3>\n<p>The Look and feel of <strong>GFProgressBar<\/strong> can be customized using the following properties:<\/p>\n<table>\n<thead>\n<tr>\n<th>Name<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>percentage<\/strong><\/td>\n<td>type of double which should be from 0 to 1 to indicate the progress percentage<\/td>\n<\/tr>\n<tr>\n<td><strong>radius<\/strong><\/td>\n<td>type of double used to show the radius of the Circular Progress Bar<\/td>\n<\/tr>\n<tr>\n<td><strong>width<\/strong><\/td>\n<td>defines the width of the progress bar<\/td>\n<\/tr>\n<tr>\n<td><strong>type<\/strong><\/td>\n<td>type of [GFProgressType] which changes the shape of progress bar ie , linear or circular<\/td>\n<\/tr>\n<tr>\n<td><strong>lineHeight<\/strong><\/td>\n<td>defines the height of the progress bar<\/td>\n<\/tr>\n<tr>\n<td><strong>circleWidth<\/strong><\/td>\n<td>defines the thickness of the circle&#8217;s arc in Circular Progress bar<\/td>\n<\/tr>\n<tr>\n<td><strong>circleStartAngle<\/strong><\/td>\n<td>defines the angle on which the circle starts to progress in degrees.(ie 0.0, 45.0, 90.0 etc)<\/td>\n<\/tr>\n<tr>\n<td><strong>animation<\/strong><\/td>\n<td>type of bool which allows the progress line to animate when the percentage value is changed, default is false<\/td>\n<\/tr>\n<tr>\n<td><strong>animationDuration<\/strong><\/td>\n<td>duration of animation in milliseconds , applicable only if animation is true<\/td>\n<\/tr>\n<tr>\n<td><strong>alignment<\/strong><\/td>\n<td>used to align the leading and trailing widget which the progress bar evenly<\/td>\n<\/tr>\n<tr>\n<td><strong>padding<\/strong><\/td>\n<td>defines the padding of the progress bar<\/td>\n<\/tr>\n<tr>\n<td><strong>animateFromLastPercentage<\/strong><\/td>\n<td>type of bool which is used to animate the progress bar from the last percentage value set<\/td>\n<\/tr>\n<tr>\n<td><strong>linearGradient<\/strong><\/td>\n<td>linear gardient colors given to the progress line color<\/td>\n<\/tr>\n<tr>\n<td><strong>autoLive<\/strong><\/td>\n<td>set to false if you don&#8217;t want to preserve the state of the widget , default is true<\/td>\n<\/tr>\n<tr>\n<td><strong>fromRightToLeft<\/strong><\/td>\n<td>set to true if you want to animate the linear progress bar from right to left<\/td>\n<\/tr>\n<tr>\n<td><strong>mask<\/strong><\/td>\n<td>Creates a mask filter that takes the progress shape being drawn and blurs it<\/td>\n<\/tr>\n<tr>\n<td><strong>clipLinearGradient<\/strong><\/td>\n<td>set to true if you want to display only a part of [linearGradient] based on percentage value,<\/td>\n<\/tr>\n<tr>\n<td><strong>progressHeadType<\/strong><\/td>\n<td>type of [GFProgressHeadType] which changes the shape of the progress head ie , circular or sqaure<\/td>\n<\/tr>\n<tr>\n<td><strong>reverse<\/strong><\/td>\n<td>type to bool which is used to display the progress in reverse direction<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3 id=\"how-can-i-fix-the-height-of-the-gfprogressbar\"><strong>How can I fix the height of the GFProgressBar?<\/strong><\/h3>\n<p>By using the lineHeight property we can fix a height to the progress bar.<\/p>\n<h3 id=\"can-we-use-animation-in-the-progress-bar\">Can we use animation in the progress bar?<\/h3>\n<p>Yes we can use animation here. There are many properties like animation, animationDuration, etc. to customize it.<\/p>\n<h3 id=\"are-there-any-specified-child-components-to-use-in-it\">Are there any specified child components to use in it?<\/h3>\n<p>No, there isn&#8217;t any specification of child components that we use here. We can use text, icons, images, etc.\u200c<\/p>\n<h3 id=\"how-can-we-use-linear-gradient-in-the-progress-bar\">How can we use linear-gradient in the progress bar?<\/h3>\n<p>Yes, we can add linear gradient by using the linearGradient property which gives gradient to the progress line.\u200c We also have a clipLinearGradient property to show a particular part of the linear gradient. For that, we have to set true to clipLinearGradient.<\/p>\n<h3 id=\"what-is-the-use-of-mask-property\">What is the use of mask property?<\/h3>\n<p>Mask property will create a filter that makes the progress shape being drawn and blurs it.\u200c<\/p>\n<p><a href=\"https:\/\/docs.getwidget.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Flutter Get Widget Docs<\/strong><\/a><\/p>\n<figure class=\"kg-card kg-bookmark-card\">\n<div class=\"kg-bookmark-content\">\n<div class=\"kg-bookmark-title\">Flutter GetWidget Docs<\/div>\n<div class=\"kg-bookmark-description\">Get Widget is one of the largest Flutter open-source UI Kit libraries for mobile or web apps. It has more than 1000+ pre-built reusable widgets.<\/div>\n<div class=\"kg-bookmark-metadata\"><img decoding=\"async\" class=\"kg-bookmark-icon lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/favicon_QkjfdlGz1.png\" alt=\"\" \/><noscript><img decoding=\"async\" class=\"kg-bookmark-icon lazyload\" src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/favicon_QkjfdlGz1.png\" alt=\"\" \/><\/noscript><span class=\"kg-bookmark-author\">getwidget<\/span><span class=\"kg-bookmark-publisher\">getwidget<\/span><\/div>\n<\/div>\n<div class=\"kg-bookmark-thumbnail\"><img decoding=\"async\" class=\"lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/docs\/tr:dpr-auto,tr:w-auto\/link-share_aT-cHzGY9.png\" alt=\"\" \/><noscript><img decoding=\"async\" class=\"lazyload\" src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/docs\/tr:dpr-auto,tr:w-auto\/link-share_aT-cHzGY9.png\" alt=\"\" \/><\/noscript><\/div>\n<\/figure>\n<p><a href=\"https:\/\/github.com\/ionicfirebaseapp\/getwidget\/\" target=\"_blank\" rel=\"noopener\"><strong>GitHub Repository<\/strong><\/a>: Please do appreciate our work through Github start<\/p>\n<h3 id=\"conclusion\">Conclusion:<\/h3>\n<p>Here we discuss, what <a href=\"https:\/\/docs.getwidget.dev\/gf-progress-bar\/\" target=\"_blank\" rel=\"noopener\"><strong>Flutter ProgressBar<\/strong><\/a> Widget is? And how we can use and implement it into our Flutter app through the <strong>GetWidget<\/strong> <strong>ProgressBar<\/strong> component. Here, there are options to customize and use other types of <strong>ProgressBar<\/strong>.<\/p>\n<h3 id=\"about-our-team\">About Our Team:<\/h3>\n<p>We have been working on Flutter since Flutter launched in beta version in 2017. And our team have been putting hundreds and hundreds of hour to experiment and implementation of Flutter. As well as after successful delivery of enterprise and SAAS applications that have been used by more than 500+ businesses around the 119+ countries. Now we are in love with Flutter development and we are very passionate about Flutter development. Now it is something we are trying to give a small contribution to the Flutter Dev Community. If you need assistance for your next app development project you can <a href=\"https:\/\/www.getwidget.dev\/hire-flutter-developer\"><strong>hire flutter app developer<\/strong><\/a> from the <strong>GetWidget<\/strong> team<\/p>\n","protected":false},"excerpt":{"rendered":"Flutter Progress Bar &#8211; A widget that graphically controls the component which shows the progress of a task&hellip;","protected":false},"author":1,"featured_media":5230,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[139],"tags":[],"class_list":{"0":"post-7380","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-flutter","8":"cs-entry"},"_links":{"self":[{"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/posts\/7380","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/comments?post=7380"}],"version-history":[{"count":3,"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/posts\/7380\/revisions"}],"predecessor-version":[{"id":8649,"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/posts\/7380\/revisions\/8649"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/media\/5230"}],"wp:attachment":[{"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/media?parent=7380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/categories?post=7380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/tags?post=7380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}