Making Something Swipeable

We’re going to work to remove a list item by swiping left or right. This is a common design pattern you see in lots of apps. Let’s start by creating a basic Flutter app, the way we’ve done before. Then removing the comments and existing widgets so we’re left with a blank app.

Building the Initial List

To create this, we’ll need to create a list of items that will then display. To do this, going to go into our Stateful Widget and add a data source. Since this is just test data, the information is bogus, and it could easily be replaced with an actual data loaded from an external source in a real world situation.

final items = List<String>.generate(20, (i) => "Item ${i + 1}");

Next we’re going to convert that list of items into a Widget List using a ListView.builder(). This is going to go where the body attribute is.

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

This moves us through each item in the list, and adds it to the ListView.

Adding Something Dismissible

Now we need to add something to the item builder so we can actually dismiss the list item. Luckily we have a Widget called Dismissible what will do just that for us.

We’re going to make the ItemBuilder the following code.

itemBuilder: (context, index) {
  final item = items[index];
  return Dismissible(
    // Each Dismissible must contain a Key. Keys allow Flutter to
    // uniquely identify widgets.
    key: Key(item),
    // Provide a function that tells the app
    // what to do after an item has been swiped away.
    onDismissed: (direction) {
      // Remove the item from the data source.
      setState(() {
        items.removeAt(index);
      });

      // Then show a snackbar.
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('$item dismissed')));
    },
    child: ListTile(
      title: Text(item),
    ),
  );
},

Notice how instead of just some text like before, we have a Dissmissible widget. It will, on dismissed, specify that one of the items is removed, and will show a SnackBar to that effect.

That Swipe Direction

Want to know what direction it was swiped. Well, we’ll need to make just one little modification.

Direction is accessible inside of the showSnackBar since it is inside of the onDismissed event handler. Therefore we can reference it. By concatenating direction.toString() we can add which direction the element was swiped. While that may not be important for this part of the application, other applications use swipes to different sides to help define what that swipe meant.

ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                    content: Text('$item dismissed' + direction.toString())));

You will notice that the result will be something like startToEnd (left to right) or endToStart (right to left). This is just how Flutter reports them.

“Leave Behinds”

Often we want to give a visual clue as to what just happened. One common way is to provide a background color where the item used to be.

You can set a background for the Dissmissible object, so you can see where you’ve swipped it. This is especially helpful if you have large areas and don’t want to have users accidentally swiping the wrong item.

This code is going inside of the Dismissible widget. I’ve put it after the key, but before the onDismissed handler, but in reality where it goes doesn’t matter.

background: Container(color: Colors.red),

This will show the same background color regardless of the direction you swipe. If you want different colors based upon the direction of the swipe, you can set a secondaryBackground.

background: Container(color: Colors.blue),

Of course, since this is showing a Container Widget for the background, we can provide additional information if we want/need to.

    secondaryBackground: Container(
          color: Colors.blue,
          padding: EdgeInsets.all(10),
          child: Text(
          "Accept",
          textAlign: TextAlign.right,
          style: TextStyle(
              color: Colors.white,
              fontSize: 20,
          ),
        ),
      ),

How Far to Dismiss

By default, you have to swipe 40% of the screen to dismiss. However, you can change this, per direction. So if you want to all but ensure that you can’t accidentally dismiss and element you don’t want, set it to a higher value.

dismissThresholds: {
  DismissDirection.startToEnd: 0.1,
  DismissDirection.endToStart: 0.7
},

Notice that the values are between 0 and 1. At 1 or greater, you’ve turned off dismissing in that direction.

Making Something Swipeable was originally found on Access 2 Learn