GF Flutter Progress Bar

GFProgress Bar is a Flutter Progress bar or a Flutter Progress Button that tells the percentage of progress done in any given task or work.

GFProgress bar can be of two types, a simple linear progress bar or a Circular Progress bar.

Flutter Linear Progress Bar Indicator

A Linear Progress Bar is a progress bar that has a straight line of progress percentage shown on them. The below code shows a simple Linear progress bar with some defined properties of the progress bar.

progress bar liner

Flutter Line Progress Bar indicator example code

 import 'package:getwidget/getwidget.dart';

 GFProgressBar(
     percentage: 0.9,
     backgroundColor : Colors.black26,
     progressBarColor: GFColors.DANGER
)

Flutter Circle Progress Bar Indicator

The Circular progress bar is as same as the linear progress bar with some additional properties added to the code structure. The Circle Progress Bar will be basically a circle in shape and the percentage will be shown inside the circle as shown in the below image. The below code shows a simple circular progress bar.

Flutter Circular Progress Bar

Flutter Circle Progress Bar Indicator example code

import 'package:getwidget/getwidget.dart';

 GFProgressBar(
     percentage: 0.9,
     width:100,
     radius: 90,
     type: GFProgressType.circular,
     backgroundColor : Colors.black26,
     progressBarColor: GFColors.DANGER
)

Flutter Progress bar with Child property

The progress bar can be customized to show the percentage of progress completed. To show the progress percentage we can use child property which is a Widget type and can be a text, icon, image, etc. The below code shows how a child's property can be used as text to show the progress percentage. Progress bar with Child property

Flutter Custom Progress Bar Indicator with child example code

import 'package:getwidget/getwidget.dart';

GFProgressBar(
    percentage: 0.5,
    lineHeight: 20,
    child: const Padding(
        padding: EdgeInsets.only(right: 5),
        child: Text('50%', textAlign: TextAlign.end,
                    style: TextStyle(fontSize: 16, color: Colors.white),
               ),
        ),
     backgroundColor: Colors.black26,
     progressBarColor: GFColors.WARNING,
)

Flutter Progress bar with leading and trailing icons

Progress bar with leading and trailing icons

The progress bar can be used with leading and trailing icons to show the level of progress percent from 0 to 1. The below code shows leading and trailing icons in a Linear Progress bar.

import 'package:getwidget/getwidget.dart';

GFProgressBar(
     percentage: 0.8,
     lineHeight: 20,
     alignment: MainAxisAlignment.spaceBetween,
     child: const Text('80%', textAlign: TextAlign.end,
                  style: TextStyle(fontSize: 16, color: Colors.white),
                  ),
     leading  : Icon( Icons.sentiment_dissatisfied, color: GFColors.DANGER),
     trailing: Icon( Icons.sentiment_satisfied, color: GFColors.SUCCESS),
     backgroundColor: Colors.black26,
     progressBarColor: GFColors.INFO,
)