Code Monkey home page Code Monkey logo

Comments (16)

anthonysette avatar anthonysette commented on June 6, 2024 6

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)),
              ] 
            )
          );
        }
      ),
    );
  }

from flutter_slidable.

letsar avatar letsar commented on June 6, 2024 2

@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.

from flutter_slidable.

abacaj avatar abacaj commented on June 6, 2024 1

@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()

from flutter_slidable.

abacaj avatar abacaj commented on June 6, 2024

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.

from flutter_slidable.

abacaj avatar abacaj commented on June 6, 2024

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.

from flutter_slidable.

letsar avatar letsar commented on June 6, 2024

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.

from flutter_slidable.

abacaj avatar abacaj commented on June 6, 2024

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

from flutter_slidable.

letsar avatar letsar commented on June 6, 2024

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.

from flutter_slidable.

abacaj avatar abacaj commented on June 6, 2024

@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)))
                    )
                  ] 
                )
              );
          })

from flutter_slidable.

letsar avatar letsar commented on June 6, 2024

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

from flutter_slidable.

letsar avatar letsar commented on June 6, 2024

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

from flutter_slidable.

abacaj avatar abacaj commented on June 6, 2024

thank you for looking into it!

from flutter_slidable.

letsar avatar letsar commented on June 6, 2024

Fix published in version 0.4.7

from flutter_slidable.

YavorIvanov avatar YavorIvanov commented on June 6, 2024

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

from flutter_slidable.

bct-fbo avatar bct-fbo commented on June 6, 2024

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

from flutter_slidable.

bct-fbo avatar bct-fbo commented on June 6, 2024

@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!

from flutter_slidable.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.