clickable_list_wheel_view

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A simple wrapper for ListWheelScrollView that enables tap interactions on individual children. It enhances the default scroll wheel by allowing users to respond to onTap events, making it ideal for interactive list wheels in Flutter apps. The package maintains the smooth scrolling behavior of ListWheelScrollView while adding gesture recognition for each item. Compatible across all major platforms, it's lightweight and easy to integrate with minimal configuration.

Use cases

Interactive scrollable menus
Tappable item selection in a wheel
Customizable dropdowns with touch feedback
Gamified UI components
Dynamic content navigation

Key features

Tap detection on ListWheelScrollView items
Minimal setup and integration
Cross-platform compatibility
Preserves native scroll behavior
Lightweight and performant
Supports custom onTap callbacks

Suitable for

Developers building interactive list wheels
Apps requiring touch-based item selection
UIs with rotating or spinning lists
Projects needing responsive wheel components
Flutter beginners exploring gesture handling

Considerations

May require additional styling for visual feedback
Not suitable for high-frequency tap scenarios
Limited to single-tap interaction
Performance depends on item complexity
Does not support long press or drag gestures

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Simple wrapper for ListWheelScrollView that allows children to respond on gesture (onTap) events

Installation

In the dependencies: section of your pubspec.yaml, add the following line:

dependencies:
    clickable_list_wheel_view: latest_version

Usage

Basic

You can get started really simple, just add


ClickableListWheelScrollView(
  scrollController: _scrollController,
  itemHeight: _itemHeight,
  itemCount: _itemCount,
  onItemTapCallback: (index) {
    print("onItemTapCallback index: $index");
  },
  child: ListWheelScrollView.useDelegate(
    controller: _scrollController,
    itemExtent: _itemHeight,
    physics: FixedExtentScrollPhysics(),
    overAndUnderCenterOpacity: 0.5,
    perspective: 0.002,
    onSelectedItemChanged: (index) {
      print("onSelectedItemChanged index: $index");
    },
    childDelegate: ListWheelChildBuilderDelegate(
      builder: (context, index) => _child(index),
      childCount: _itemCount,
    ),
  ),
)

Full Api

  ///  Required. The [child] which the wrapper will target to
  final ListWheelScrollView child;

  /// Required. Must be the same for list and wrapper
  final ScrollController scrollController;

  /// Optional. ListWheelScrollView height
  final double listHeight;

  /// Required. Height of one child in ListWheelScrollView
  final double itemHeight;

  /// Required. Number of items in ListWheelScrollView
  final int itemCount;

  /// If true the list will scroll on click
  final bool scrollOnTap;

  /// Set a handler for listening to a `tap` event
  final OnItemTapCallback onItemTapCallback;

  /// sets the duration of the scroll  animation
  final Duration animationDuration;
  
  /// use with ListWheelChildLoopingListDelegate
  final bool loop;

Search packages, repositories and app categories