0

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 Slidable action.
  • Swiping left-to-right over a list item does NOT open the drawer. The Slidable seems 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:

  1. Using Dismissible: Same conflict occurs.
  2. Custom EdgeSwipeDetector: Attempted a GestureDetector on the edge to manually open the drawer, but this interfered with ListView scrolling and didn't work reliably.
  3. Slidable startActionPane: 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?

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.