Flutter plugin to display a simple steps indicator line widget

Related tags

Templates android dart ios package widget flutter dependency
Overview

steps_indicator

pub package

A simple steps indicator widget

Installation

Add steps_indicator: ^1.3.0 in your pubspec.yaml dependencies. And import it:

import 'package:steps_indicator/steps_indicator.dart';

How to use

Simply create a StepsIndicator widget and pass the required params:

StepsIndicator(
  selectedStep: 1,
  nbSteps: 4
)

Do not forget to check that the selectedStep is not lower than 0 and is not higher than the total number of steps (nbSteps).

Params

Animations are disabled by default if you want to enable them remember to pass properties to true.

StepsIndicator(
  selectedStep: 1,
  nbSteps: 4,
  selectedStepColorOut: Colors.blue,
  selectedStepColorIn: Colors.white,
  doneStepColor: Colors.blue,
  doneLineColor: Colors.blue,
  undoneLineColor: Colors.red,
  isHorizontal: true,
  lineLength: 40,
  doneStepSize: 10,
  unselectedStepSize: 10,
  selectedStepSize: 14,
  selectedStepBorderSize: 1,
  doneStepWidget: Container(), // Custom Widget 
  unselectedStepWidget: Container(), // Custom Widget 
  selectedStepWidget: Container(), // Custom Widget 
  lineLengthCustomStep: [
    StepsIndicatorCustomLine(nbStep: 3, length: 80)
  ],
  enableLineAnimation: true,
  enableStepAnimation: true,
)

For a more detail example please take a look at the example folder.

Example

Steps indicator:

-

If something is missing, feel free to open a ticket or contribute!

Comments
  • Add animation

    Add animation

    Hello! This package is great, thanks for the hard work!

    Would it be possible to add an animation when going to the next step?

    A really simple thing, just filling the color slowly until the next step to show more clearly to users that they advanced to the next step.

    Thanks in advance!

    enhancement 
    opened by KyleKun 10
  • Not possible to add multiple steps indicators on the same page

    Not possible to add multiple steps indicators on the same page

    Currently it's not possible to use multiple steps indicators on the same page. Selected step indicator is wrapped in a Hero widget with hardcoded tag: 'selectedStep' As a result the framework produces an exception There are multiple heroes that share the same tag within a subtree.

    bug 
    opened by romanlytvyn 2
  • Adding custom line lenght step

    Adding custom line lenght step

    In my project had the need to customize the line length between steps. The package did not allow to customize the length of one specific step, always inputted the steps (circles) in the middle of the line. I created a function to put the lenght of specific step informed in constructor of the widget ** StepsIndicator **, to do that was created a class named ** StepsIndicatorCustomLine **, below an example of use:

    StepsIndicatorCustom( nbSteps: 3, isHorizontal: false, doneStepSize: 20, unselectedStepSize: 20, selectedStepSize: 20, lineLength: 145, lineThickness: 4, selectedStep: 1, lineLengthCustomStep: [StepsIndicatorCustomLine(nbStep:2, lenght: 35)] )

    Now you can customize the length to each steps in StepsIndicator widg Screen Shot 2020-06-15 at 17 09 14

    enhancement 
    opened by CNogueira92 1
  • Added small feature that I used in my app

    Added small feature that I used in my app

    Really appreciate your work and thank for this simple library. I used your library in one of my app and changed things little bit. Please check comment I added where I changed it. Merge if you want.

    opened by maliavinash 0
  • [FEAT]: add animation to line

    [FEAT]: add animation to line

    Add animation to steps_indicator

    TODO:

    • animate the step dot
    • refacto the code

    DONE:

    • Animate line with color fill
    • add a boolean to enable/disable animation
    enhancement 
    opened by huextrat 0
  • Add label under each step

    Add label under each step

    Hello, It would be great if we can add unique labels for each step. Much like the title property in Stepper widget, but under each step not next to it.

    Thank you in advance.

    enhancement 
    opened by Ruaa-Ali 0
Owner
Hugo EXTRAT
Mobile App Developer @sqli & Mentor @OpenClassrooms 🚀 Flutter - React Native - Android
Hugo EXTRAT
GitHub https://pub.dev/packages/steps_indicator
Open source Flutter package, bar indicator made of a series of selected and unselected steps

Step Progress Indicator Open source Flutter package, bar indicator made of a series of selected and unselected steps. Made by Sandro Maglione, check o

Sandro Maglione 138 Dec 15, 2022
Smooth-Page-Indicator-Example-Flutter - A simple example about smooth page indicator in Flutter

Smooth Page Indicator Example - Flutter Screenshots ⚠️ Essential Packages smooth

AmirHossein Bayat 6 Dec 7, 2022
Iosish indicator - 🍎 Create awesome and simple iOS style floating indicator which can be found when silent/sleep mode switched on Flutter.

Iosish indicator - ?? Create awesome and simple iOS style floating indicator which can be found when silent/sleep mode switched on Flutter.

Kim Seung Hwan 2 Apr 1, 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
Flutter ticket pass - A Flutter Widget to display the details of a ticket/pass purchased by customers and display the details of the purchase

ticket_pass_package A Flutter package to display the purchase of a ticket/pass along with additional details such as list of buyers. The source code i

null 40 Aug 13, 2022
Display images flutter - Simple app to display images in flutter

Display Images In Flutter Simple app to display images in a flutter. In this dem

Manish Ahire 1 Jan 29, 2022
Flutter localization in easy steps

localize_and_translate Flutter localization in easy steps Share your love to this ❤️ Screenshots Tutorial Video Arabic : https://www.youtube.com/watch

Mohamed Sayed 48 Aug 9, 2022
It's an open source project for the steps tracking (Pedometer) built with Flutter.

Flutter Steps Tracker It's an open source project for the steps tracking (Pedometer) built with Flutter and integrated with Firebase as the initial ba

Tarek Alabd 56 Nov 5, 2022
Boozin fitness - A sample app to that will pull data from Google Fit to get the steps count and calories burned

boozin_fitness A sample app to that will pull data from Google Fit to get the st

Abhishek Kumar Gupta 1 Nov 23, 2022
Dart Alura Course First Steps with Language

Dart: primeiros passos com a linguagem This repository contains all the files de

Gabriel Pessoni 13 Nov 23, 2022
SmallTask - Take small steps to achieve big things

SmallTask - Take small steps to achieve big things. Have you ever felt that when you are working on a project you kinda get confused about what to do?

Yuji 2 Mar 7, 2022
Flutter unity mediation - Unity Mediation plugin for Flutter Applications. This plugin is able to display Rewarded and Interstitial Ads from different ad sources

Unity Mediation Unity Mediation plugin for Flutter Applications. This plugin is

Pavel Zaichyk 2 Oct 17, 2022
A tab bar widget for Flutter 💙 with point indicator.

flutter_point_tab_bar A tab bar widget with point indicator. Demo Usage TabBar( controller: _tabController, indicator: PointTabIndicator(

Hiển Lê 5 Sep 16, 2022
This package adds CustomRefreshIndicator widget that allows you to create whatever indicator you want.

Custom Refresh Indicator A flutter package that allows you to easily create a custom refresh indicator widget. TLDR; ONLINE DEMO! QUICK START CustomRe

Kamil Klyta 315 Dec 16, 2022
Flutter plugin to display a popup menu button widget with handsome design and easy to use.

menu_button Flutter widget to display a popup menu button very simply and easily customizable. Resources Documentation Pub Package GitHub Repository I

Hugo EXTRAT 63 Sep 27, 2022
A simple ratingbar for flutter which also include a rating bar indicator, supporting any fraction of rating.

A simple yet fully customizable rating bar for flutter which also include a rating bar indicator, supporting any fraction of rating. Salient Features

Sarbagya Dhaubanjar 324 Dec 27, 2022
Simple alarm app - An alarm with analog clock face and digital indicator in the center for flutter

simple_alarm_app A new Flutter project. Getting Started It's an alarm with analo

null 1 Mar 14, 2022
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

Daniel B Schneider 0 Dec 22, 2021
A Flutter plugin for IOS and Android providing a simple way to display PDFs.

Pdf Viewer Plugin A Flutter plugin for IOS and Android providing a simple way to display PDFs. Features: Display PDF. Installation First, add pdf_view

Lucas Britto 56 Sep 26, 2022