Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Query: Smooth DismissiblePane Implementation within ActionPane? #476

Open
KiloNovemberDelta opened this issue May 3, 2024 · 1 comment

Comments

@KiloNovemberDelta
Copy link

KiloNovemberDelta commented May 3, 2024

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
Copy link
Owner

letsar commented Jul 11, 2024

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?

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants