Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
Package detailsv1.0.0

stepo

A Flutter package for animated unit stepper with customisable animation durations, colors and sizes.

pub.dev API documentation Source code
30-day downloads
15
Likes
25
Pub points
40

Install package

flutter pub add stepo

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

Stepo is a Flutter package that provides an animated unit stepper widget with customizable animation durations, colors, and sizes. It enables smooth, visually appealing increment and decrement interactions for numeric inputs, ideal for forms or settings where user input precision matters. The package supports easy integration and offers flexibility in styling to match app themes. With no platform restrictions, it works across all Flutter-supported platforms.

Use cases

  • Form inputs requiring precise number adjustments
  • Customizable numeric selectors in mobile apps
  • Interactive UI components with visual feedback
  • Settings panels with incremental values
  • Enhanced user experience in e-commerce carts

Key features

  • Customizable animation durations
  • Configurable colors and sizes
  • Smooth, animated transitions
  • Easy integration with Flutter
  • Supports both increment and decrement actions

Suitable for

  • Developers building interactive forms
  • Design-focused Flutter applications
  • Apps needing polished numeric input widgets
  • Teams prioritizing UI/UX consistency
  • Projects with dynamic, responsive interfaces

Considerations

  • Requires manual handling of value bounds
  • Limited to numeric stepping functionality
  • No built-in validation features
  • Animation performance may vary on low-end devices
  • Not suitable for non-numeric data types

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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.

Categories

Spin Box

Source repository

Projects using this package

No data available yet.