Slidable is a Flutter Favorite package!

flutter_slidable

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

Sponsors

Our top sponsors are shown below! [Become a Sponsor]

Try the Flutter Chat Tutorial  💬

Migration from 0.6.0

You can read this small guide to migrate from the 0.6 to the 1.0 version: https://github.com/letsar/flutter_slidable/wiki/Migration-from-version-0.6.0-to-version-1.0.0

Features

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

Install

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

dependencies:
                  flutter_slidable: <latest_version>
                

In your library add the following import:

import 'package:flutter_slidable/flutter_slidable.dart';
                

Getting started

Example:

Slidable(
                  // Specify a key if the Slidable is dismissible.
                  key: const ValueKey(0),
                
                  // The start action pane is the one at the left or the top side.
                  startActionPane: ActionPane(
                    // A motion is a widget used to control how the pane animates.
                    motion: const ScrollMotion(),
                
                    // A pane can dismiss the Slidable.
                    dismissible: DismissiblePane(onDismissed: () {}),
                
                    // All actions are defined in the children parameter.
                    children: const [
                      // A SlidableAction can have an icon and/or a label.
                      SlidableAction(
                        onPressed: doNothing,
                        backgroundColor: Color(0xFFFE4A49),
                        foregroundColor: Colors.white,
                        icon: Icons.delete,
                        label: 'Delete',
                      ),
                      SlidableAction(
                        onPressed: doNothing,
                        backgroundColor: Color(0xFF21B7CA),
                        foregroundColor: Colors.white,
                        icon: Icons.share,
                        label: 'Share',
                      ),
                    ],
                  ),
                
                  // The end action pane is the one at the right or the bottom side.
                  endActionPane: const ActionPane(
                    motion: ScrollMotion(),
                    children: [
                      SlidableAction(
                        // An action can be bigger than the others.
                        flex: 2,
                        onPressed: doNothing,
                        backgroundColor: Color(0xFF7BC043),
                        foregroundColor: Colors.white,
                        icon: Icons.archive,
                        label: 'Archive',
                      ),
                      SlidableAction(
                        onPressed: doNothing,
                        backgroundColor: Color(0xFF0392CF),
                        foregroundColor: Colors.white,
                        icon: Icons.save,
                        label: 'Save',
                      ),
                    ],
                  ),
                
                  // The child of the Slidable is what the user sees when the
                  // component is not dragged.
                  child: const ListTile(title: Text('Slide me')),
                ),
                

Motions

Any ActionPane has a motion parameter which allow you to define how the pane animates when the user drag the Slidable.

Behind Motion

The actions appear as if they where behind the Slidable:

Drawer Motion

Animate the actions as if they were drawers, when the Slidable is moving:

Scroll Motion

The actions follow the Slidable while it's moving:

Stretch Motion

Animate the actions as if they were streched while the Slidable is moving:

Controller

You can use SlidableController to open or close the actions programmatically:

final controller = SlidableController();
                
                // ...
                
                Slidable(
                  controller: controller,
                  // ...
                );
                
                // ...
                
                // Open the actions
                void _handleOpen() {
                  controller.openEndActionPane();
                  // OR
                  //controller.openStartActionPane();
                }
                
                void _handleOpen() {
                  controller.close();
                }
                

FAQ

You can read the FAQ here: https://github.com/letsar/flutter_slidable/wiki/FAQ

Sponsoring

I'm working on my packages on my free-time, but I don't have as much time as I would. If this package or any other package I created is helping you, please consider to sponsor me so that I can take time to read the issues, fix bugs, merge pull requests and add features to these packages.

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.

3.1.2

Fixed

• Use Object.hash instead of hashValues.

3.1.1

Fixed

• An issue when having only one action pane set #311
• An issue with delete threshold #230

3.1.0

Added

• A way to provide a controller to the Slidable.

3.0.1

Changed

• Remove deprecation use of primary and surface parameters from OutlinedButton.styleFrom method. (See https://github.com/letsar/flutter_slidable/pull/443)

3.0.0

Changed

• Minimum version of Flutter (3.7.0 now)

2.0.0

Changed

• Minimum version of Flutter (3.0.0 now) and Dart (2.17.0 now).

1.3.2

Fixed

• ClipBehavior.none issue (https://github.com/letsar/flutter_slidable/issues/361).

1.3.1

Fixed

• Rare LateInitializationError with DrawerMotion (https://github.com/letsar/flutter_slidable/issues/289).
• Issue with shadow content (https://github.com/letsar/flutter_slidable/issues/279).

1.3.0

Added

• Padding and BorderRadius to SlidableAction.

1.2.1

Fixed

• Build warning

1.2.0

Added

• A way to automatically close other Slidables within the same group by tapping on them.
• Add a dragDismissible parameter on ActionPane.

Fixed

• The RTL issue (#244).

1.1.0

Changed

• Created a totally different notification system in order to be more flexible.
• Deprecated SlidableNotificationListener in favor of SlidableAutoCloseBehavior.

1.0.0

Same as 1.0.0-dev.9. This is just for making it clear that it's now stable.

1.0.0-dev.9

Fixed

• Fixes an issue where we click on the Slidable instead of dragging it (https://github.com/letsar/flutter_slidable/pull/235).

1.0.0-dev.8

Fixed

• Fixes an issue where the Dismissible animation stopped in middle when the gesture was too fast.

1.0.0-dev.7

Fixed

• Fixes an issue where the Slidable animation stopped in middle when the gesture was too fast.

1.0.0-dev.6

Fixed

• Fixes an issue preventing the actionPaneType to be updated when it animates (https://github.com/letsar/flutter_slidable/issues/226).

1.0.0-dev.5

Fixed

• Fixes an issue preventing the Slidable to reach the extentRatio manually (https://github.com/letsar/flutter_slidable/issues/225).

1.0.0-dev.4

Added

• ResizeRequest is now available, and the SlidableController.dismiss method can be used from outside.

1.0.0-dev.3

Fixed

• Fixes Dismissal issue with endActionPane (https://github.com/letsar/flutter_slidable/issues/216).

1.0.0-dev.2

Changed

• Flutter Favorite package logo

1.0.0-dev.1

Changed

• Complete package rewriting in order to be more flexible and simple to use.

0.6.0

Added

• Null Safety Support

0.5.7

Fixed

• Formatting issues

0.5.6

Fixed

• Color issue in SlideAction

0.5.5

Fixed

• Static Analysis issues

0.5.4

Added

• Ripple effect when tapping on the IconSlideAction (https://github.com/letsar/flutter_slidable/pull/89)
• Option to make the widget non-dismissible by dragging (https://github.com/letsar/flutter_slidable/pull/101)

0.5.3

Fixed

• Fix SlidableDrawerActionPane when different than 2 actions (https://github.com/letsar/flutter_slidable/pull/74).

0.5.2

Fixed

• Add check for null value in dismissal field, in getter for _dismissThreshold (https://github.com/letsar/flutter_slidable/pull/71).

0.5.1

Fixed

• Fix SlidableDrawerActionPane onTap issue (https://github.com/letsar/flutter_slidable/pull/73).

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

• Fix the end extend of actions in dismiss animation (https://github.com/letsar/flutter_slidable/pull/38).

0.4.8

Added

• onSlideAnimationChanged and onSlideIsOpenChanged on SlidableController.

0.4.7

Fixed

• https://github.com/letsar/flutter_slidable/issues/31 (Issue with dismiss animation).

0.4.6

Modified

• Reduce the possibilities for the https://github.com/flutter/flutter/issues/11895 issue to happen.

0.4.5

Added

• The foregroundColor parameter on IconSlideAction class.

0.4.4

Added

• The closeOnCanceled parameter on SlideToDismissDelegate classes.

0.4.3

Fixed

• https://github.com/letsar/flutter_slidable/issues/23 (Issue with Drawer delegate when different action count).

0.4.2

Fixed

• https://github.com/letsar/flutter_slidable/issues/22 and https://github.com/letsar/flutter_slidable/issues/24 (Issue with controller).

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

• https://github.com/letsar/flutter_slidable/issues/11 (slide action not rebuild after controller dismissed).

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.