I am looking into displaying more than 3 numbers and have not found any solutions for this. I started seeing if I could do this by making modifications to the numberpicker class. I am exploring specifically for horizontal, but I think it would work both ways.
So far I have managed this by allowing list view width to be passed into the constructor so setting listViewWidth = 7 * itemExtent, gives this
bool _onIntegerNotification(Notification notification) {
if (notification is ScrollNotification) {
//calculate
int intIndexOfMiddleElement =
(notification.metrics.pixels / itemExtent).round();
if (!infiniteLoop) {
intIndexOfMiddleElement =
intIndexOfMiddleElement.clamp(0, integerItemCount - 1);
}
int intValueInTheMiddle = _intValueFromIndex(intIndexOfMiddleElement + 1);
intValueInTheMiddle = _normalizeIntegerMiddleValue(intValueInTheMiddle);
I am going to be looking into this some more, but wanted to post this here in case anyone had any pointers or thoughts on this approach. It seems to me that this should be doable as it is a matter of tweaking the intValueInTheMiddle and selection logic to work with an adaptable length.
Below is my tweak to the constructor for increasing past 3 numbers as shown above:
NumberPicker.horizontal({
Key key,
@required int initialValue,
@required this.minValue,
@required this.maxValue,
@required this.onChanged,
this.textMapper,
this.itemExtent = kDefaultItemExtent,
this.listViewHeight = kDefaultListViewCrossAxisSize,
double listViewWidth,
this.step = 1,
this.zeroPad = false,
this.highlightSelectedValue = true,
this.decoration,
}) : assert(initialValue != null),
assert(minValue != null),
assert(maxValue != null),
assert(maxValue > minValue),
assert(initialValue >= minValue && initialValue <= maxValue),
assert(step > 0),
selectedIntValue = initialValue,
selectedDecimalValue = -1,
decimalPlaces = 0,
intScrollController = new ScrollController(
initialScrollOffset: (initialValue - minValue) ~/ step * itemExtent,
),
scrollDirection = Axis.horizontal,
decimalScrollController = null,
listViewWidth = listViewWidth ?? 3 * itemExtent,
infiniteLoop = false,
integerItemCount = (maxValue - minValue) ~/ step + 1,
super(key: key);
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent