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.2.0"

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';

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
    )

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,
    )

Advanced Widget usage with Linear Progress

 LinearProgressBar(
      maxSteps: 9,
      progressType: LinearProgressBar.progressTypeLinear,
      currentStep: currentStep,
      progressColor: kPrimaryColor,
      backgroundColor: kColorsGrey400,
      borderRadius: BorderRadius.circular(10), //  NEW
  );

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.
  );

NEW! Titled progress bar
```dart
 TitledProgressBar(
      maxSteps: 9,
      progressType: LinearProgressBar.progressTypeDots,
      currentStep: currentStep,
      progressColor: kPrimaryColor,
      backgroundColor: kColorsGrey400,
      label: "Title",
      labelSize: 12,
      minHeight: 10,
      borderRadius: BorderRadius.circular(10),
)

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
      ),
    ),
  );
}

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,
      ),
    ),
  );
}

You can follow me on twitter @maravilhosinga You can message me on facebook fb.com/maravilhosinga