Flutter package for animated unit stepper.

Overview

stepo

A highly customisable Flutter package for animated unit stepper

Supported Dart Versions

Dart SDK version >= 2.1.0

Demo Gif

Stepo Demo

Installation

Pub

Add the Package

dependencies:
  stepo: ^1.0.0

How to use

Import the package in your dart file

import 'package:stepo/stepo.dart';
Basic usage :
Stepo(
  key: UniqueKey(),
),

Note: For stepo to show instant changes on hot reload, you need to provide UniqueKey() so that the widget rebuilds every time.

Customisable usage :
Stepo(
  key: UniqueKey(),
  width: 200,                                         //Optional
  backgroundColor: Colors.deepPurple,                 //Optional
  style: Style.vertical,                              //Optional
  textColor: Colors.white,                            //Optional
  animationDuration: Duration(milliseconds: 500),     //Optional
  iconColor: Colors.white,                            //Optional
  fontSize: 20,                                       //Optional
  iconSize: 30,                                       //Optional 
  initialCounter: 25,                                 //Optional
  lowerBound: 10,                                     //Optional
  upperBound: 50,                                     //Optional
  onIncrementClicked: (counter) {                     //Optional
    print("Increment clicked");
  },
  onDecrementClicked: (counter) {                     //Optional
    print("Decrement clicked");
  },
),

Customisable fields

Attribute Type Default Value
width int 160
backgroundColor color Colors.white
style vertical/horizontal Style.horizontal
textColor color Color(0xffEC645B)
animationDuration int Duration(milliseconds: 200)
iconColor color Color(0xffEC645B)
fontSize int 32
iconSize int 40
initialCounter int 0
lowerBound int 0
upperBound int 100
onIncrementClicked function (counter) {}
onDecrementClicked function (counter) {}

Inspired by

Oleg Frolov's Design

Created & Maintained By

Harpreet Singh

Damanpreet Singh

License

Copyright 2020 Harpreet Singh & Damanpreet Singh

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
You might also like...

Flutter animated theme switcher

animated_theme_switcher Animated theme switcher. This library starts from Peyman's stackoverflow question how-to-add-animation-for-theme-switching-in-

Dec 23, 2022

3d Drawer Animated && Made with algeria heart

3d Drawer Animated && Made with algeria heart

Cool 3D Drawer Animated With flutter part 1 πŸ”₯ πŸ”₯ Getting Started # You need to import this in our file import 'dart:math'; import 'package:flutter/m

Sep 10, 2022

A beautiful animated onboarding app.

A beautiful animated onboarding app.

Animated Onboarding Made with πŸ”₯ in India This flutter app is made just to demonstrate how to we can make an animated onboarding experience that looks

Dec 4, 2022

Animated triangles background widget with color gradients

Animated triangles background widget with color gradients

Triangles background Animated triangles background widget with color gradients Getting Started click image to see the video Usage add this line to pub

Oct 13, 2022

Beautiful Animated ListView and GridView

staggered_animated_listview Beautiful Animated ListView and GridView Online Preview Getting Started This project is a starting point for a Flutter app

Dec 11, 2021

An animated menu with both RTL and LTR direction support

animated_menu A new Flutter package project. Getting Started This project is a starting point for a Dart package, a library module containing code tha

Jan 31, 2022

A collection of loading indicators animated with CSS

SpinKit Simple loading spinners animated with CSS. See demo. SpinKit only uses (transform and opacity) CSS animations to create smooth and easily cust

Dec 26, 2022

πŸ”” A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

πŸ””  A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

Animated Text Kit A flutter package which contains a collection of some cool and awesome text animations. Recommended package for text animations in C

Jan 6, 2023

Dart package that converts number to words (English language)A Flutter/Dart package that converts number to words (English language)

flutter_number_to_words_english A Flutter/Dart package that converts number to words (English language) Flutter (Null Safety) Flutter (Channel stable,

Dec 9, 2022
Owner
hd-motion
hd-motion
Flutter-animated-ui-space-app - ⚑Animated UI Space App Challenge Part 5 πŸ±β€πŸ‘€πŸ±β€πŸ‘€

Flutter-animated-ui-space-app ?? ?? Project img : Image Challenge Code Image Note !! : Please include your photos to show and install simple_animation

Hmida 7 Sep 15, 2022
A beautiful animated flutter widget package library. The tab bar will attempt to use your current theme out of the box, however you may want to theme it.

Motion Tab Bar A beautiful animated widget for your Flutter apps Preview: | | Getting Started Add the plugin: dependencies: motion_tab_bar: ^0.1.5 B

Rezaul Islam 237 Nov 15, 2022
✨ A collection of loading indicators animated with flutter. Heavily Inspired by http://tobiasahlin.com/spinkit.

✨ Flutter Spinkit A collection of loading indicators animated with flutter. Heavily inspired by @tobiasahlin's SpinKit. ?? Installing dependencies:

Jeremiah Ogbomo 2.7k Dec 30, 2022
Animated Menu in Flutter using radial.

Animated_radial_Menu_in_Flutter Animated Menu in Flutter using radial. Getting Started This project is a starting point for a Flutter application. A f

Habib ullah 4 Jul 18, 2022
Cool 3D Drawer Animated With flutter part 2 πŸ”₯ πŸ”₯

Cool 3D Drawer Animated With flutter part 2 ?? ??

Hmida 12 Nov 22, 2022
Hmida 17 Nov 22, 2022
Animated Backgrounds for Flutter.

Animated Backgrounds for Flutter Animated Backgrounds for Flutter. Easily extended to paint whatever you want on the canvas. Note: These examples are

AndrΓ© Baltazar 168 Nov 27, 2022
A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration.

A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration. pub package Getting Started

Hasan Mohammed 91 Dec 20, 2022
Animated Tesla App Conect using Flutter

Animated Tesla App Conect using Flutter Watch it on YouTube Packages we are using: flutter_svg: link This video is for those who want to master Flutte

Abu Anwar 171 Dec 28, 2022
Animated collasable app drawer for flutter

collasable_drawer Animated collasable app drawer

Benjamin Mahmić 173 Jan 6, 2023