Flutter #1 Slidable List Actions

flutter slidable

a flutter implementation of slidable list item with directional slide actions that can be dismissed.

features

• accepts primary (left/top) and secondary (right/bottom) widget lists as slide actions.
• can be dismissed.
• 4 built-in layouts.
• 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:

dependencies:
  ...
  flutter_slidable: "^0.4.7"

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 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.

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.

new slidable(
  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 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 delegates

this package comes with 4 kinds of delegates:

slidablebehinddelegate

the slide actions stay behind the item while it’s sliding:

slidablescrolldelegate

the slide actions follow the item while it’s sliding:

slidabledrawerdelegate

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

slidablestrechdelegate

the slide actions stretch while the item is sliding:

faq

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 list 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 list?

in order to make your slidable dismissible, you have to set the slidetodismissdelegate parameter of the slidable constructor.
you can set any class that inherits slidetodismissdelegate. for now there is only one built-in: slidetodismissdrawerdelegate.

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.

example:

slidetodismissdelegate: new slidetodismissdrawerdelegate(
  ondismissed: (actiontype) {
    _showsnackbar(
        context,
        actiontype == slideactiontype.primary
            ? 'dismiss archive'
            : 'dimiss delete');
    setstate(() {
      items.removeat(index);
    });
  },
),

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 slidetodismissdelegate:

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 slidetodismissdelegate.

example:

slidetodismissdelegate: new slidetodismissdrawerdelegate(
  onwilldismiss: (actiontype) {
          return showdialog<bool>(
            context: context,
            builder: (context) {
              return new alertdialog(
                title: new text('delete'),
                content: new text('item will be deleted'),
                actions: <widget>[
                  new flatbutton(
                    child: new text('cancel'),
                    onpressed: () => navigator.of(context).pop(false),
                  ),
                  new flatbutton(
                    child: new text('ok'),
                    onpressed: () => navigator.of(context).pop(true),
                  ),
                ],
              );
            },
          );
        },
        ...
        ),

how to let keep only one slidable list open?

you have to set the controller parameter of the slidable constructors to a slidablecontroller instance:

final slidablecontroller slidablecontroller = new slidablecontroller();
...
new slidable(
      key: new key(item.title),
      controller: slidablecontroller,
      ...
      );

121

download the full project for this post from the following button

this source is fully free for all time

download as zip