flutter_touch_spin

Package Overview

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

A simple number input spinner widget for Flutter, inspired by Bootstrap Touchspin. It provides an intuitive interface for incrementing and decrementing numeric values with touch-friendly buttons. The package is lightweight and easy to integrate into forms or settings where numeric input is required. It supports basic customization and works seamlessly within Flutter's widget tree.

Use cases

Form inputs requiring numeric entry
Settings with adjustable values
Mobile-friendly number selection
E-commerce quantity selectors
Simple data entry interfaces

Key features

Touch-friendly up/down buttons
Customizable step size
Minimal configuration
Responsive design
Easy integration with existing forms

Suitable for

Developers building mobile forms
UI designers seeking accessible number inputs
Projects needing lightweight spinners
Apps with frequent numeric adjustments
Flutter beginners exploring input widgets

Considerations

Limited to basic functionality
No built-in validation
Not suitable for complex number ranges
No support for keyboard input
Depends on Flutter's gesture system

Original README

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

Simple number input spinner Widget for Flutter. Inspired by Bootstrap Touchspin

Getting Started

TouchSpin(
    min: 5,
    max: 100,
    step: 5,
    value: 10,
    displayFormat: NumberFormat.currency(locale: 'en_US', symbol: '\$'),
    textStyle: const TextStyle(fontSize: 36),
    iconSize: 48.0,
    addIcon: const Icon(Icons.add_circle_outline),
    subtractIcon: const Icon(Icons.remove_circle_outline),
    iconActiveColor: Colors.green,
    iconDisabledColor: Colors.grey,
    iconPadding: const EdgeInsets.all(20),
    onChanged: (val){
        print(val);
    },
),

Attributes

Attribute	Type	Default
`value`	`num`	`1`
`min`	`num`	`1`
`max`	`num`	`9999999`
`step`	`num`	`1`
`displayFormat`	`NumberFormat`
`textStyle`	`TextStyle`	`TextStyle(fontSize: 24)`
`iconSize`	`double`	`24.0`
`addIcon`	`Icon`	`Icon(Icons.add)`
`subtractIcon`	`Icon`	`Icon(Icons.remove)`
`iconActiveColor`	`Color`	`Theme.of(context).textTheme.button.color`
`iconDisabledColor`	`Color`	`Theme.of(context).disabledColor`
`iconPadding`	`EdgeInsetsGeometry`	`EdgeInsets.all(4.0)`
`onChanged`	`ValueChanged<num>`

Search packages, repositories and app categories