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"

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

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

Libraries

linear_progress_bar

ui/dots_indicator

utils/dots_decorator