flutter_slidable (Flutter Package of the Week)

♪ [music] ♪ A common pattern in mobile UI design is to have a thing where you swipe it in one direction, and it reveals some actions that can be done with that thing. There's a lot that goes into this interaction: gesture detectors, transforms, curves, animations, click handlers, and more. It would be nice to just be able to use this pattern without worrying about all that, yeah? Well, you can. With the <i>flutter_slidable</i> package, you get a slidable widget that implements this pattern. A typical use case for slidable is in a list of items that share possible actions, like an email inbox. Pick the <i>ListTile</i> you'd normally use for the item and add it as the child of a slidable. Slidable needs to know how to show the opening of the list of actions. Does it expand each item as if they're growing to fill the space? Do the actions slide out from behind each other as if they're stacked up? Or maybe they slide in from off-screen? You define how this happens using the <i>actionPane</i> property. You can either build your own animation for it or use one of the options built into the <i>flutter_slidable</i> package. <i>SlidableScrollActionPane</i>, for example, will just scroll the action panel in from off-screen. But wait! Which actions are we having to slide in? For the <i>actions</i> parameter, include a list of widgets representing all of the different things you want your users to be able to do with this slidable item. The package includes helpers like the <i>IconSlideAction</i> that you can just drop in to take care of sizing the action for you. Finally, set the <i>actionExtentRatio</i> to specify the fraction of space each action should take up. This should be based on how many actions there are so that all of them will be visible. And that's it. Now you have a list item with actions that can show up on a swipe. For more on <i>flutter_slidable</i> and all the other packages, head on over to <i>pub.dev</i> ♪ [music] ♪

Channel: Flutter

Views: 152,509

Keywords: GDS: Yes, flutter_slidable, Flutter slidable, swipe to reveal, Flutter swipe to reveal, build an app, app building, coding, widgets, create a widget, widgets for your app, coding an app, Flutter, widget of the week, google, google developers, flutter 101, get started with flutter, flutter apps, flutter widgets, build apps with flutter, Package of the Week

Id: QFcFEpFmNJ8

Length: 2min 26sec (146 seconds)

Published: Thu Mar 11 2021

Reddit Comments

[u/ThatInternetGuy]

If you want to use this, remember that it won't go well with TabBar, and it's prone to accidental swiping, so that means you should ask for another confirmation from the user before going ahead with the action (archiving message, deleting, muting, etc).

This happens a lot with Signal messaging app. Every month or so, I see some conversations disappeared. When that happens, I would go to the archived messages section, and they are there. The accidental swipe archived them.

[u/antariksh11]

Just tried this with my app. It’s pretty nice but a little buggy/janky and needs a little bit more polish. But overall, I’ll definitely keep it in my app since it does make swipe actions a lot easier!