Shiny Striped Progress Bar

An open-source Flutter package providing an animated progress bar with stripes and a shine effect.

Features

  • Smooth animations for progress changes.
  • Striped design with customizable colors.
  • Shine effect to enhance visual appeal.
  • Fully customizable height, colors, border radius, and more.

Getting Started

Installing

Add the following to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  shiny_striped_progress_bar: ^1.0.4

Then import the package in your Dart code:

import 'package:shiny_striped_progress_bar/shiny_striped_progress_bar.dart';

Example

Basic Examples

Custom Colors

Set the colors for the progress bar, background, and stripes.

Dart code 
ShinyStripedProgressBar(
  targetProgress: 0.7,
  backgroundColor: Colors.grey.shade300,
  progressColor: Colors.blue,
  stripeColor: Colors.white,
);

Shine Effect

The shine effect moves dynamically across the progress bar.

Dart code 
ShinyStripedProgressBar(
  targetProgress: 0.5,
  stripeColor: Colors.cyan,
);

Border Radius

Adjust the corner radius for rounded progress bars.

Dart code 
ShinyStripedProgressBar(
  targetProgress: 0.9,
  borderRadius: BorderRadius.circular(10),
);

Parameters Description

Parameter Type Default Value Description
targetProgress double Required Progress level between 0.0 and 1.0.
duration Duration Duration(milliseconds: 1000) Animation duration.
height double 40 Height of the progress bar.
backgroundColor Color Colors.grey.shade300 Background color of the progress bar.
progressColor Color Colors.blue Color of the progress bar.
stripeColor Color Colors.white Color of the stripes in the progress bar.
borderRadius BorderRadius BorderRadius.circular(5) Border radius for the corners of the progress bar.

Libraries

shiny_striped_progress_bar