Pick Value onTap in CupertinoPicker and CupertinoDatePicker

Question

onSelectedItemChanged is working perfectly in CupertinoPicker/CupertinoDatePicker

But I also want to pick value when user clicked the value.

Currently, user must scroll in order to pick the value, and as far as I know CupertinoPicker/CupertinoDatePicker doesn't have onTap, onPressed functions

How can I solve this issue

if you tap on an item, it will lead to scroll to that position, so the onSelectedItemChanged will be invoked. — meditat, Jan 27 '21 at 07:11
@meditat Please, could you clarify your answer? (tapping on an item is not invoking onSelectedItemChanged function) — SardorbekR, Jan 27 '21 at 07:27

yellowgray · Accepted Answer · 2021-07-31T01:54:55.753

3

Unfortunately, the gesture detection inside CupertinoPicker/CupertinoDatePicker is not supported for now. When you trace the code inside CupertinoPicker, it leads to use ListWheelScrollView at the end and it does not respond to the tap event.

Discussion thread on GitHub:

There is a workaround solution by using package clickable_list_wheel_view (fixed height for the child widget, mentioned here)

edited Jul 31 '21 at 01:54

answered Feb 09 '21 at 13:49

yellowgray

4,006
6
28

It is indeed not working. Me as well tried to figure out a way, but the furthest I got to, was to that github issue. – Iván Yoed Feb 13 '21 at 16:26

score 1 · Answer 2 · answered Aug 24 '22 at 14:38

1

GestureDetector(
    behavior: HitTestBehavior.translucent,
    onTap: () => // write what you want to do,
    child: CupertinoPicker(),
  ),

answered Aug 24 '22 at 14:38

Serkan Ağca

155
1
6

score 0 · Answer 3 · answered Aug 09 '22 at 22:09

I found a workaround by using flutter_portal.

  final ScrollController scrollController = FixedExtentScrollController();

  @override
  Widget build(BuildContext context) {
    return Container(
        height: 100,
        child: Portal(
          child: CupertinoPicker.builder(
            scrollController: scrollController,
            childCount: itemCount,
            itemBuilder: (context, index) {
              return PortalTarget(
                anchor: Aligned(
                  follower: Alignment.center,
                  target: Alignment.center,
                ),
                portalFollower: GestureDetector(
                  behavior: HitTestBehavior.translucent,
                  onTap: () {
                    scrollController.animateToItem(index,
                        duration: Duration(milliseconds: 250),
                        curve: Curves.decelerate);
                  },
                ),
                child: Text(index.toString()),
              );
            },
          ),
        )
    );
  }

Pick Value onTap in CupertinoPicker and CupertinoDatePicker

3 Answers3