Flutter gesture detector in ReorderableListview not working

user_12349785 0
Viewed 695

In my flutter app, the reorderable listview is preventing the child gesture detectors from triggering ontap. some unimportant code has been removed for privacy reasons. How can I make this work? Thanks - Joseph

   Container(
              height: 600,
              child: ReorderableListView(
                onReorder: (oldIndex, newIndex) async {
                 ...
                },
                children: [
                  for (var line in orderedLines) ...[
                    GestureDetector(
                      key: ValueKey(line.name),
                      onTap: () {
                        print("yay");
                     
                      },
flutter
2 Answers

I found the following in the documentation. It worked for me. Just set buildDefaultDragHandles to false and use a ReorderableDragStartListener.

 /// If true: on desktop platforms, a drag handle is stacked over the
  /// center of each item's trailing edge; on mobile platforms, a long
  /// press anywhere on the item starts a drag.
  ///
  /// The default desktop drag handle is just an [Icons.drag_handle]
  /// wrapped by a [ReorderableDragStartListener]. On mobile
  /// platforms, the entire item is wrapped with a
  /// [ReorderableDelayedDragStartListener].
  ///
  /// To change the appearance or the layout of the drag handles, make
  /// this parameter false and wrap each list item, or a widget within
  /// each list item, with [ReorderableDragStartListener] or
  /// [ReorderableDelayedDragStartListener], or a custom subclass
  /// of [ReorderableDragStartListener].
  ///
  /// The following sample specifies `buildDefaultDragHandles: false`, and
  /// uses a [Card] at the leading edge of each item for the item's drag handle.
  ///
  /// {@tool dartpad --template=stateful_widget_scaffold}
  ///
  /// ```dart
  /// final List<int> _items = List<int>.generate(50, (int index) => index);
  ///
  /// @override
  /// Widget build(BuildContext context){
  ///   final ColorScheme colorScheme = Theme.of(context).colorScheme;
  ///   final Color oddItemColor = colorScheme.primary.withOpacity(0.05);
  ///   final Color evenItemColor = colorScheme.primary.withOpacity(0.15);
  ///
  ///   return ReorderableListView(
  ///     buildDefaultDragHandles: false,
  ///     children: <Widget>[
  ///       for (int index = 0; index < _items.length; index++)
  ///         Container(
  ///           key: Key('$index'),
  ///           color: _items[index].isOdd ? oddItemColor : evenItemColor,
  ///           child: Row(
  ///             children: <Widget>[
  ///               Container(
  ///                 width: 64,
  ///                 height: 64,
  ///                 padding: const EdgeInsets.all(8),
  ///                 child: ReorderableDragStartListener(
  ///                   index: index,
  ///                   child: Card(
  ///                     color: colorScheme.primary,
  ///                     elevation: 2,
  ///                   ),
  ///                 ),
  ///               ),
  ///               Text('Item ${_items[index]}'),
  ///             ],
  ///           ),
  ///         ),
  ///     ],
  ///     onReorder: (int oldIndex, int newIndex) {
  ///       setState(() {
  ///         if (oldIndex < newIndex) {
  ///           newIndex -= 1;
  ///         }
  ///         final int item = _items.removeAt(oldIndex);
  ///         _items.insert(newIndex, item);
  ///       });
  ///     },
  ///   );
  /// }
  /// ```
  ///{@end-tool}
user_39134900

FrontMobe's answer has helped me.

But in my case i needed the default mobile (delayed drag start) behavior, which i achieved by using ReorderableDelayedDragStartListener as the listener.

ReorderableListView.builder(
  buildDefaultDragHandles: false,
  // ...
  itemBuilder: (context, index) {
     return ReorderableDelayedDragStartListener(
       index: index,
       child: ...
     );
  )
user_173185940
Related