A Flutter implementation of slidable list item with directional slide actions.
A Flutter implementation of slidable list item with left and right slide actions.
- Accepts left and right widget lists as slide actions.
- 4 built-in layouts.
- 2 built-in slide action widget.
- 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.
Getting started #
pubspec.yaml of your flutter project, add the following dependency:
dependencies: ... flutter_slidable: "^0.2.0"
In your library add the following import:
For help getting started with Flutter, view the online documentation.
You can create a
Slidable in two different ways:
- By calling the
Slidableconstructor and passing a list of slide actions.
- By calling the
Slidable.builderconstructor and passing slide action builders, if you want special effects during the animation.
Slidable needs multiple things:
- Slide actions (see below for details). Which can be any widget. For convenience this package has 2 built-in side action widgets.
- A delegate. 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.
actions contains the slide actions that appears when the child has been dragged down or to the right.
secondaryActions contains the slide actions that appears when the child has been dragged up or to the left.
direction parameter let you choose if you want actions to appear when you slide horizontally or vertically (horizontally by default).
new Slidable( key: Key('$3'), delegate: new SlidableDrawerDelegate(), actionExtentRatio: 0.25, child: new Container( color: Colors.white, child: new ListTile( leading: new CircleAvatar( backgroundColor: Colors.indigoAccent, child: new Text('$3'), foregroundColor: Colors.white, ), title: new Text('Tile n°$3'), subtitle: new Text('SlidableDrawerDelegate'), ), ), actions: <Widget>[ new IconSlideAction( caption: 'Archive', color: Colors.blue, icon: Icons.archive, onTap: () => _showSnackBar('Archive'), ), new IconSlideAction( caption: 'Share', color: Colors.indigo, icon: Icons.share, onTap: () => _showSnackBar('Share'), ), ], secondaryActions: <Widget>[ new IconSlideAction( caption: 'More', color: Colors.black45, icon: Icons.more_horiz, onTap: () => _showSnackBar('More'), ), new IconSlideAction( caption: 'Delete', color: Colors.red, icon: Icons.delete, onTap: () => _showSnackBar('Delete'), ), ], );
Built-in slide actions #
This package comes with 2 kind of slide actions:
SlideActionwhich the more permissive. You can choose a background color, or any decoration, and it takes any widget as a child.
IconSlideActionwhich requires an icon, and cake have a background color and a caption below the icon.
Built-in delegates #
This package comes with 4 kind of delegates:
The slide actions stay behind the item while it's sliding:
The slide actions follow the item while it's sliding:
The slide actions which animate like drawers while the item is sliding:
The slide actions stretch while the item is sliding:
Please see the Changelog page to know what's recently changed.
Feel free to contribute to this project.