How to make a two way Dismissible ListView Items in Flutter


Two way sliding facilitate to add some quick action (hidden ) action to a listview. Flutter made it possible with Dismissible widget,  a built-in Widget come with Flutter.

Dismissible

A dismissible widget can have two way action, up or down / left or right sliding. When the user slide it will removes from the list. This widget is ideal for a listview in action.

Although the direction property allows to set six directions

  1. up
  2. down
  3. horizontal
  4. vertical
  5. start to end
  6. end to start

Background

Using Background you can add two icons, for second action you need to add another background as second Background. Use a row to accompany some group of widget like Icon and image/Text/Icon. Make sure the Icon/Widget align properly.

(
                                  color: Colors.redAccent,
                                  child: Row(
                                    mainAxisAlignment: MainAxisAlignment.end,
                                    children: [
                                      Text(
                                        'Delete',
                                        style: TextStyle(
                                            fontSize: 22, color: Colors.white),
                                      ),
                                      Align(
                                        alignment: Alignment.centerRight,
                                        child: Icon(
                                          Icons.delete,
                                          size: 60,
                                        ),
                                      ),
                                    ],
                                  ),
                                ),

Action

In the OnDismiss ( ) event listener you can write your quick action using beautiful dart code, which is responsible for removing the items from the list. I used HivBox instance for the list.

 onDismissed: (direction) {
                                  try {
                                    if (direction ==
                                        DismissDirection.endToStart) {
                                      projectBox.delete(key);
                                    } else if (direction ==
                                        DismissDirection.startToEnd) {
                                      project.projectStatus = "Finished";
                                      box.put(key, project);

                                   
                                    }
                                  } on Exception catch (e) {
                                    // TODO
                                    print(e);
                                  }

We are using direction property to identify the action and take necessary steps to update the list.

 

 

Published by

Manoj

A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.