NumberPicker Choose number not only by scrolling but also by tapping a visible number

Hey there,

first of all: good job!

I have a recommendation for improvement. At the moment new values are selected by scrolling the numbers in the widget. It would be very helpful, if we could also tap on the next or previous visible number to select it.

For example, if I have 5 selected, then above is 4 and below the selected 5 is the 6. If I could just tap on the 4 to select it would help because then you wouldn't need to scroll just a tiny bit.

Do you think this is possible?

Thanks in advance,

Tobi

Oct 26 '18 19:10 tmaihoff

Hey,

I've implemented such feature in this post however, it introduced minor buggy moment when user clicks and during scrolling. I think it wouldn't be good to provide a feature and a bug at the same time so I didn't add it here.

If you have an idea how to do it properly based on what I did in that post, I would love to see it or (if you would like) I would love to accept a pull request :)

Oct 28 '18 19:10 MarcinusX

Hey,

thanks for your quick reply and the link to your post, I appreciate it.

I made it work with some small adjustments as you can see here (I only applied the changes to the integerPicker as I won't use the decimalPicker for my app):

Widget _integerListView(ThemeData themeData) {
    TextStyle defaultStyle = themeData.textTheme.body1;
    TextStyle selectedStyle =
    themeData.textTheme.headline.copyWith(color: themeData.accentColor);

    int itemCount = (maxValue - minValue) ~/ step + 3;

    return new NotificationListener(
      child: new Container(
        height: _listViewHeight,
        width: listViewWidth,
        child: new ListView.builder(
          controller: intScrollController,
          itemExtent: itemExtent,
          itemCount: itemCount,
          cacheExtent: _calculateCacheExtent(itemCount),
          itemBuilder: (BuildContext context, int index) {
            final int value = _intValueFromIndex(index);

            //define special style for selected (middle) element
            final TextStyle itemStyle =
            value == selectedIntValue ? selectedStyle : defaultStyle;

            bool isExtra = index == 0 || index == itemCount - 1;

            return isExtra
                ? new Container() //empty first and last element
                // Added GestureDetector based on the post in your answer
                : new GestureDetector(
                  behavior: HitTestBehavior.translucent,
                  onTap: () => _animate(intScrollController, (value - minValue) * itemExtent, durationMills: 250),
                  child: new Center(
                    child: new Text(value.toString(), style: itemStyle),
                  )
                ); 
                
                
          },
        ),
      ),
      onNotification: _onIntegerNotification,
    );
  }

  ///scroll to selected value
  _animate(ScrollController scrollController, double value, {int durationMills = 500}) {  // added variable durationMills 
    scrollController.animateTo(value,
        duration: new Duration(milliseconds: durationMills), curve: ElasticOutCurve());
  }

Can you explain the small bug you were experiencing? The only thing I noticed is that it won't accept a tap while it is still scrolling. Did you mean that?

The changed dart file is attached.

Regards, Tobi

numberpicker.zip

Oct 29 '18 11:10 tmaihoff

Yeah, I had different behaviour then, so in that case it seems like you did it :)

Oct 29 '18 15:10 MarcinusX

@Tiebo If you did it, can you please make a pull request?