How to make the delete effect smooth when you click on the delete button.

[Artem738]

When a block is removed with a swipe, it is removed smoothly. But if you remove it with a simple click, then the removal effect is instant. What do I need to do with this sample code to use the smooth effect of this package when I delete an element with a button? Thanks for the great package. Unfortunately, I couldn't figure it out myself.

import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({
    Key? key,
  }) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List dataMap = [
    {"id": 0, "title": "Zero"},
    {"id": 1, "title": "First"},
    {"id": 2, "title": "Second"},
    {"id": 3, "title": "Third"},
    {"id": 4, "title": "Fourth"},
    {"id": 5, "title": "Fifth"}
  ];

  void removeFromMap(id) {
    setState(() {
      dataMap.removeAt(id);
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Slidable Example',
      home: Scaffold(
        body: ListView(
          children: [
            for (var id = 0; id < dataMap.length; id++) ...[
              Slidable(
                key: UniqueKey(),
                endActionPane: ActionPane(
                  motion: const ScrollMotion(),
                  dismissible: DismissiblePane(onDismissed: () {
                    removeFromMap(id);
                  }),
                  children: [
                    SlidableAction(
                      onPressed: (context) => removeFromMap(id),
                      backgroundColor: const Color(0xFFFE4A49),
                      foregroundColor: Colors.white,
                      icon: Icons.delete,
                      label: 'Delete',
                    ),
                  ],
                ),
                child: ListTile(
                  title: Text(
                    '${dataMap[id]['title']} | realId=${dataMap[id]['id']} | listId=${id.toString()}',
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
            ],
          ],
        ),
      ),
    );
  }
}

[cliftonscott]

onPressed: (context) {
  final controller = Slidable.of(context);
  controller?.dismiss(
    ResizeRequest(const Duration(milliseconds: 300),
    () => _deleteComment(_comments![index])),
    duration: const Duration(milliseconds: 300),
  );
}

Try this.

[letsar]

What do you mean by smooth? The default code should Resize the item on removal, so I don't understand what is not smooth.

[Artem738]

onPressed: (context) {
  final controller = Slidable.of(context);
  controller?.dismiss(
    ResizeRequest(const Duration(milliseconds: 300),
    () => _deleteComment(_comments![index])),
    duration: const Duration(milliseconds: 300),
  );
}

Try this.

unfortunately it didn't work at all. It doesn't show any errors, just nothing happens.

                      onPressed: (context) {
                        final controller = Slidable.of(context);
                        controller?.dismiss(
                          ResizeRequest(
                            const Duration(milliseconds: 300),
                            () => removeFromMap(id),
                          ),
                          duration: const Duration(milliseconds: 300),
                        );
                      },

What do you mean by smooth? The default code should Resize the item on removal, so I don't understand what is not smooth.

DismissiblePane removes the block nicely. But I can't figure out how to use it when I remove it in a way other than shift to the side. In the code above, the removeFromMap method is run in two places. And because of this, the removal effect works differently.

[Zechst]

I am trying to achieve click to delete instead of sliding too, but no luck yet whatsoever

[kyle-seongwoo-jun]

@Artem738 I think https://github.com/letsar/flutter_slidable/issues/245#issuecomment-910219066 would help you.