Flutter Widgets

Android Material & iOS Cupertino SpinBox in Flutter

Increment and decrement of value with a flutter package

Have you been looking for what a SpinBox is?, or want to know how to implement a SpinBox in your Flutter application, this tutorial is here to help you with the ability. Firstly,

What is a SpinBox in Flutter?

SpinBox in Flutter is simply a numeric input widget with a field that gives you the ability to enter a specific value, and the spin buttons are for quick, convenient, and accurate value adjustments.

What do you use a SpinBox for?

Well, there are some applications where SpinBox is a must use, as it aids in making numerical inputs in a widget more flexible and easy.

Spin boxes are best suited for such applications

  • that deal with large numeric value ranges and high precisions,
  • where users typically know upfront the exact value they are entering,
  • where users may later have a need to accurately adjust a previously entered value.

As a rule of thumb, spin boxes are great for scenarios where

  • sliders and alike UI controls are too inaccurate,
  • tumblers and alike UI controls cannot provide enough value range,
  • and a plain text field is inconvenient for value adjustments (open the VKB, move the cursor, erase the previous value, enter a new value… vs. tap-tap-done).

Types of SpinBox in Flutter

We’ll be talking about the types of SpinBox we have in Flutter, which are the Cupertino style, which is for iOS devices, and the Material Design, which is for the Android devices. Let’s see the Android design first.

Material Design (Android)

Here’s how you can use the SpinBox plugin in Flutter to create what you see in the image above.
Vertical and Horizontal

https://pub.dev/packages/flutter_spinbox

Bring in your flutter_spinbox and add to pubspec.yaml

dependencies:
  flutter_spinbox: ^0.2.0

See how you can use the code in the main.dart

import 'package:flutter_spinbox/material.dart'; // or flutter_spinbox.dart for both

SpinBox(
  min: 1,
  max: 100,
  value: 50,
  onChanged: (value) => print(value),
)

Cupertino Design (iOS)

The only difference that comes when it comes to applying the SpinBox feature on iOS device is the IMPORTING method. See code below;

import 'package:flutter_spinbox/material.dart'; // or flutter_spinbox.dart for both

SpinBox(
  min: 1,
  max: 100,
  value: 50,
  onChanged: (value) => print(value),
)

Wanna know the difference between the Cupertino style and the Material style?, See the CUPERTINO styles here.

GitHub

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected - We work so hard to bring You great content-- Please disable Adblocker to browse our site

It seems you're using an Adblocker, Please disable it to get this access to this file.