flutter_slidable 0.5.4

flutter_slidable #

A Flutter implementation of slidable list item with directional slide actions that can be dismissed.

Pub Donate


Features #

  • Accepts primary (left/top) and secondary (right/bottom) widget lists as slide actions.
  • Can be dismissed.
  • 4 built-in action panes.
  • 2 built-in slide action widgets.
  • 1 built-in dismiss animation.
  • You can easily create you custom layouts and animations.
  • You can use a builder to create your slide actions if you want special effects during animation.
  • Close when a slide action has been tapped (overridable).
  • Close when the nearest Scrollable starts to scroll (overridable).
  • Option to disable the slide effect easily.

Getting started #

In the pubspec.yaml of your flutter project, add the following dependency:

  flutter_slidable: "^0.5.4"

In your library add the following import:

import 'package:flutter_slidable/flutter_slidable.dart';

For help getting started with Flutter, view the online documentation.

Constructors #

You can create a Slidable in two different ways:

  • By calling the Slidable constructor and passing a list of slide actions.
  • By calling the Slidable.builder constructor and passing slide action builders, if you want special effects during the animation.

A Slidable needs multiple things:

  • Slide actions (see below for details). They can be any widget. For convenience, this package has 2 built-in side action widgets.
  • A slide action pane widget. This is what controls the layout and the animation of the slide menu.
  • An extent ratio between a slide action extent and the item extent.
  • A child.

The actions contains the slide actions that appear when the child has been dragged down or to the right. The secondaryActions contains the slide actions that appear when the child has been dragged up or to the left.

A direction parameter lets you choose if you want actions to appear when you slide horizontally (default) or vertically.

  actionPane: SlidableDrawerActionPane(),
  actionExtentRatio: 0.25,
  child: Container(
    color: Colors.white,
    child: ListTile(
      leading: CircleAvatar(
        backgroundColor: Colors.indigoAccent,
        child: Text('$3'),
        foregroundColor: Colors.white,
      title: Text('Tile n°$3'),
      subtitle: Text('SlidableDrawerDelegate'),
  actions: <Widget>[
      caption: 'Archive',
      color: Colors.blue,
      icon: Icons.archive,
      onTap: () => _showSnackBar('Archive'),
      caption: 'Share',
      color: Colors.indigo,
      icon: Icons.share,
      onTap: () => _showSnackBar('Share'),
  secondaryActions: <Widget>[
      caption: 'More',
      color: Colors.black45,
      icon: Icons.more_horiz,
      onTap: () => _showSnackBar('More'),
      caption: 'Delete',
      color: Colors.red,
      icon: Icons.delete,
      onTap: () => _showSnackBar('Delete'),

Built-in slide actions #

This package comes with 2 kinds of slide actions:

  • SlideAction, which is the most flexible. You can choose a background color, or any decoration, and it takes any widget as a child.
  • IconSlideAction, which requires an icon. It can have a background color and a caption below the icon.

Built-in action panes #

This package comes with 4 kinds of action panes:

SlidableBehindActionPane #

The slide actions stay behind the item while it's sliding:


SlidableScrollActionPane #

The slide actions follow the item while it's sliding:


SlidableDrawerActionPane #

The slide actions animate like drawers while the item is sliding:


SlidableStrechActionPane #

The slide actions stretch while the item is sliding:



How to prevent my slide action to close after it has been tapped? #

By default, SlideAction and IconSlideAction close on tap. To prevent this, you can pass in false to the closeOnTap constructor parameter.

How to prevent my Slidable to close after my list has scrolled? #

By default, a Slidable closes when the nearest Scrollable widget starts to scroll. To prevent this, you can pass in false to the closeOnScroll constructor parameter.

How can I dismiss my Slidable? #

In order to make your Slidable dismissible, you have to set the dismissal parameter of the Slidable constructor and provide a child. You can set any widget as a child of SlidableDismissal. For the moment there is only one built-in: SlidableDrawerDismissal.

The actionType passed to the onDismissed callback let you know which action has been dismissed.

When a Slidable is dismissible, the key parameter must not be null.


dismissal: SlidableDismissal(
  child: SlidableDrawerDismissal(),
  onDismissed: (actionType) {
        actionType == SlideActionType.primary
            ? 'Dismiss Archive'
            : 'Dimiss Delete');
    setState(() {

How can I prevent to dismiss one side but not the other? #

If you only want one side to be dismissible, you can set the associated threshold to 1.0 or more. For example, if you don't want the first primary action to be dismissed, you will set the following thresholds on the dismissal:

dismissThresholds: <SlideActionType, double>{
  SlideActionType.primary: 1.0

How to let the user cancel a dismissal? #

You can let the user confirm the dismissal by setting the onWillDismiss callback on the dismissal.


dismissal: SlidableDismissal(
  child: SlidableDrawerDismissal(),
  onWillDismiss: (actionType) {
          return showDialog<bool>(
            context: context,
            builder: (context) {
              return AlertDialog(
                title: Text('Delete'),
                content: Text('Item will be deleted'),
                actions: <Widget>[
                    child: Text('Cancel'),
                    onPressed: () => Navigator.of(context).pop(false),
                    child: Text('Ok'),
                    onPressed: () => Navigator.of(context).pop(true),

How to let keep only one Slidable open?

You have to set the controller parameter of the Slidable constructors to a SlidableController instance:

final SlidableController slidableController = SlidableController();
      key: Key(item.title),
      controller: slidableController,

How can I animate an external widget at the same time as the active Slidable? #

You have to set the callbacks of a SlidableController instance: The onSlideAnimationChanged let you get the animation of the current Slidable. The onSlideIsOpenChanged let you know when the current Slidable opens and closes.

final SlidableController slidableController = SlidableController(
  onSlideAnimationChanged: handleSlideAnimationChanged,
  onSlideIsOpenChanged: handleSlideIsOpenChanged,
  void handleSlideAnimationChanged(Animation<double> slideAnimation) {
    setState(() {
      _rotationAnimation = slideAnimation;

  void handleSlideIsOpenChanged(bool isOpen) {
    setState(() {
      _fabColor = isOpen ? Colors.green : Colors.blue;

How can I open the Slidable programmatically? #

You can open or close the Slidable programmatically by calling the open or close method of the SlidableState. The easiest way get the SlidableState from a child is to call Slidable.of(context).

The open method has an optional parameter called actionType that let you choose which action pane to open.

How can I dismiss the Slidable programmatically? #

Similar to opening or closing, you can dismiss the Slidable programmatically by calling the dismiss method of the SlidableState.

If you want to use the dismiss method without allowing your user to slide to dismiss, you can set the dragDismissible parameter of the SlidableDismissal constructor to false.

Changelog #

Please see the Changelog page to know what's recently changed.

Contributions #

Feel free to contribute to this project.

If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue.
If you fixed a bug or implemented a feature, please send a pull request.

0.5.4 #

Added #

0.5.3 #

Fixed #

0.5.2 #

Fixed #

0.5.1 #

Fixed #

0.5.0 #

Added #

  • iconWidget parameter for SlideAction which allows full customization of the displayed icon.

Modified #

  • Change the SlidableDelegate to a widget. The field is renamed actionPane.
  • Change the SlideToDismissDelegate to a SlidableDismissal widget that takes another widget as a child. The field is renamed dismissal.

0.4.9 #

Fixed #

0.4.8 #

Added #

  • onSlideAnimationChanged and onSlideIsOpenChanged on SlidableController.

0.4.7 #

Fixed #

0.4.6 #

Modified #

0.4.5 #

Added #

  • The foregroundColor parameter on IconSlideAction class.

0.4.4 #

Added #

  • The closeOnCanceled parameter on SlideToDismissDelegate classes.

0.4.3 #

Fixed #

0.4.2 #

Fixed #

0.4.1 #

Added #

  • The SlidableController class.
  • The controller parameter on Slidable constructors to enable keeping only one Slidable open.

0.4.0 #

Added #

  • The SlidableRenderingMode enum.
  • The SlideActionType enum.
  • The SlideToDismissDelegate classes.

Modified #

  • Added a renderingMode parameter in the SlideActionBuilder signature.

0.3.2 #

Added #

  • The enabled parameter on Slidable constructors to enable or disable the slide effect (enabled by default).

0.3.1 #

Fixed #

0.3.0 #

Added #

  • The closeOnTap parameter on slide actions to close when a action has been tapped.
  • The closeOnScroll parameter on Slidable to close when the nearest Scrollable starts to scroll.
  • The static Slidable.of function.

Changed #

  • The dragExtent field in SlidableDelegateContext has been changed to dragSign.

0.2.0 #

Added #

  • Slidable.builder constructor.
  • Vertical sliding.

Changed #

  • The slide actions are now hosted in a SlideActionDelegate instead of List<Widget> inside the Slidable widget.
  • The leftActions have been renamed to actions.
  • The rightActions have been renamed to secondaryActions.

0.1.0 #

  • Initial Open Source release.


example #

A new Flutter project.

Getting Started #

For help getting started with Flutter, view our online documentation.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  flutter_slidable: ^0.5.4

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:flutter_slidable/flutter_slidable.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Feb 19, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.5
  • Flutter: 1.12.13+hotfix.7

Health suggestions

Fix lib/src/widgets/slidable.dart. (-1 points)

Analysis of lib/src/widgets/slidable.dart reported 2 hints:

line 246 col 20: 'inheritFromWidgetOfExactType' is deprecated and shouldn't be used. Use dependOnInheritedWidgetOfExactType instead. This feature was deprecated after v1.12.1..

line 541 col 17: 'inheritFromWidgetOfExactType' is deprecated and shouldn't be used. Use dependOnInheritedWidgetOfExactType instead. This feature was deprecated after v1.12.1..


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.19.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
test ^1.5.1