Flutter NumberPicker -Pick Integer and Decimals

NumberPicker Widget in Flutter

Flutter is a mobile app development framework that allows developers to create beautiful and responsive apps for both Android and iOS platforms. In this article, we will explore the NumberPicker widget in Flutter.

Introduction

The NumberPicker widget is a Flutter widget that allows users to select a number from a predefined range of numbers. It is commonly used in apps that require users to input a numerical value, such as age, weight, or height.

The NumberPicker widget is highly customizable, allowing developers to change the appearance of the widget, such as the font size, color, and background color. Additionally, developers can define the minimum and maximum values of the widget, as well as the step size between each value.

Steps to use NumberPicker Widget

1. First, we need to add the numberpicker dependency to our pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  numberpicker: ^1.2.0

2. Import the numberpicker package in the dart file where you want to use it.

import 'package:numberpicker/numberpicker.dart';

3. Create a NumberPicker widget and define the minimum and maximum values.

NumberPicker(
  minValue: 0,
  maxValue: 100,
  onChanged: (value) {
    // Do something when the value is changed
  },
)

4. Customize the appearance of the widget by using the various properties available in the NumberPicker widget. For example, we can change the font size and color of the selected value.

NumberPicker(
  minValue: 0,
  maxValue: 100,
  onChanged: (value) {
    // Do something when the value is changed
  },
  textStyle: TextStyle(fontSize: 20, color: Colors.black),
  selectedTextStyle: TextStyle(fontSize: 24, color: Colors.red),
)

5. Handle the onChanged event to perform some action when the user changes the selected value.

NumberPicker(
  minValue: 0,
  maxValue: 100,
  onChanged: (value) {
    setState(() {
      _selectedValue = value;
    });
  },
)

More Examples

In this section we explore how we can pick numbers, both decimals and integers using an awesome library called numberpicker. We have several ways of doing this. First we can use numberpicker just within our page directly. The user can scroll through the numbers and pick. As the user scrolls through, the current scroll value is automatically set to a button.

Then the second way is to use a number picker dialog. We have two types of dialogs: integer number picker dialog and decimal number picker dialog. In the integer picker dialog a user can select whole numbers only. In the decimal picker dialog a user can select decimal numbers.

Demo

Here's the demo

Flutter NumberPicker

Main things You Learn in This Tutorial

Here are the things you will learn in this tutorial.

(a). What is a NumberPicker

A numberpicker is a package that allows us select numbers. The library we use is capable of allowing us easily pick both integers and decimal numbers.

(b). Types of NumberPicker.

As we've said there are two types of dialogs:

1. Integer NumberPicker Dialog - To pick whole numbers.
2. Decimal NumberPicker Dialog - To pick floating point or double or decimal numbers.

In the example we have buttons capable of showing both types of the dialogs.

(c). Installing and Using NumberPicker

NumberPicker is a third part library allowing us to easily select numbers. We can specify the range and settings like number of decimal places and minimum and maximum value as well as the steps.

We can install it by adding in your pubspec.yaml the following under dependencies:

  numberpicker: ^0.1.6

Then you can use it by first importing it:

import 'package:numberpicker/numberpicker.dart';

(d). How to Build a Stateful Widget with NumberPickers

Well we will build a page as our StatefulWidget. A stateful widget is a widget that has mutable state. That state can change. And certainly our Home page will have a state that changes. As we pick numbers the page state will be changing. And in fact in realtime as we even scroll through our number pickers our page state will change. This will allow us to update our buttons in realtime.

To do that first we have to create our widget by extending the StatefulWidget class:

class Home extends StatefulWidget {..}

Then we will also have a State object, our _HomeState:

class _HomeState extends State<Home> {
}

Inside the _HomeState we will be maintaining several instance fields:

  int _currentIntValue = 10;
  double _currentDoubleValue = 3.0;
  NumberPicker integerNumberPicker;
  NumberPicker decimalNumberPicker;

You can see we have current integer as well as double values being maintained inside our state.

Then when the state of those fields changes, we will notify the framework. This then allows it to notify the listeners attached to it.

      if (value is int) {
        setState(() => _currentIntValue = value);
      } else {
        setState(() => _currentDoubleValue = value);
      }

You can see we use the setState() method to achieve that.

Common Concepts You can learn.

There are also several concepts a student can learn from this type of project. These include:

(a). How to do something when button is clicked

Well let's say we have a raised button. We want to show a dialog when it's clicked. Let's say we have a method responsible for showing that dialog called -_showIntegerDialog(). And we want to invoke.

here's how to do it:

              new RaisedButton(
                onPressed: () => _showIntegerDialog(),
                child: new Text("Current Int Value: $_currentIntValue"),
                color: Colors.lightBlue,
              ),

You can see we've set text to our button and that text is dynamic. This means it changes and the button has not static control of that text. We've also specified the color of the button using the color property.

pubspec.yaml

We add the numberpicker as a dependency here.

name: number_picker
description: A new Flutter project.
dependencies:
  flutter:
    sdk: flutter
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  numberpicker: ^0.1.6
dev_dependencies:
  flutter_test:
    sdk: flutter

main.dart

Here's the main.dart file. It's our only file.

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:numberpicker/numberpicker.dart';
//Our MyApp class
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Mr NumberPicker',
      theme: new ThemeData(
        primarySwatch: Colors.orange,
      ),
      home: new Home(title: 'NumberPicker'),
    );
  }
}
//Our Home stateful widget class
class Home extends StatefulWidget {
  //Our <code>Home

Downloading and Running

Just copy the main.dart file into your main.dart under the lib folder. Then add the numberpicker dependency.

Conclusion

The NumberPicker widget is a useful tool for developers who need to allow users to input numerical values in their apps. With its highly customizable appearance and functionality, the NumberPicker widget can be easily integrated into any Flutter app.