On tap trigger dismiss animation?

[abacaj]

Great widget library!

Is it possible to trigger the dismiss animation of the Slidable when a user taps a SlideAction?

Something like:

              onTap: () {
                 this.dismiss() // trigger animation of slidable leaving
              },

[abacaj]

It would be good to also listen for drag start event, to prevent other list items from being spam dismissed.

I'm trying to only let one draggable be dismissed at a time.

[abacaj]

Ok I figured out how to allow dismissing only 1 slidable at a time. I had to modify the library to allow for callbacks that tell me when the resizeAnimation is complete.

[letsar]

To dismiss only 1 row at a time, you can also set a SlidableController on Slidables. But it will also prevent two rows to be slid at the same time.

For the dismiss on tap, you can look to #19 (comment) 😃 .

I should add this in the readme though.

[abacaj]

@letsar thanks for responding - I got a error:

flutter: The following NoSuchMethodError was thrown while handling a gesture:
flutter: The method 'dismiss' was called on null.
flutter: Receiver: null
flutter: Tried calling: dismiss()

[abacaj]

I fixed it by using builder but it does not do anything, no exception was thrown either, just calling .dismiss() doesn't trigger the dismiss animation

[letsar]

Have you a code sample to let me reproduce the issue? I've just tried again the example in the comment, and it's working in my example.

[abacaj]

@letsar I am reopening this, I am unable to dismiss (nothing happens when I try to call dismiss, no error either)

here's some code:

actionDelegate: SlideActionBuilderDelegate(actionCount: 1, builder: (cxt, index, animation, mode) {
            return
              SlideAction(
                onTap: () {
                  var state = Slidable
                        .of(cxt);
                  state.dismiss();
                },
                color: Color.fromRGBO(51, 217, 178,1.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(Icons.add_circle, color: Color.fromRGBO(33, 140, 116,1.0)),
                    Padding(
                      padding: EdgeInsets.only(top: 5.0),
                      child: Text("Archive", style: TextStyle(fontWeight: FontWeight.w500, color: Color.fromRGBO(33, 140, 116,1.0)))
                    )
                  ] 
                )
              );
          })

[letsar]

Hi @abacaj, I found how to reproduce, I will look into it.

[letsar]

One workaround while I'm fixing it, would be to set closeOnTap: false, on the SlideAction.

[abacaj]

thank you for looking into it!

[letsar]

Fix published in version 0.4.7

[anthonysette]

For anyone who ends up down this rabbit hole and still cannot get a tap to trigger a dismiss try this. Took me a while to figure it out but just change the child to your slideable item and adjust according to your theme and this should work!

Slidable.builder (
      controller: slidableController,
      key: Key(task),
      actionPane: SlidableDrawerActionPane(),
      actionExtentRatio: 0.25,
      child: //insert your item,
      dismissal: SlidableDismissal(
        child: SlidableDrawerDismissal(),
        dismissThresholds: <SlideActionType, double>{
          SlideActionType.primary: 1.0
        },
        onDismissed: (actionType) {
          print("deleted");
        },
      ),
      secondaryActionDelegate: SlideActionBuilderDelegate(
        actionCount: 1,
        builder: (cxt, index, animation, mode) {
          return SlideAction(
            onTap: () async {
              var state = Slidable.of(cxt);
              state.dismiss();
            },
            color: Colors.white10,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(Icons.delete, color: Color(0xFFFF6984)),
              ] 
            )
          );
        }
      ),
      actionDelegate: SlideActionBuilderDelegate(
        actionCount: 1,
        builder: (cxt, index, animation, mode) {
          return SlideAction(
            onTap: () {print("complete");},
            color: Colors.white10,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(Icons.check_circle, color: Color(0xFF47EED3)),
              ] 
            )
          );
        }
      ),
    );
  }

[YavorIvanov]

Feels like this should be a default or a toggle option.
Maybe link it in the FAQ?

[bct-fbo]

@letsar correct that this feature is not yet implanted on the 1.0.0-dev version? The dimiss() now requires ResizeRequest, it this correct?

[letsar]

@bct-fbo it wasn't available from outside, but I've just made a small improvement to be able to do it.
If you want to be able to dismiss a Slidable by tapping on the action, you'll have to set the action like this:

SlidableAction(
  autoClose: false,
  onPressed: (context) {
    final controller = Slidable.of(context);
    controller.dismiss(
      ResizeRequest(const Duration(milliseconds: 300), () {
        // Write the code to really remove the widget from the tree.
      }),
      duration: const Duration(milliseconds: 300),
    );
  },
  backgroundColor: Color(0xFFFE4A49),
  foregroundColor: Colors.white,
  icon: Icons.delete,
  label: 'Delete',
),

Download the 1.0.0-dev.4 version to be able to do it.

[bct-fbo]

@bct-fbo it wasn't available from outside, but I've just made a small improvement to be able to do it.
If you want to be able to dismiss a Slidable by tapping on the action, you'll have to set the action like this:

SlidableAction(
  autoClose: false,
  onPressed: (context) {
    final controller = Slidable.of(context);
    controller.dismiss(
      ResizeRequest(const Duration(milliseconds: 300), () {
        // Write the code to really remove the widget from the tree.
      }),
      duration: const Duration(milliseconds: 300),
    );
  },
  backgroundColor: Color(0xFFFE4A49),
  foregroundColor: Colors.white,
  icon: Icons.delete,
  label: 'Delete',
),

Download the 1.0.0-dev.4 version to be able to do it.

Awesome! Thank you very much!