ListWheelScrollView children do not respond on gesture (onTap) events

Steps to Reproduce

Hi! Here is my widget that uses ListWheelScrollView with FixedExtentScrollController:

import 'package:flutter/material.dart';

class LetterWheel extends StatefulWidget {
  const LetterWheel({Key key}) : super(key: key);

  @override
  _LetterWheelState createState() => _LetterWheelState();
}

class _LetterWheelState extends State<LetterWheel> {
  FixedExtentScrollController scrollController;

  @override
  void initState() {
    scrollController = FixedExtentScrollController();
    super.initState();
  }

  @override
  void dispose() {
    scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ListWheelScrollView(
      controller: scrollController,
      physics: const FixedExtentScrollPhysics(),
      itemExtent: 110,
      children: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
          .map(
            (letter) => Container(
              margin: const EdgeInsets.all(10),
              height: 90,
              color: Colors.yellow,
              child: GestureDetector(
                onTap: () => print('Letter "$letter" is pressed.'),
                child: Center(
                  child: Text(
                    letter,
                    style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            ),
          )
          .toList(),
    );
  }
}

Expected result: When the list item is tapped the message is printed to the console.

Actual result: When the list item is tapped nothing happens.

Here is my flutter doctor -v output:

[✓] Flutter (Channel stable, v1.7.8+hotfix.3, on Mac OS X 10.14.5 18F203, locale en-UA)
    • Flutter version 1.7.8+hotfix.3 at /Users/mkofan/Software/flutter
    • Framework revision b712a172f9 (6 weeks ago), 2019-07-09 13:14:38 -0700
    • Engine revision 54ad777fd2
    • Dart version 2.4.0

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
    • Android SDK at /Users/mkofan/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.1
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 10.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.2.1, Build version 10E1001
    • CocoaPods version 1.7.4

[✓] iOS tools - develop for iOS devices
    • ios-deploy 1.9.4

[!] Android Studio (version 3.4)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)

[✓] VS Code (version 1.37.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.3.0

[✓] Connected device (1 available)
    • Android SDK built for x86 64 • emulator-5554 • android-x64 • Android 9 (API 28) (emulator)

Here is a similar unresolved issue on Stackoverflow.

@kofan

@kofan did you find any solution?

Unfortunately, no. I didn't find a solution. I've abandoned the initial design that was based on ListScrollView and fallen back to a regular ListView 😔

A couple reports from:

And my own testing, example snippet:

    for (var i = 0; i < 30; i++) {
      _myList.add(ListTile(
        enabled: true,
        onTap: () {
          print('hello world$i');
        },
        title: Text('title$i',),
        subtitle: Text('subtitle$i'),
      ));
    }
      ...
    body: ListWheelScrollView(
        controller: _controller, // FixedExtentScrollController
        itemExtent: 30,
        children: _myList,
    ),

That ListTile’s onTap doesn’t respond, no print is seen.

Even if I wrap a child with GestureDetector, such as:

    _myList.add(GestureDetector(
      onTap: () {
        print('hello world$i');
      },
      child: ListTile(
        enabled: true,
        title: Text('title$i',),
        subtitle: Text('subtitle$i'),
      ),

The GestureDetector’s onTap also doesn’t respond.
I’ve also tried a Button, same thing with the onPressed.

But if I replace ListWheelScrollView with ListView, then all is working as expected.

It seems the only ways to interact with this is through onSelectedItemChanged or the controller’s selectedItem?

 GestureDetector(
     child: ListWheelScrollView(
          onSelectedItemChanged: (index) => selectedItem = index
     ),
     onTap: () => print('Selection: $selectedItem')

 GestureDetector(
     child: ListWheelScrollView(
          onSelectedItemChanged: (index) => selectedItem = index
     ),
     onTap: () => print('Selection: $selectedItem')

We're looking for tap/touch response on the individual children of the ListWheelScrollView, not on the list itself.

 GestureDetector(
     child: ListWheelScrollView(
          onSelectedItemChanged: (index) => selectedItem = index
     ),
     onTap: () => print('Selection: $selectedItem')
We're looking for tap/touch response on the individual children of the ListWheelScrollView, not on the list itself.

As a workaround, you can use that same code and just calculate where the tap occurred. Based on the size of your ListWheelScrollView, you can figure out if the tap is within the child's rect. And you should know which child based on the onSelectedItemChanged. You can also use GlobalKey to get the context of the selected child and get the rect of that child and it's descendants. You can then use callbacks to call child methonds.

TapUpDetails tapDetails;
    Rect childRect;
    return GestureDetector(
      onTapUp: (t) {
        tapDetails = t;
      },
      onTap: () {
        var thisWidget = context.findRenderObject();
        var childPosition = Rect.fromCenter(
            center: thisWidget.semanticBounds.center,
            width: childRect.width,
            height: childRect.height);
        print('parent tapped: ${tapDetails.localPosition}');
        if (childPosition.contains(tapDetails.localPosition))
          print('child was tapped');
        else
          print('child was not tapped');
      },
      child: ListWheelScrollView.useDelegate(
        physics: FixedExtentScrollPhysics(),
        itemExtent: 200,
        childDelegate: ListWheelChildLoopingListDelegate(
          children: rotatedChildren,
        ),
        onSelectedItemChanged: (index) {
          var childWidget = rotatedChildren[index];
          var childKey = childWidget.key as GlobalKey;
          childRect = childKey.currentContext.findRenderObject().semanticBounds;
          print('parent bounds: ${context.findRenderObject().semanticBounds}');
          print('child bounds: $childRect');

For ListWheelScrollView with a fixed height for child, you can use https://pub.dev/packages/clickable_list_wheel_view

Google,

I understand ListWheelScrollView children not receiving input gestures is a fairly reasonable design decision. On the other hand, not making this crystal clear in your documentation is obnoxious. It stands to reason items in this list widget would behave identically to a standard list views unless otherwise specified. I wasted three hours today trying to figure out where I was going wrong because this behavior is completely ignored by the official API reference. I may waste more changing course completely. One sentence on the class reference page would do wonders.

Guys any solution after 3 years?

https://pub.dev/packages/clickable_list_wheel_view

Please read https://github.com/flutter/flutter/wiki/Issue-hygiene#do-not-add-me-too-or-same-or-is-there-an-update-comments-to-bugs and https://github.com/flutter/flutter/blob/master/CODE_OF_CONDUCT.md before commenting here

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

ListWheelScrollView children do not respond on gesture (onTap) events #38803

Steps to Reproduce

50 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

ListWheelScrollView children do not respond on gesture (onTap) events #38803

Description

Steps to Reproduce

Activity

kofan commented on Aug 20, 2019

spiderion commented on Sep 10, 2019

spiderion commented on Sep 11, 2019

kofan commented on Nov 23, 2019

TimG38 commented on Jan 17, 2020

charlessfriend commented on Feb 4, 2020

TimG38 commented on Feb 5, 2020

charlessfriend commented on Feb 6, 2020

Moatasem1994 commented on Feb 24, 2020

rostopira commented on Feb 24, 2020

sgehrman commented on Mar 27, 2020

Stuazt commented on Apr 13, 2020

50 remaining items

Cilestal commented on Jan 19, 2021

mjlorenzo commented on Jan 27, 2021

medst commented on Jul 9, 2021

AzadCoder commented on Oct 25, 2021

Cilestal commented on Nov 6, 2021

banzhuan-jing commented on Jan 6, 2023

Terranic commented on Jan 14, 2023

LkyYuen commented on Feb 2, 2023

anypwx commented on Feb 23, 2023

nt4f04uNd commented on Feb 23, 2023

anypwx commented on Feb 23, 2023

github-actions commented on Apr 13, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions