IntervalProgressBar - An interval progress widget for Flutter

Related tags

Templates widget progressbar flutter
Overview

IntervalProgressBar

Package

An interval progress widget for Flutter.

Preview

v1 v2
demo demo v2.0.1

Depend on it

https://pub.dev/packages/intervalprogressbar

Add this to your package's pubspec.yaml file:

dependencies:
  intervalprogressbar: ^{last_version}

Features

  • Horizontal
  • Vertical
  • Circle
  • Interval Progress
  • Colorful

Getting Started

Usage

Widget buildHorizontal() => IntervalProgressBar(
    direction: IntervalProgressDirection.horizontal,
    max: 30,
    progress: 10,
    intervalSize: 2,
    size: Size(400, 10),
    highlightColor: Colors.red,
    defaultColor: Colors.grey,
    intervalColor: Colors.transparent,
    intervalHighlightColor: Colors.transparent,
    reverse: true,
    radius: 0);
Widget buildVertical() => Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [10, 29, 18, 27, 16, 15, 24, 3, 20, 10].map<Widget>((i) {
      return Padding(
          padding: EdgeInsets.only(right: 10),
          child: IntervalProgressBar(
              direction: IntervalProgressDirection.vertical,
              max: 30,
              progress: i,
              intervalSize: 2,
              size: Size(12, 200),
              highlightColor: Colors.red,
              defaultColor: Colors.grey,
              intervalColor: Colors.transparent,
              intervalHighlightColor: Colors.transparent,
              reverse: true,
              radius: 0));
    }).toList());
Widget buildCircle() => IntervalProgressBar(
      direction: IntervalProgressDirection.circle,
      max: 30,
      progress: 10,
      intervalSize: 2,
      size: Size(200, 200),
      highlightColor: Colors.red,
      defaultColor: Colors.grey,
      intervalColor: Colors.transparent,
      intervalHighlightColor: Colors.transparent,
      reverse: true,
      radius: 0,
      intervalDegrees: 5,
      strokeWith: 5,
    );

Property

Property type note
direction enum ProgressBar's direction, support vertical and horizontal
max int count of default blocks
progress int count of highlight blocks
intervalSize int size of interval blocks. when vertical direction, means height, when horizontal direction, means width
size Size size of this widget
highlightColor Color color of highlight blocks
defaultColor Color color of default blocks
intervalColor Color color of default intervals
intervalHighlightColor Color color of intervals which between highlight blocks
reverse bool
radius int
intervalDegrees double support for circle progress
strokeWith int support for circle progress
You might also like...

A Flutter Material Button that animates between Progress and Error states

A Flutter Material Button that animates between Progress and Error states

progress_button A Material Flutter Button that supports progress and error visuals Getting Started ProgressButton is designed to be easy to use and cu

Sep 21, 2022

Bmprogresshud - A lightweight progress HUD for Flutter app

Bmprogresshud - A lightweight progress HUD for Flutter app

bmprogresshud A lightweight progress HUD for your Flutter app, Inspired by SVProgressHUD. Showcase Example local HUD place ProgressHud to you containe

Nov 19, 2021

👘 [FUNCTIONAL REACTIVE PROGRAMMING].💎 The main purpose of repository is learning. 📘 A FLUTTER app help student find room 🏠 Using BLoC pattern with RxDart library, firebase as backend, .... Star 🌟 if it is helful 💓 . In progress... :zap:

👘 [FUNCTIONAL REACTIVE PROGRAMMING].💎 The main purpose of repository is learning. 📘 A FLUTTER app help student find room 🏠 Using BLoC pattern with RxDart library, firebase as backend, .... Star 🌟 if it is helful 💓 . In progress... :zap:

find_room_BLoC_RxDart A deep dive into RxDart, BLoC pattern Feature BLoC pattern RxDart (Functional Reactive Stream) Firebase + Firestore Login with e

Dec 4, 2022

Open source Flutter package, simple circular progress bar.

Open source Flutter package, simple circular progress bar.

Simple circular progress bar Open source Flutter package, simple circular progress bar. Getting Started Installing Basic Examples Colors Start angle L

Dec 23, 2022

A Flutter step_tracker plugin is collect information from user and display progress through a sequence of steps. this plugin also have privilege for fully customization from user side. like flipkart, amazon, myntra, meesho.

A Flutter step_tracker plugin is collect information from user and display progress through a sequence of steps. this plugin also have privilege for fully customization from user side. like flipkart, amazon, myntra, meesho.

step_tracker plugin A Flutter step_tracker plugin is collect information from user and display progress through a sequence of steps. this plugin also

Oct 21, 2022

A dart library to create Progress Bars in console.

A dart library to create Progress Bars in console.

A package for creating an awesome progress bar in console. Usage Options: total : Total number of steps desc : Simple text shown before the bar (optio

Oct 8, 2022

A clean and lightweight progress HUD for your iOS and tvOS app.

SVProgressHUD SVProgressHUD is a clean and easy-to-use HUD meant to display the progress of an ongoing task on iOS and tvOS. Demo Try SVProgressHUD on

Jan 3, 2023

A simple button that gives you the possibility to transform into a circular one and shows a progress indicator

A simple button that gives you the possibility to transform into a circular one and shows a progress indicator

Progress Button A simple button that gives you the possibility to transform into

Dec 22, 2021

This is an animated app used to control Tesla Car which is on progress and will be published soon

This is an animated app used to control Tesla Car which is on progress and will be published soon

Animated Tesla App Conect using Flutter Packages we are using: flutter_svg: link We will cover how to use ImplicitlyAnimatedWidge and how to use multi

Nov 13, 2021
Owner
Yang Ji
Yang Ji
GitHub
Wave progress - A custom wave progress widget

wave_progress_widget A customable wave progress widget Preview How to use Add this to your package's pubspec.yaml file: dependencies: wave_progress_

idan ben shimon 41 Jul 18, 2022
A simple modal progress HUD (heads-up display, or progress indicator) for flutter

modal_progress_hud A simple widget wrapper to enable modal progress HUD (a modal progress indicator, HUD = Heads Up Display) Inspired by this article.

Maurice McCabe 157 Nov 22, 2022
A flutter widget to indicate loading progress. Easy to use, easy to extend

?? ?? ?? A flutter widget to indicate loading progress. Easy to use, easy to extend

Manuel Duarte 2 May 30, 2022
Gif image widget help to controll gif progress,speed,repeat frames

We should know that in order to achieve Gif in flutter, we can use Image, but we have no way to manipulate Gif, for example: change its speed, control it has been playing in a frame, in which frame range loop. These problems can be solved by this widget,it also help you contain gif cache,avoid load frame every time.

Samuel Annin Yeboah 13 Dec 9, 2022
League-of-flutter - A League of Legends App in progress, developed with Flutter.

initial_app A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if t

Harlley Bastos 0 Feb 26, 2022
As a beginner , this is my own side project by using flutter & dart , Firebase . This app still in progress .

helpful_app A new Flutter application. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

null 0 Nov 23, 2021
Unsplash Client App written using dart and flutter. (Work in progress)

Upsplash Unofficial Unsplash client written using dart and flutter Sreenshots Architecture The goal of this pattern is to make it easy to separate pre

Arslan 25 Sep 1, 2022
A simple flutter app that downloads a file from the internet, shows a custom-made download progress dialog and saves the file to device's internal storage

http_downloader A simple flutter app that downloads a file from the internet using the http plugin. It has a custom-designed progress dialog which dis

Akora Ing. Debrah Kwesi Buabeng 4 Apr 6, 2021
Flutter component Gradient Progress Indicator

Gradient Progress Indicator Introduction This package shows a circular progress indicator with gradient colors, and it is possible insert texts inside

Otoniel Moreira Duarte 2 Dec 5, 2022
A collection of stylish animated dialogs like Normal, Progress, Success, Info, Warning, and Error for flutter.

stylish_dialog A collection of stylish animated dialogs like Normal, Progress, Success, Info, Warning, and Error for flutter. Showcase ⭐ Installing de

Marsad Maqsood 5 Nov 8, 2022