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

Related tags

Widgets NumberPicker
Overview

NumberPicker Build Status Coverage Status

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

ezgif com-gif-maker

Example:

(See example for more)

class _IntegerExample extends StatefulWidget {
  @override
  __IntegerExampleState createState() => __IntegerExampleState();
}

class __IntegerExampleState extends State<_IntegerExample> {
  int _currentValue = 3;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        NumberPicker(
          value: _currentValue,
          minValue: 0,
          maxValue: 100,
          onChanged: (value) => setState(() => _currentValue = value),
        ),
        Text('Current value: $_currentValue'),
      ],
    );
  }
}
Comments
  • Picker UI not being correctly redraw once initialValue property gets updated

    Picker UI not being correctly redraw once initialValue property gets updated

    I'm experiencing the following issue:

    • In my model I set intialValue default to 1 (this property is mapped to the initialValue property of the picker widget)
    • In my widget builder method I call an async method that will load some data and update this initialValue property
    • I call notifyListeners/setState after the initialValue has been updated (async method finished)
    • the picker widget is redraw but the "current" value is still the old one, we see that the value has been changed because is not green anymore, meaning that it took the new value but it didn't displayed correctly (see screenshot below)

    Without calling the async method, initialValue defaults to one (in green): image

    When calling the async method and the intialValue changed to 6, the UI doesn't reflect the new value: image

    Thanks

    enhancement help wanted 
    opened by wizche 17
  • Added a text mapper to customize number text

    Added a text mapper to customize number text

    This code introduces the TextMapper, that is a function defined by the user of this widget to map the text displayed by the widget. This way, the user can define it's own code to show a custom text instead of just a plain number.

    opened by HugoSart 15
  • Bug in NumberPicker.horizontal

    Bug in NumberPicker.horizontal

    I can't select the last 3 items. constantly rolls back.

    Example: ezgif-1-337adf32a651

    Code for reproduce:

    NumberPicker.horizontal(
      initialValue: 5,
      minValue: 1,
      maxValue: 10,
      onChanged: (num newValue) {
        // save
      },
    )
    
    opened by delef 7
  • Step equal to 10 breaks on iOS emulator

    Step equal to 10 breaks on iOS emulator

    NumberPicker worked fine until I installed:

    Flutter 0.7.3 • channel beta • https://github.com/flutter/flutter.git Framework • revision 3b309bda07 (8 days ago) • 2018-08-28 12:39:24 -0700 Engine • revision af42b6dc95 Tools • Dart 2.1.0-dev.1.0.flutter-ccb16f7282

    Now at least in the iOS emulator it does not seem to properly handle the 'mouse up' event when attempting to scroll.

    opened by alan16R 7
  • picker numbers misaligned when not using AppBar

    picker numbers misaligned when not using AppBar

    There is one extra number shown when AppBar is missing, the center is shifted above and it is not clear, which of the two middle options is the chosen one.

    waiting for response 
    opened by dvorapa 6
  • Selected Values Not Highighted

    Selected Values Not Highighted

    I am trying to incorporate you widget into my library. When a user designates an integer with a min and max value, I would like to return a number picker:

        if (fieldOptions != null) {
          if (fieldOptions["min"] != null && fieldOptions["max"] != null) {
            int value;
            int iv;
            initialValue == null ? iv = fieldOptions["min"] : iv = initialValue;
            return FormField(
              builder: (FormFieldState<int> state) {
                return NumberPicker.integer(
                  initialValue: iv,
                  maxValue: fieldOptions["max"],
                  minValue: fieldOptions["min"],
                  onChanged: (num val) {
                    value = val;
                  },
                );
              },
              onSaved: (int val) {
                this.onSaved(value);
              },
            );
          }
        }
    

    The widget works perfectly in the form, except that the selected number is not highlighted except on first run.

    Here is the branch where I am working on this for reference: https://github.com/rapido-mobile/rapido-flutter/blob/field_options/lib/src/typed_input_field.dart

    opened by rickspencer3 6
  • Cancel and Confirm

    Cancel and Confirm

    How do I check if cancel and confirm?

    I want to await the widget and if I press ok I want to keep doing the logic and if the user press cancel I want to stop the logic (with bool or something like that). But the cancel and confirm takes a widget. Why can I just not set logic in this?

    I want to do something like this:

    image

    question 
    opened by RobertBrunhage 6
  • Decimal picker crashes when trying to change decimal point

    Decimal picker crashes when trying to change decimal point

    My picker:

    return new NumberPickerDialog.decimal( minValue: 37, maxValue: 42, initialDoubleValue: 37.5, );

    I did some debugging, looks like in _onDecimalNotification(Notification notification) the decimalValueInTheMiddle is too big (37 in my case). Upon closer looking I am actually confused what the purpose of that variable is.

    The relevant problem happens towards the end:

    double newValue = ((selectedIntValue + decimalPart).toDouble());

    The decimal part in my case is 3.7 (gets formed from the 37 I mentioned above). If I understand that correctly, the decimal part should be between 0(inclusive) and 1(exclusive).

    In my case the newValue becomes too big at some point which is why the number picker craps out with an assertion error from the constructor (min max selected check)

    Exception:

    I/flutter (12075): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════ I/flutter (12075): The following assertion was thrown building NumberPickerDialog(dirty, state: I/flutter (12075): _NumberPickerDialogControllerState#2927b): I/flutter (12075): 'package:numberpicker/numberpicker.dart': Failed assertion: line 58 pos 16: 'initialValue >= I/flutter (12075): minValue && initialValue <= maxValue': is not true. I/flutter (12075): I/flutter (12075): Either the assertion indicates an error in the framework itself, or we should provide substantially I/flutter (12075): more information in this error message to help you determine and fix the underlying cause. I/flutter (12075): In either case, please report this assertion by filing a bug on GitHub: I/flutter (12075): https://github.com/flutter/flutter/issues/new I/flutter (12075): I/flutter (12075): When the exception was thrown, this was the stack: I/flutter (12075): #2 new NumberPicker.decimal (package:numberpicker/numberpicker.dart) I/flutter (12075): #3 _NumberPickerDialogControllerState._buildNumberPicker (package:numberpicker/numberpicker.dart:396:18) I/flutter (12075): #4 _NumberPickerDialogControllerState.build (package:numberpicker/numberpicker.dart:417:16) I/flutter (12075): #5 StatefulElement.build (package:flutter/src/widgets/framework.dart:3730:27) I/flutter (12075): #6 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3642:15) I/flutter (12075): #7 Element.rebuild (package:flutter/src/widgets/framework.dart:3495:5) I/flutter (12075): #8 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2242:33) I/flutter (12075): #9 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:626:20) I/flutter (12075): #10 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:208:5) I/flutter (12075): #11 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15) I/flutter (12075): #12 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:930:9) I/flutter (12075): #13 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:842:5) I/flutter (12075): #14 _invoke (dart:ui/hooks.dart:120:13) I/flutter (12075): #15 _drawFrame (dart:ui/hooks.dart:109:3) I/flutter (12075): (elided 2 frames from class _AssertionError) I/flutter (12075): ════════════════════════════════════════════════════════════════════════════════════════════════════

    bug 
    opened by lapauk 5
  • NumberPicker scrolls back to top

    NumberPicker scrolls back to top

    I have a numberPicker to pick the number of products that you want in your shopping cart. Every time I want to scroll to the last number the picker goes back all the way to the top, setting that number back to zero. My code:

    ` class ScrollingNumberPicker extends StatelessWidget { final int maxNumber; final int minNumber; final int value; final Function(int) callBack;

        ScrollingNumberPicker(
            {@required this.maxNumber,
            @required this.minNumber,
              @required this.value,
            @required this.callBack});
      
        @override
        Widget build(BuildContext context) {
          return NumberPicker(
              minValue: minNumber,
              maxValue: maxNumber,
              value: minNumber,
              onChanged: callBack,
            selectedTextStyle: TextStyle(color: Colors.black, fontSize: 24),
          );
        }
      }
    

    `

    opened by SilkeNL 4
  • Get an error on popping view while picker is scrolling.

    Get an error on popping view while picker is scrolling.

    E/flutter ( 4433): [ERROR:flutter/lib/ui/ui_dart_state.cc(186)] Unhandled Exception: 'package:flutter/src/widgets/scroll_controller.dart': Failed assertion: line 108 pos 12: '_positions.isNotEmpty': ScrollController not attached to any scroll views. E/flutter ( 4433): #0 _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:46:39) E/flutter ( 4433): #1 _AssertionError._throwNew (dart:core-patch/errors_patch.dart:36:5) E/flutter ( 4433): #2 ScrollController.position (package:flutter/src/widgets/scroll_controller.dart:108:12) E/flutter ( 4433): #3 _NumberPickerState.isScrolling (package:numberpicker/src/numberpicker.dart:125:45) E/flutter ( 4433): #4 _NumberPickerState._maybeCenterValue (package:numberpicker/src/numberpicker.dart:213:10) E/flutter ( 4433): #5 _NumberPickerState._scrollListener. (package:numberpicker/src/numberpicker.dart:107:13) E/flutter ( 4433): #6 new Future.delayed. (dart:async/future.dart:315:39) E/flutter ( 4433): #7 _rootRun (dart:async/zone.dart:1346:47) E/flutter ( 4433): #8 _CustomZone.run (dart:async/zone.dart:1258:19) E/flutter ( 4433): #9 _CustomZone.runGuarded (dart:async/zone.dart:1162:7) E/flutter ( 4433): #10 _CustomZone.bindCallbackGuarded. (dart:async/zone.dart:1202:23) E/flutter ( 4433): #11 _rootRun (dart:async/zone.dart:1354:13) E/flutter ( 4433): #12 _CustomZone.run (dart:async/zone.dart:1258:19) E/flutter ( 4433): #13 _CustomZone.bindCallback. (dart:async/zone.dart:1186:23) E/flutter ( 4433): #14 Timer._createTimer. (dart:async-patch/timer_patch.dart:18:15) E/flutter ( 4433): #15 _Timer._runTimers (dart:isolate-patch/timer_impl.dart:395:19) E/flutter ( 4433): #16 _Timer._handleMessage (dart:isolate-patch/timer_impl.dart:426:5) E/flutter ( 4433): #17 _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:184:12) E/flutter ( 4433): E/flutter ( 4433): [ERROR:flutter/lib/ui/ui_dart_state.cc(186)] Unhandled Exception: 'package:flutter/src/widgets/scroll_controller.dart': Failed assertion: line 108 pos 12: '_positions.isNotEmpty': ScrollController not attached to any scroll views. E/flutter ( 4433): #0 _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:46:39) E/flutter ( 4433): #1 _AssertionError._throwNew (dart:core-patch/errors_patch.dart:36:5) E/flutter ( 4433): #2 ScrollController.position (package:flutter/src/widgets/scroll_controller.dart:108:12) E/flutter ( 4433): #3 _NumberPickerState.isScrolling (package:numberpicker/src/numberpicker.dart:125:45) E/flutter ( 4433): #4 _NumberPickerState._maybeCenterValue (package:numberpicker/src/numberpicker.dart:213:10) E/flutter ( 4433): #5 _NumberPickerState._scrollListener. (package:numberpicker/src/numberpicker.dart:107:13) E/flutter ( 4433): #6 new Future.delayed. (dart:async/future.dart:315:39) E/flutter ( 4433): #7 _rootRun (dart:async/zone.dart:1346:47) E/flutter ( 4433): #8 _CustomZone.run (dart:async/zone.dart:1258:19) E/flutter ( 4433): #9 _CustomZone.runGuarded (dart:async/zone.dart:1162:7) E/flutter ( 4433): #10 _CustomZone.bindCallbackGuarded. (dart:async/zone.dart:1202:23) E/flutter ( 4433): #11 _rootRun (dart:async/zone.dart:1354:13) E/flutter ( 4433): #12 _CustomZone.run (dart:async/zone.dart:1258:19) E/flutter ( 4433): #13 _CustomZone.bindCallback. (dart:async/zone.dart:1186:23) E/flutter ( 4433): #14 Timer._createTimer. (dart:async-patch/timer_patch.dart:18:15) E/flutter ( 4433): #15 _Timer._runTimers (dart:isolate-patch/timer_impl.dart:395:19) E/flutter ( 4433): #16 _Timer._handleMessage (dart:isolate-patch/timer_impl.dart:426:5) E/flutter ( 4433): #17 _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:184:12) E/flutter ( 4433):

    Not sure whether you understand my words. But, when I scroll the list in picker at very fast speed (generally we do on very long lists to reach desired element) and at the same time I hit back button (Navigator.pop()) when list is scrolling, will generate this error, though app execution does not affected by this.

    opened by mitulvaghamshi 4
  • Major code refactor. Migrate to null-safety.

    Major code refactor. Migrate to null-safety.

    Changelog:

    • Migrate to null-safety.
    • Changed named constructors to two separate widgets.
      • NumberPicker.integer is now NumberPicker.
      • NumberPicker.decimal is now DecimalNumberPicker.
      • NumberPicker.horizontal is now NumberPicker with axis: Axis.horizontal
    • Removed infiniteLoop to make it possible to go to null safety. The feature will come back once the infitniteListView package gets null-safe.
    • Removed dialogs containing pickers. I think it's better to just leave it for developers.
    • Removed animateInt method and replaced it with just reacting to value changed (see example).
    • Changed animation curve to Curves.easeOutCubic.
    • Changed initialValue to value to avoid confusion from my awful naming.
    • Removed highlightSelectedValue as it can be obtained by providing selectedTextStyle.
    • Fixed some minor bugs.

    Closes #89 Closes #43 Closes #26 Closes #94

    opened by MarcinusX 4
  • Crashes when swiping before first or past last value

    Crashes when swiping before first or past last value

    Works great if I turn infiniteLoop: true. Otherwise, it crashes if I try to swipe before the first or past the last item, but only when the axis is set to Axis.horizontal. It doesn't crash if it's set to Axis.vertical.

    NumberPicker(
        value: playerPlaces[index],
        minValue: 1,
        maxValue: players.length,
        step: 1,
        onChanged: (value) {
          setState(() {
            playerPlaces[index] = value;
          });
        },
        axis: Axis.horizontal,
        itemWidth: 30,
        // infiniteLoop: true,
        
      ),
    

    When I restart the app, this error shows:

    ════════ Exception caught by gesture ═══════════════════════════════════════════
    'package:flutter/src/widgets/overscroll_indicator.dart': Failed assertion: line 243 pos 14: 'notification.metrics.axis == widget.axis': is not true.
    package:flutter/…/widgets/overscroll_indicator.dart:243
    ══════════════════════════════════════════════════════════════════════
    
    opened by dhust 0
Releases(v0.1.3)
Owner
Marcin Szałek
Flutter developer
Marcin Szałek
A custom dropdown button lets the user select from a number of items

CircularDropDownMenu Description A custom dropdown button lets the user select from a number of items. The button shows the currently selected item as

Surya Dev Singh 2 Dec 5, 2020
Animate SliverAppBar's widgets when scrolling

Animate SliverAppBar's widgets when scrolling

null 6 Oct 2, 2022
GoogleNavBar is a Flutter widget designed by Aurelien Salomon and developed by sooxt98

google_nav_bar A modern google style nav bar for flutter. GoogleNavBar is a Flutter widget designed by Aurelien Salomon and developed by sooxt98. Gett

null 530 Dec 21, 2022
A flutter carousel widget, support infinite scroll, and custom child widget.

carousel_slider A carousel slider widget. Features Infinite scroll Custom child widgets Auto play Supported platforms Flutter Android Flutter iOS Flut

Bart T 1 Nov 25, 2021
Displays a scrollable timeline with custom child widgets and custom icons.

Flutter Timeline Widget Displays a scrollable timeline with custom child widgets and custom icons. Installation In your pubspec.yaml file within your

Furkan Tektas 375 Nov 20, 2022
Custom-Position-Popup - Custom Position Popup For Flutter

Custom-Position-Popup before clone the GitHub repository please give a star on t

Blackshadow Software Ltd 11 Oct 17, 2022
Flutter Number Counter

Number Counter Animatio Use this source code in your project Rate me ⭐ Thank you

Amirziya 3 Feb 21, 2022
Flutter debug helper widget with common and custom actions

Flutter debug helper widget with common and custom actions

Stanislav Ilin 43 Dec 7, 2022
Custom bottom sheet widget, that can resize by drag and then scroll.

Bottom Sheet This package is part of the SurfGear toolkit made by Surf. About Custom bottom sheet widget that can be resized in response to drag gestu

Surf 92 Dec 16, 2022
Flutter custom widget to make a group buttons. Included Radio and CheckBox buttons.

Flutter widget to create a group of buttons fast ?? Included Radio and CheckBox buttons models with custom groping types ?? Show some ❤️ and star the

Stanislav Ilin 162 Dec 26, 2022
"wi_custom_bar" - a custom bar widget that implements a thermometer gauge bar created by wannai team

About wi_custom_bar "wi_custom_bar" is a custom bar widget that implements a thermometer gauge bar created by wannai team. Installing: In your pubspec

null 3 Feb 23, 2022
A Flutter widget which synchronize a ScrollView and a custom tab view

scrollable_list_tabview A Flutter widget which synchronize a ScrollView and a custom tab view. The main idea is to create a custom tab view synchroniz

Aswanath C K 0 Apr 12, 2022
A simple Flutter widget to add in the widget tree when you want to show nothing, with minimal impact on performance.

nil A simple widget to add in the widget tree when you want to show nothing, with minimal impact on performance. Why? Sometimes, according to a condit

Romain Rastel 127 Dec 22, 2022
A Flutter Widget to make interactive timeline widget.

Bubble Timeline Package A Flutter Widget to make interactive timeline widget. This widget can be used to make Event Timelines, or Timelines for certai

Vansh Goel 12 Sep 22, 2022
Widget, that can make any static located widget hidable

Installing See the official installing guidline from hidable/install Usage & Overview To start using Hidable widget, we have to create a ScrollControl

Anon 18 Dec 16, 2022
📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget.

?? Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget. Photo View is largely used to show interacive images and other stuff such as SVG.

Blue Fire 1.7k Jan 7, 2023
A widget that allow user resize the widget with drag

Flutter-Resizable-Widget A widget that allow user resize the widget with drag Note: this widget uses Getx Example bandicam.2021-11-11.12-34-41-056.mp4

MohammadAminZamani.afshar 22 Dec 13, 2022
A widget lib that the widget in this lib can react to flutter ScrollController's offset

Language: English | 中文简体 linked_scroll_widgets A lib full of widgets that can react to the scrollController's offset change,to custom your UI effect.

WenJingRui 8 Oct 16, 2022
Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget

lite_rolling_switch Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget https://github.com/pedromas

Eduardo Muñoz 48 Dec 1, 2022