Flutter Dismissible example – Swipe to dismiss/remove Item in ListView

https://ozenero.com/flutter-dismissible-example-swipe-to-dismiss-remove-item-in-listview

Flutter Dismissible example – Swipe to dismiss/remove Item in ListView

In previous post, we had created and shown a ListView with ListView.builder() constructor method. Today, we're gonna add a function that allows us swipe to remove Item in the list using Dismissible.

Related Post: Flutter ListView example with ListView.builder

Example Overview

Flutter Dismissible Widget

Create List of Items

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(...items[index]...);
  },
);

Wrap in a Dismissible Widget

Update itemBuilder() function to return a Dismissible Widget:

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return Dismissible(
      key: Key('itemKey'), // Each Dismissible must contain a Key
      background: Container(color: Colors.red), // red background behind the item
      onDismissed: (direction) { // Each Dismissible must contain a Key
        setState(() {
          items.removeAt(index);
        });
      },
      ListTile(...items[index]...),
    );
  },
);

Complete Code

lib/post.dart

More at:

https://ozenero.com/flutter-dismissible-example-swipe-to-dismiss-remove-item-in-listview

Flutter Dismissible example – Swipe to dismiss/remove Item in ListView

Comments

[Pablo Discobar]

Good job! If you are interested in Flutter, you can also look at my article about free vs paid Flutter templates. I'm sure you'll find something useful there, too.  - dev.to/pablonax/free-vs-paid-flutt...