How to show more element of number picker list in flutter?

user_7401696 0
Viewed 2788

I used this for developing a number picker for my flutter application but it shows only three element of list of numbers in number picker . I want to show more element(for example 7) and beside, I want the selected element be exactly the middle element (in my case 3 element before and three after) which part of the library code should be changed?

When just changing "_listViewHeight = 3 * itemExtent", in library we see the problem I mentioned in image below. First the selected Item is not the middle one beside the maximum value can not be selected.

enter image description here

numberpicker dart flutter
2 Answers

I had this same problem and was able to get it working for odd display number lengths of 3 or greater after digging into the numberpicker code and making some changes. Here is a diff of the changes I made. This is working for me using my repo. You can also just copy the lib/numberpicker.dart file from my repo into your project and include that file. Hopefully will get this pulled into the numberpicker project at some point. Below is my example use for 7 numbers displayed at a time:

NumberPicker.horizontal(
    initialValue: _currentValue,
    minValue: 1,
    maxValue: 10,
    numberToDisplay: 7,
    onChanged: (newValue) =>
        setState(() => _currentValue = newValue));

enter image description here

and scrolled to the first number

enter image description here

you can pick a different odd number for the numberToDisplay parameter such as 5

enter image description here

and removing the parameter will use the default of 3.

enter image description here

More info here

user_28268180

At here and here

Change

  _listViewHeight = 3 * itemExtent,

to 

  _listViewHeight =  noOfElements * itemExtent,

where noOfElements is the number of elements you want to display.

user_104714800
Related