Swipe Actions in Flutter ListView

admin@crackerworld.in Avatar

Swipe Actions in Flutter ListView:The Flutter DataTable provides support to swipe a row by setting the SfDataGrid.allowSwiping property to true. Swipe actions will be displayed when swiping a row from left to right or right to left direction. The swipe dragging gesture can be restrict to a certain point on the row by setting the SfDataGrid.swipeMaxOffset property.

Swipe callbacks

The data grid provides the following callbacks to notify the swiping stages:

  • onSwipeStart: Called when the swipe offset changes from its initial value. The swipe action can be cancel by returning false.
  • onSwipeUpdate: Callled while swiping a row is in progress. The swipe action can be canceled by returning false.
  • onSwipeEnd: Called when the swipe offset value reaches the SfDataGrid.maxSwipeOffset indicates that the swipe action is complete.

The swipe callbacks provide the following properties in their arguments:

  • RowIndex: Defines the swiping row index.
  • SwipeDirection: Defines the swipe direction of the swiped row.
  • SwipeOffset: Defines the current swipe offset of the row being swiped.

By handling the swipe callbacks, you can use these property values from the arguments to perform any desired action, such as deleting the row, editing the data, and more.

We are going to implement a simple app displaying a list of cake flavors. By swiping a list element to the right, we will add or remove the flavor as a favorite flavor.

Swiping to the left will be a swipe-to-delete action and removes the element from the list. In this case, a Snackbar is show offering to undo the delete action.

we start by creating a new Flutter app and clean up the generate project code.

Next, we clean up our main.dart

Finally, we create a new file called list.dart and add a StatefulWidget called ListPage. We set up a basic Scaffold with and AppBar like this:

Displaying a list of flavors

To have some content that we can display in our list, we continue by creating a new file called flavor.dart and add a simple class holding all information we need to know about an cake flavor.

Every flavor has a name of type String and an attribute isFavorite which is a bool and is false by default. This is our Flavor class:

We specify the number of flavors that are available using the itemCount attribute and define how the ListView should build the list items by implementing the itemBuilder callback.

Next we add an icon to each ListTile indicating whether the Flavor is a favorite or not. For this, we add the following line to the ListTile:

Swipe Action: Toggle Favorite

Next, we add a swipe action to toggle the favorite state of a flavor. For this, we wrap the ListTile in a Dismissible widget. A Dismissible requires to have a Key, so we add it like this:

When swiping an item to the right, we see a green background and a favorite icon.

Swipe Actions in Flutter ListView
Swipe Actions in Flutter ListView
Swipe Action: Swipe to delete

Now, we want to add a second action: the item should be deleted when it is swiped to the left side. Additionally, we want to add a different background for this action.

For More: To know about Flutter Credit Card Design UI Implementation.

Tagged in :

admin@crackerworld.in Avatar

Leave a Reply

Your email address will not be published. Required fields are marked *

More Articles & Posts