I have a Flutter layout using flutter_advanced_drawer for a navigation drawer and a ListView containing items wrapped in flutter_slidable (or Dismissible) for swipe actions (e.g., delete on right-to-left swipe).
There's a gesture conflict:
- Swiping left-to-right from empty space correctly opens the drawer.
- Swiping right-to-left over a list item correctly reveals the
Slidableaction. - Swiping left-to-right over a list item does NOT open the drawer. The
Slidableseems to capture the gesture first.
How can I allow the AdvancedDrawer's left-to-right swipe gesture to take priority or be recognized even when the swipe starts over a Slidable list item?
import 'package:flutter/material.dart';
import 'package:flutter_advanced_drawer/flutter_advanced_drawer.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
class ConflictingGestureView extends StatefulWidget {
const ConflictingGestureView({super.key});
@override
State<ConflictingGestureView> createState() => _ConflictingGestureViewState();
}
class _ConflictingGestureViewState extends State<ConflictingGestureView> {
final _advancedDrawerController = AdvancedDrawerController();
@override
Widget build(BuildContext context) {
return AdvancedDrawer(
controller: _advancedDrawerController,
disabledGestures: false, // Drawer swipe enabled
// Other drawer properties (backdrop, animation, etc.)
drawer: Drawer(
child: ListTile(title: Text('Drawer Item')),
),
child: Scaffold(
appBar: AppBar(
title: const Text('Drawer Conflict'),
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () {
_advancedDrawerController.showDrawer();
},
),
),
body: ListView.builder(
itemCount: 20,
itemBuilder: (context, index) {
return Slidable(
key: ValueKey(index),
// --- Right-to-Left Swipe Action ---
endActionPane: ActionPane(
motion: const StretchMotion(),
children: [
SlidableAction(
onPressed: (context) {
print("Delete action for item $index");
// Actual delete logic here
},
backgroundColor: Colors.red,
foregroundColor: Colors.white,
icon: Icons.delete,
label: 'Delete',
),
],
),
// --- The list item content ---
child: InkWell(
onTap: () => print("Tapped item $index"),
child: Container(
color: Colors.grey[200],
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
margin: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
child: Text('Item $index - Swipe right to delete'),
),
),
);
},
),
),
);
}
}
// main.dart
// void main() {
// runApp(MaterialApp(home: ConflictingGestureView()));
// }
I've tried:
- Using
Dismissible: Same conflict occurs. - Custom
EdgeSwipeDetector: Attempted aGestureDetectoron the edge to manually open the drawer, but this interfered withListViewscrolling and didn't work reliably. SlidablestartActionPane: Not ideal as it would show an action pane before opening the drawer, not a direct swipe-open feel.
How can the AdvancedDrawer be made to recognize its open gesture (left-to-right swipe) even when the swipe starts over a child Slidable widget in a ListView, without disabling the Slidable's own swipe actions?