NumberPicker

NumberPicker is a custom widget designed for choosing an integer or decimal number by scrolling spinners.

It is possible to use NumberPicker as a standalone widget as well as in NumberPickerDialog.

Getting Started

Creating NumberPicker Vertical Widget

new NumberPicker.integer(
                initialValue: 50,
                minValue: 0,
                maxValue: 100,
                onChanged: _handleChange)

Creating NumberPicker Horizontal Widget With custom text styles

new NumberPicker.integer(
          initialValue: _currentIntValue,
          minValue: 0,
          maxValue: 100,
          step: 10,
          defaultTextStyle: TextStyle(color: Colors.black38, fontSize: 12),
          selectedValueTextStyle: TextStyle(color: Colors.blue, fontSize: 16),
          scrollDirection: Axis.horizontal,
          onChanged: (value) => setState(() => _currentIntValue = value),
        );

Creating NumberPickerDialog (use in material's showDialog method)

new NumberPickerDialog.decimal(
          minValue: 1,
          maxValue: 10,
          initialDoubleValue: _currentPrice),

Usage examples

See examples directory for full examples.

Standalone widget

class _MyHomePageState extends State<MyHomePage> {
  int _currentValue = 1;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new NumberPicker.integer(
                initialValue: _currentValue,
                minValue: 0,
                maxValue: 100,
                onChanged: (newValue) =>
                    setState(() => _currentValue = newValue)),
            new Text("Current number: $_currentValue"),
          ],
        ),
      ),
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
    );
  }
}

Dialog

class _MyHomePageState extends State<MyHomePage> {
  double _currentPrice = 1.0;

  void _showDialog() {
    showDialog<int>(
      context: context,
      builder: (BuildContext context) {
        return new NumberPickerDialog.decimal(
          minValue: 1,
          maxValue: 10,
          title: new Text("Pick a new price"),
          initialDoubleValue: _currentPrice,
        );
      }
    ).then((int value)) {
      if (value != null) {
        setState(() => _currentPrice = value);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Text("Current price: $_currentPrice \$"),
      ),
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.attach_money),
        onPressed: _showDialog,
      ),
    );
  }
}