letsar / flutter_slidable

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

Slidable stays open after I remove item from list #224

Closed DieGlueckswurst closed 2 years ago

DieGlueckswurst commented 3 years ago

I am using Slidable inside a ListView so I can delete items. The problem is that if I remove an item from the list, the new item has its slidable open. That is obviously not the desired behavior. Here is a Screenvideo for a better understanding.

My list is an AnimatedList:


`                       child: AnimatedList(
                            padding: EdgeInsets.zero,
                            shrinkWrap: true,
                            key: listKey,
                            initialItemCount: widget.month.memories.length,
                            itemBuilder: (context, index, animation) {
                              return slideIt(
                                context,
                                widget.month.memories[index],
                                index,
                                animation,
                              );
                            },
                          ),`

And for here is my Slidable:

` Widget slideIt(
    BuildContext context,
    Memory memory,
    int index,
    animation,
  ) {
    return SlideTransition(
      position: Tween<Offset>(
        begin: const Offset(-1, 0),
        end: Offset(0, 0),
      ).animate(
        CurvedAnimation(
          parent: animation,
          curve: Curves.easeIn,
          reverseCurve: Curves.easeOut,
        ),
      ),
      child: Slidable(
        actionPane: SlidableDrawerActionPane(),
        actionExtentRatio: 0.25,
        movementDuration: Duration(milliseconds: 400),
        child: Column(
          children: [
            MemoryTile(
              memory: memory,
              monthName: widget.month.name,
              onTapped: () {
                _removeMemoryAtIndex(index, memory);
                print('tap on ${memory.description}');
              },
            ),
            SizedBox(
              height: scaleWidth(20),
            ),
          ],
        ),
        secondaryActions: [
          SlideAction(
            closeOnTap: false,
            color: AppColors.secondary,
            onTap: () => {
              _removeMemoryAtIndex(index, memory),
            },
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(
                  CupertinoIcons.trash_fill,
                  color: AppColors.primary,
                  size: 30,
                ),
                SizedBox(
                  height: scaleWidth(5),
                ),
                Text(
                  'Löschen',
                  style: AppTextStyles.montserratH6SemiBold,
                ),
                SizedBox(
                  height: scaleWidth(20),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }`

The AnimatedList makes it a bit more tricky so let me know if you need any more info! How can I fix this?

letsar commented 3 years ago

Hmm, I think that you'll need to add a key to your slideIt widget, so that Flutter will know that it's not the same instance when you remove an item. By the way, why do you need a SlideTransition widget above the Slidable?

ivansapr commented 3 years ago

@DieGlueckswurst I think this can help you https://github.com/flutter/flutter/issues/58917

So what I understood from this is that, ListView Builder is only good if you have a very large number of items that do not require reordering?

DieGlueckswurst commented 2 years ago

@letsar adding a key fixed the issue. Thanks :)