letsar / flutter_slidable

A Flutter implementation of slidable list item with directional slide actions.
MIT License
2.73k stars 591 forks source link

Query: Smooth DismissiblePane Implementation within ActionPane? #476

Open KiloNovemberDelta opened 6 months ago

KiloNovemberDelta commented 6 months ago

Hello,

Firstly, a huge thank you for this incredible package!

In my application, I have a list of products. I aim for users to validate a product by swiping from left to right, or be able to edit/delete it by swiping from right to left.

However, I'm encountering difficulty implementing just the DismissiblePane for the validation functionality. It seems ActionPane requires children, and therefore, the motion from the user is not smooth to validate the product. When a user swipes, they're initially obstructed by the ActionPaneAction, and only then can they dismiss the tile.

Do you know if it's possible to exclusively employ a DismissiblePane within an ActionPane? Thank you!

Here is my minimal code :

  Slidable(
      key: ValueKey(index),
      groupTag: '0',
      startActionPane: ActionPane(
        motion: const DrawerMotion(),
        dismissible: DismissiblePane(
            key: const ValueKey(0),
            closeOnCancel: true,
            dismissThreshold: 0.8,
            confirmDismiss: () async {
              doSth();
              return false;
            },
            onDismissed: () {
              print("Panel dismiss called");
            }),
        children: [
          SlidableAction(
            onPressed: (_) {}, // I don't want to perform any action here, but the motion do a stop here
            backgroundColor: Colors.green,
            foregroundColor: Colors.white,
            icon: Icons.done,
          ),
        ],
      ),
      endActionPane: ActionPane(
        extentRatio: 0.4,
        motion: const ScrollMotion(),
        children: [
          SlidableAction(
            onPressed: (_) {},
            backgroundColor: Colors.blue,
            foregroundColor: Colors.white,
            icon: Icons.edit,
          ),
          SlidableAction(
            onPressed: (_) {
              product.isVisible = false;
              setState(() {});
              _deleteSelectedItems();
            },
            backgroundColor: Colors.red,
            foregroundColor: Colors.white,
            icon: Icons.delete,
          ),
        ],
      ),
      child: ChildProduct(product),
    );
letsar commented 4 months ago

Hi, thank you for opening an issue. Can you provide a code to reproduce this issue I could simply copy-paste to run it and a video showing what's going on and what you would want instead?