CupertinoPicker render options skewed

Question

I have a problem. I want to use CupertinoPicker and it gets rendered weird. Cannot see selected option and all options are skewed, something like 3D wheel. https://i.imgur.com/ENnMNAv.png

Also here is a screencast of how it works: https://recordit.co/zkKQdfcDnO

Here is callback for onPressed button:

onPressed: () => _selectCity(CupertinoPicker(
                        magnification: 2,
                        squeeze: 1.2,
                        offAxisFraction: 5,
                        useMagnifier: true,
                        // This sets the initial item.
                        scrollController: FixedExtentScrollController(
                          initialItem: 0,
                        ),
                        itemExtent: _kItemExtent,
                        // This is called when selected item is changed.
                        onSelectedItemChanged: (int selectedCity) {
                          print(selectedCity);
                          setState(() {
                            _filter['city'] = selectedCity;
                          });
                        },
                        children:
                            List<Widget>.generate(_cities.length, (int index) {
                          return Text(
                            _cities[index],
                            style: const TextStyle(color: Color(0xFF001A18)),
                          );
                        })
                        ),
                      ),

And here is _selectCity() method:

void _selectCity(Widget child) {
    showCupertinoModalPopup<void>(
      context: context,
      builder: (BuildContext context) => Container(
        height: 300,
        padding: const EdgeInsets.only(top: 6.0),
        // The Bottom margin is provided to align the popup above the system navigation bar.
        margin: EdgeInsets.only(
          bottom: MediaQuery.of(context).viewInsets.bottom,
        ),
        // Provide a background color for the popup.
        color: CupertinoColors.systemBackground.resolveFrom(context),
        // Use a SafeArea widget to avoid system overlaps.
        child: SafeArea(
          top: false,
          child: child,
        ),
      ),
    );
  }

P.S. I've got this usage from Docs

Answer 1

You need to use the property offAxisFraction carefully. As per documentation the visual output can be unaesthetic if the range is too far from [-0.5,0.5].

Just try to comment it out if you are not sure on how to use it effectively.

ElevatedButton(
    onPressed: () {
        _selectCity(
             CupertinoPicker(
                  magnification: 1.2,
                  squeeze: 1.2,
                  //offAxisFraction: 5,
                  useMagnifier: true,
                  // This sets the initial item.
                  ...

Here is some more details on offAxisFraction just in case you need to understand it better.

How much the wheel is horizontally off-center, as a fraction of its width. This property creates the visual effect of looking at a vertical wheel from its side where its vanishing points at the edge curves to one side instead of looking at the wheel head-on.

The value is horizontal distance between the wheel's center and the vertical vanishing line at the edges of the wheel, represented as a fraction of the wheel's width.

The value 0.0 means the wheel is looked at head-on and its vanishing line runs through the center of the wheel. Negative values means moving the wheel to the left of the observer, thus the edges curve to the right. Positive values means moving the wheel to the right of the observer, thus the edges curve to the left.

The visual effect causes the wheel's edges to curve rather than moving the center. So a value of 0.5 means the edges' vanishing line will touch the wheel's size's left edge.

Defaults to 0.0, which means looking at the wheel head-on. The visual effect can be unaesthetic if this value is too far from the range [-0.5, 0.5].