linear_progress_bar

Description:

linear progress bar

linear_progress_bar #
Advanced linear progress indicator like Native Android Progress Bar




Features #

Linear progress bar
Dots progress bar
Set max progress value
Set current progress value
Color animation
Progress based on a current step
Progress and background color
Custom size
Dots progress direction (Horizontal or Vertical)

!NEW FEATURES

Added

Getting started #
You should ensure that you add the router as a dependency in your flutter project.
dependencies:
linear_progress_bar: "^1.1.2"
copied to clipboard
You should then run flutter packages upgrade or update your packages in IntelliJ.
Example Project #
There is a example project in the example folder. Check it out. Otherwise, keep reading to get up and running.
Usage #
Need to include the import the package to the dart file where it will be used, use the below command,
import 'package:linear_progress_bar/linear_progress_bar.dart';
copied to clipboard
Basic Widget usage with Linear progress
LinearProgressBar(
maxSteps: 6,
progressType: LinearProgressBar.progressTypeLinear, // Use Linear progress
currentStep: 1,
progressColor: Colors.red,
backgroundColor: Colors.grey,
borderRadius: BorderRadius.circular(10), // NEW
)
copied to clipboard
NEW! Basic Widget usage with Linear Dots progress
LinearProgressBar(
maxSteps: 6,
progressType: LinearProgressBar.progressTypeDots, // Use Dots progress
currentStep: 1,
progressColor: Colors.red,
backgroundColor: Colors.grey,
)
copied to clipboard
Advanced Widget usage with Linear Progress
LinearProgressBar(
maxSteps: 9,
progressType: LinearProgressBar.progressTypeLinear,
currentStep: currentStep,
progressColor: kPrimaryColor,
backgroundColor: kColorsGrey400,
borderRadius: BorderRadius.circular(10), // NEW
);
copied to clipboard
NEW! Advanced Widget usage
LinearProgressBar(
maxSteps: 9,
progressType: LinearProgressBar.progressTypeDots,
currentStep: currentStep,
progressColor: kPrimaryColor,
backgroundColor: kColorsGrey400,
dotsAxis: Axis.horizontal, // OR Axis.vertical
dotsActiveSize: 10,
dotsInactiveSize: 10,
dotsSpacing: EdgeInsets.only(right: 10), // also can use any EdgeInsets.
);
copied to clipboard
Complete example Linear Progress
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text("Linear Progress Bar"),
),
body: Center(
child: LinearProgressBar(
maxSteps: 6,
progressType: LinearProgressBar.progressTypeLinear,
currentStep: currentStep,
progressColor: Colors.red,
backgroundColor: Colors.grey,
valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
semanticsLabel: "Label",
semanticsValue: "Value",
minHeight: 10,
borderRadius: BorderRadius.circular(10), // NEW
),
),
);
}
copied to clipboard
Complete example Linear Progress
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text("Dots Progress Bar"),
),
body: Center(
child: LinearProgressBar(
maxSteps: 9,
progressType: LinearProgressBar.progressTypeDots,
currentStep: currentStep,
progressColor: kPrimaryColor,
backgroundColor: kColorsGrey400,
dotsAxis: Axis.horizontal, // OR Axis.vertical
dotsActiveSize: 10,
dotsInactiveSize: 10,
dotsSpacing: EdgeInsets.only(right: 10), // also can use any EdgeInsets.
valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
semanticsLabel: "Label",
semanticsValue: "Value",
minHeight: 10,
),
),
);
}
copied to clipboard
You can follow me on twitter @maravilhosinga
You can message me on facebook fb.com/maravilhosinga