A Flutter implementation of slidable list item with directional slide actions.

Overview

flutter_slidable

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

Pub Donate

Flutter Favorite Slidable is now a Flutter Favorite package!

Overview

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

Getting started

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

dependencies:
  ...
  flutter_slidable:

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.

Slidable(
  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>[
    IconSlideAction(
      caption: 'Archive',
      color: Colors.blue,
      icon: Icons.archive,
      onTap: () => _showSnackBar('Archive'),
    ),
    IconSlideAction(
      caption: 'Share',
      color: Colors.indigo,
      icon: Icons.share,
      onTap: () => _showSnackBar('Share'),
    ),
  ],
  secondaryActions: <Widget>[
    IconSlideAction(
      caption: 'More',
      color: Colors.black45,
      icon: Icons.more_horiz,
      onTap: () => _showSnackBar('More'),
    ),
    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 action panes

This package comes with 4 kinds of action panes:

SlidableBehindActionPane

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

Overview

SlidableScrollActionPane

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

Overview

SlidableDrawerActionPane

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

Overview

SlidableStrechActionPane

The slide actions stretch while the item is sliding:

Overview

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

Example:

dismissal: SlidableDismissal(
  child: SlidableDrawerDismissal(),
  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 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.

Example:

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>[
                  FlatButton(
                    child: Text('Cancel'),
                    onPressed: () => Navigator.of(context).pop(false),
                  ),
                  FlatButton(
                    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();
...
Slidable(
      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.

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. By doing so, I will prioritize your issues or your pull-requests before the others.

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.

Issues
  • How to close slider from onWillDismiss?

    How to close slider from onWillDismiss?

    I'm using the onWillDismiss to allow the users some choices and want to close the slider when this event is triggered however nothing seems to work. I've used a controller, tried to get the SlideState using Slidable.of and neither of those options work.

    opened by warriorCoder 24
  • Add a SlidableController

    Add a SlidableController

    A SlidableController could open/close any Slidable. This can be useful if we want to close Slidables while scrolling, or if we want to close all the other Slidables while opening one.

    enhancement 
    opened by letsar 21
  • On tap trigger dismiss animation?

    On tap trigger dismiss animation?

    Great widget library!

    Is it possible to trigger the dismiss animation of the Slidable when a user taps a SlideAction?

    Something like:

                  onTap: () {
                     this.dismiss() // trigger animation of slidable leaving
                  },
    
    opened by abacaj 16
  • Set SlidableController.activeState.open() with onTap

    Set SlidableController.activeState.open() with onTap

    Thank you for an awesome Flutter implementation! Is it possible to open the drawer and show all the iconslider actions through a onTap event on the Slidable? See the scenario on the two images below: screenshot

    Currently the only example that is given is to close the drawer as seen in Issue 33: https://github.com/letsar/flutter_slidable/issues/33 However, if the Slidable is not in an activestate, the output of: slidableController.activeState is null, and hence I am not able to do: slidableController.activeState.open() because it will simply say: "The method 'open' was called on null"

    See the example code below: codeexample

    enhancement 
    opened by DARdk 14
  • UI error when navigating back

    UI error when navigating back

    When the slidable widget is shown and I press back I see the hidden element during the navigation:

    return ListView.separated(
                  separatorBuilder: (context, index) => Divider(height: 0),
                  itemCount: snapshot.data.docs.length,
                  itemBuilder: (BuildContext context, int index) {
                    final contact = snapshot.data.docs[index].data();
                    contact["documentID"] =
                        snapshot.data.docs[0].data()["documentID"];
                    return _contact(contact);
                  },
                );
    
    Widget _contact(contact) {
        return Slidable(
          actionPane: SlidableDrawerActionPane(),
          actionExtentRatio: 0.25,
          child: Container(
            child: ListTile(
              title: Text(contact["name"]),
              subtitle: contact["info"] != "" ? Text(contact["info"]) : null,
            ),
          ),
          actions: <Widget>[
            IconSlideAction(
              // caption: 'Edit',
              color: Theme.of(context).primaryColor,
              icon: LineIcons.pen,
              onTap: () async => await Navigator.of(context)
                  .pushNamed(
                "/create-contact",
                arguments: CreateContactData(false, contact),
              )
                  .then((val) {
                print(val);
              }),
            ),
          ],
          secondaryActions: <Widget>[
            Visibility(
              child: IconSlideAction(
                // caption: 'Website',
                color: Theme.of(context).primaryColor,
                icon: LineIcons.globe,
                onTap: () => PhoneContact().web(context, contact["web"]),
              ),
              visible: contact["web"].length > 11,
            ),
            IconSlideAction(
              // caption: 'Email',
              color: Theme.of(context).primaryColor,
              icon: LineIcons.envelope,
              onTap: () => PhoneContact().web(context, contact["email"]),
            ),
            IconSlideAction(
              // caption: 'Whatsapp',
              color: Theme.of(context).primaryColor,
              icon: LineIcons.comments,
              onTap: () => PhoneContact().whatsapp(context,
                  contact["phone"]["phoneCode"] + contact["phone"]["phoneNumber"]),
            ),IconSlideAction(
              // caption: 'Whatsapp',
              color: Theme.of(context).primaryColor,
              icon: LineIcons.phone,
              onTap: () => PhoneContact().call(context,contact["phone"]["phoneCode"] +contact["phone"]["phoneNumber"]);
            ),
          ],
        );
    }
    
    opened by erperejildo 12
  • Can't dismiss Slidable on endActionPane (flutter_slidable 1.0.0-dev.2)

    Can't dismiss Slidable on endActionPane (flutter_slidable 1.0.0-dev.2)

    Slidable not animate to full width and not dismiss at endActionPane. On startActionPane same code works properly.

    Slidable(
      child: ListTile(title: Text('Slide me')),
      key: ValueKey(0),
      endActionPane: ActionPane(
        motion: const ScrollMotion(),
        dismissible: DismissiblePane(
          onDismissed: () {},
        ),
        children: [
          SlidableAction(
            onPressed: () {},
            backgroundColor: Color(0xFFFE4A49),
            foregroundColor: Colors.white,
            label: 'Delete',
          ),
        ],
      ),
    ),
    
    

    Flutter 2.2.1 • channel stable • https://github.com/flutter/flutter Framework • revision 02c026b03c (12 days ago) • 2021-05-27 12:24:44 -0700 Engine • revision 0fdb562ac8 Tools • Dart 2.13.1

    opened by vahellame 12
  • Programmatically open slider

    Programmatically open slider

    Would like to present the side buttons to the user for a little while and then close it, all without any touch interactions.

    opened by brotoo25 12
  • Toggle every slidable list items

    Toggle every slidable list items

    Hello,

    I want to toggle every slidable items into SlideActionType.secondary when i'm long pressing one item of my list. How can I do it?

    Thanks.

    waiting for user response 
    opened by Dekhnar 11
  • Slidable child flowing outside of parent container

    Slidable child flowing outside of parent container

    If a Slidable() is wrapped inside a Container() with fixed width, the child of the Slidable() still flows outside of the Container() when swiped to display actions.

    Here is my example:

    Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Colors.grey, // to differentiate background for demo
          body: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    // should create a limited area for Slidable to work in
                    width: 500.0,
                    child: Slidable(
                      actionPane: SlidableStrechActionPane(),
                      actionExtentRatio: 0.25,
                      child: Container(
                        // BUG: child slides out of 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>[
                        IconSlideAction(
                          caption: 'Archive',
                          color: Colors.blue,
                          icon: Icons.archive,
                        ),
                        IconSlideAction(
                          caption: 'Share',
                          color: Colors.indigo,
                          icon: Icons.share,
                        ),
                      ],
                      secondaryActions: <Widget>[
                        IconSlideAction(
                          caption: 'More',
                          color: Colors.black45,
                          icon: Icons.more_horiz,
                        ),
                        IconSlideAction(
                          caption: 'Delete',
                          color: Colors.red,
                          icon: Icons.delete,
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ],
          ),
        );
      }
    

    Screenshot on 2020-10-31 at 11 28 00 AM

    Is this a bug or intended behavior? If so, how can I limit the child to display only in a constrained container? Thanks in advance.

    enhancement 
    opened by urmilshroff 11
  • execute callback when sliding or when finishes to slide

    execute callback when sliding or when finishes to slide

    Hello @letsar

    My flutter app have a list of items (each one is a Slidable Object). I would like to execute a callback event when user start sliding the item.

    My case: when I slide right to left (to show some secondary actions), I would like to hide a button in the screen. When user slide left to right (to hide secondary actions), I would like to show this button again.

    I looked the source code and FAQ and didn't find anything. Am I missing something?

    waiting for user response 
    opened by juliovedovatto 11
  • how to know which one is deleted

    how to know which one is deleted

    null

    opened by osangma 0
  • Is there a way to restore the item after dismiss?

    Is there a way to restore the item after dismiss?

    I'm using slidable for delete items, but if there's an api error, i wan to put the item again in the position

    opened by jordanjanaq 0
  • Can't make corners of the Slidable's child rounded (version 1.2.0)

    Can't make corners of the Slidable's child rounded (version 1.2.0)

    Hello!

    I'm trying to make the corners of the Slidable's child rounded. But all I can do for now is to make rounded corners for the ActionPane or every single action. But the child has angles, when I'm sliding it.

    Here it is:

    7944F08C-B4A8-4D67-8713-0BA57C148791_4_5005_c

    How to avoid this and make corners rounded?

    Here is my code:

    ClipRRect(
            borderRadius: BorderRadius.circular(6.r),
            child: SlidableAutoCloseBehavior(
              child: Slidable(
                key: ValueKey<int>(index),
                enabled: controller.selectedItems.isEmpty,
                groupTag: 0,
                startActionPane: ActionPane(
                  motion: const BehindMotion(),
                  children: <Widget>[
                    CustomSlidableAction(
                      backgroundColor: _theme.colorScheme.secondaryVariant,
                      onPressed: (final BuildContext context) {},
                      child: AppIcons.settingsStarIcon(
                        color: _theme.colorScheme.primary,
                      ),
                    ),
                    CustomSlidableAction(
                      backgroundColor: _theme.colorScheme.secondaryVariant,
                      onPressed: (final BuildContext context) {},
                      child: AppIcons.pin(
                        color: _theme.colorScheme.primary,
                      ),
                    ),
                  ],
                ),
                endActionPane: ActionPane(
                  extentRatio: 0.25,
                  motion: const BehindMotion(),
                  // dismissible: DismissiblePane(
                  //   onDismissed: () {},
                  // ),
                  children: <Widget>[
                    CustomSlidableAction(
                      backgroundColor: _theme.iconTheme.color!,
                      onPressed: (final BuildContext context) {},
                      child: AppIcons.removePhoto(
                        color: _theme.colorScheme.primary,
                      ),
                    ),
                  ],
                ),
                child: Container(width: 347.w,
            height: 77.h,
            padding: EdgeInsets.fromLTRB(13.w, 10.h, 9.w, 10.h),
            decoration: BoxDecoration(
              color: isSelected
                  ? _theme.colorScheme.chatListSelectionColor
                  : _theme.colorScheme.surface,
              borderRadius: BorderRadius.circular(6.r),
            ),
    

    Is there any solution?

    opened by abigotado 0
  • Configure slidables duration and curve

    Configure slidables duration and curve

    Hey @letsar 👋

    Considering you took the route of handling internally different interactions between slidables with the help of SlidableAutoCloseBehavior, how could one configure the duration and curve when opening and closing slidables ?

    I would expect that no matter how the user is interacting with the slidables they should use the same animation curve and duration, even if the logic comes from the use of closeWhenOpened /closeWhenTapped set to true.

    I would expect that both the duration and curve would be configurable. Am I missing something?

    opened by narcodico 0
  • Can't dismiss with action tap

    Can't dismiss with action tap

    I try to dismiss the slidable when i tap in action, but this does not work, this is my code:

    SlidableAction(
        onPressed: (context){
          Slidable.of(context)!.dismiss(
            ResizeRequest(
              const Duration(seconds: 2), 
              () {
                print('Dismiss from Button');
              }
            ),
            duration: const Duration(seconds: 2)
          );
        },
        backgroundColor: Colors.red,
        // foregroundColor: Colors.white,
        icon: Icons.delete,
        label: 'Delete',
      ),
    

    Is this possible ?

    opened by Velkamhell97 2
  • Slidable cannot take Semantics as Action

    Slidable cannot take Semantics as Action

    Semantics are useful for the accessibility functions. When embedding a SlidableAction into a Semantics widget, an exception is raised at runtime because an internal "hasSize " call does not work. Crashes on both iOS and Android.

    Slidable(
    ....
      children:[
          SlidableAction(
          ....
          ),
    ]
    

    versus

    Slidable(
    ....
      children:[
          Semantics(child: SlidableAction(
          ....
          ),),
    ]
    

    Error message: ======== Exception caught by rendering library ==================================== The following assertion was thrown during paint(): RenderBox was not laid out: RenderClipRect#4089d 'package:flutter/src/rendering/box.dart': Failed assertion: line 1927 pos 12: 'hasSize'

    Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause. In either case, please report this assertion by filing a bug on GitHub: https://github.com/flutter/flutter/issues/new?template=2_bug.md

    The relevant error-causing widget was: Slidable-[<'Cortado'>] Slidable:file:///D:/_Projects/Mobile/thecoffeecorner/thecoffeecorner/lib/screens/home/components/page_coffees.dart:49:30 When the exception was thrown, this was the stack: #2 RenderBox.size (package:flutter/src/rendering/box.dart:1927:12) .......................... The following RenderObject was being processed when the exception was fired: RenderClipRect#4089d ... needs compositing ... parentData: top=0.0; right=0.0; bottom=0.0; left=0.0; offset=Offset(0.0, 0.0) (can use size) ... constraints: BoxConstraints(w=360.0, h=56.0) ... size: MISSING RenderObject: RenderClipRect#4089d needs compositing parentData: top=0.0; right=0.0; bottom=0.0; left=0.0; offset=Offset(0.0, 0.0) (can use size) constraints: BoxConstraints(w=360.0, h=56.0)

    size: MISSING ... child: RenderFractionallySizedOverflowBox#4026f NEEDS-PAINT ... needs compositing ... parentData: (can use size) ... constraints: BoxConstraints(w=360.0, h=56.0) ... size: MISSING

    opened by developer01-dufour-one 0
  • Add open & closing callback listener

    Add open & closing callback listener

    Implementation of the feature requested in #273.

    opened by sanjidbillah 0
  • LateInitializationError: Field 'mainAxisPosition' has not been initialized.

    LateInitializationError: Field 'mainAxisPosition' has not been initialized.

    I am using slidable 1.1.0 . I want to use custom ActionPane children like this:

    return Slidable(
            closeOnScroll: false,
            startActionPane: ActionPane(
              motion: DrawerMotion(),
              extentRatio: 0.3,
              children: [
                SlidableAction(
                  onPressed: (_) {},
                  flex: 2,
                  backgroundColor: Color(0xFF0392CF),
                  foregroundColor: Colors.red,
                  icon: Icons.save,
                  label: 'Save',
                  autoClose: true,
                ),
              ],
            ),
            endActionPane: ActionPane(
              motion: DrawerMotion(),
              children: [
                InkWell(
                  onTap: () async {
                  },
                  child: Padding(
                    padding: EdgeInsets.all(8),
                    child: Container(
                      height: 80,
                      width: 80,
                      decoration: BoxDecoration(
                          color: Colors.white,
                          border: Border.all(color: colorGrayCCC, width: 1),
                          borderRadius: radius),
                      child: Padding(
                        padding: EdgeInsets.all(8),
                        child: Padding(
                          padding: const EdgeInsets.all(2.0),
                          child: Center(
                            child: Text(
                              "remove",
                              style: TextStyle(
                                  fontSize: 13,
                                  color: colorRed),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                )
              ],
            ),
            // The child of the Slidable is what the user sees when the
            // component is not dragged.
            child: MyCard(
              title: e.title,
              date: e.date,
              message: e.message,
              imageSVG: e.imageSVG,
              iconBackgroundColor: e.iconBackgroundColor,
            ),
          );
    

    But When I swape my card I got this error:

    ════════ Exception caught by animation library ═════════════════════════════════
    LateInitializationError: Field 'mainAxisPosition' has not been initialized.
    ════════════════════════════════════════════════════════════════════════════════
    
    ════════ Exception caught by rendering library ═════════════════════════════════
    RenderBox was not laid out: RenderClipRect#6def5
    'package:flutter/src/rendering/box.dart':
    package:flutter/…/rendering/box.dart:1
    Failed assertion: line 1929 pos 12: 'hasSize'
    
    The relevant error-causing widget was
    Slidable
    
    waiting for user response 
    opened by tazik561 3
  • Animate the slidable slightly to show the hidden feature

    Animate the slidable slightly to show the hidden feature

    I love Slidable, but swipe buttons are hidden and I'm looking for ways to show the user those buttons in a showcase. I'm using showcaseview to show overlays for important buttons in the app, but in the case of swipe buttons, I can only show an overlay on the first ListTile in a ListView explaining actions that are available behind a swipe right. It would be much more powerful to be able to animate the Slidable to uncover the slidable actions slightly, to show that there is something hidden behind this ListTile. Is it possible to do that, maybe with a SlidableController? If so, could you please document how to do it?

    opened by sarbogast 2
  • how to modify label textsize ?

    how to modify label textsize ?

    null

    opened by SheepYang1993 1
Releases(v1.0.0)
  • v1.0.0(Nov 12, 2021)

  • v0.5.4(Oct 6, 2019)

    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)
    Source code(tar.gz)
    Source code(zip)
  • v0.4.9(Oct 15, 2018)

  • v0.4.8(Oct 9, 2018)

  • v0.4.7(Sep 17, 2018)

  • v0.4.6(Sep 8, 2018)

  • v0.4.5(Sep 5, 2018)

  • v0.4.4(Aug 31, 2018)

  • v0.4.3(Aug 22, 2018)

  • v0.4.2(Aug 22, 2018)

    0.4.2

    Fixed

    • https://github.com/letsar/flutter_slidable/issues/22 and https://github.com/letsar/flutter_slidable/issues/24 (Issue with controller).
    Source code(tar.gz)
    Source code(zip)
  • v0.4.1(Aug 8, 2018)

  • v0.4.0(Aug 2, 2018)

    Dismiss feature

    Added

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

    Modified

    • Added a renderingMode parameter in the SlideActionBuilder signature .
    Source code(tar.gz)
    Source code(zip)
  • v0.3.0(Jul 23, 2018)

    Added

    • The closeOnTap argument on slide actions to close when a action has been tapped.
    • The closeOnScroll argument 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.
    Source code(tar.gz)
    Source code(zip)
  • v0.2.0(Jul 22, 2018)

    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.
    Source code(tar.gz)
    Source code(zip)
Owner
Romain Rastel
Flutter Developer
Romain Rastel
Animated Selection Slide Sezgin BilgetayAnimated Selection Slide An animated selection widget by swiping by Sezgin Bilgetay.

Animated Selection Slide This flutter project allows you to make your choices with animation in inbox. For UI, it's inspired by the great example on d

null 306 Jan 14, 2022
Multi directional infinite list with Sticky headers for Flutter applications

Sticky Infinite List Infinite list with sticky headers. This package was made in order to make possible render infinite list in both directions with s

Denis Beketsky 243 Jan 11, 2022
A Horizontal List view With Lots of modification including a scaled current item.

Pub.dev Scaled List A Horizontal List view With Lots of modification including a scaled current item. Provided with curved custom painting and Dots in

Hosain Mohamed 28 Dec 31, 2021
:bug: Flutter debug helper widget with common and custom actions

Debug Friend Flutter debug helper widget with common and custom actions This helps you reduce the development and testing time of new features Show so

Stanislav Ilin 33 Dec 30, 2021
Let's create a selectable Flutter Navigation Drawer with routing that highlights the current item within the Flutter Sidebar Menu.

Flutter Tutorial - Sidebar Menu & Selectable Navigation Drawer Let's create a selectable Flutter Navigation Drawer with routing that highlights the cu

Johannes Milke 9 Dec 9, 2021
A beautiful and simple bottom navigation bar with smooth animation when switching selected item.

Titled Bottom Navigation Bar A beautiful, clean and simple bottom navigation bar with smooth animation on click. This package is high customizable, re

Pedro Massango 295 Jan 10, 2022
Adopt a friendly pet or item

android_register Registering users on Android Getting Started $ flutter clean $ flutter upgrade $ flutter pub get $ flutter run App on pre registratio

Srinjoy Chakravarty 3 Apr 28, 2021
Flutter implementation of sticky headers for sliver

flutter_sticky_header A Flutter implementation of sticky headers with a sliver as a child. Features Accepts one sliver as content. Header can overlap

Romain Rastel 675 Jan 9, 2022
An elastic material bottom sheet implementation for Flutter.

An elastic material bottom sheet implementation for Flutter. This is still an early preview, some behaviors can change or being removed. Every feedbac

Mattia Crovero 424 Dec 23, 2021
A Flutter app with firebase libraries implementation

FlutFire A Flutter project with implementation of all firebase libraries for Android and iOS both. Show some ❤️ and star the repo to support the proje

Pawan Kumar 612 Jan 9, 2022
An Login Page App in Flutter with MVP and SQFLITE ( SQLITE) Implementation.

Flutter SQFLITE MVP LOGIN APP A Login Page Flutter App with SQFLITE (SQLITE) and MVP implementation. Written in dart using Flutter SDK. Please don't f

Pawan Kumar 161 Nov 7, 2021
A simple flutter app with demo implementation of redux.

Flutter Redux Tutorial Redux Project is just a quick guide for implementation of redux.dart and flutter_redux . Written in dart using Flutter SDK. Ple

Pawan Kumar 45 Sep 29, 2021
Implementation of the Flux framework for Flutter

flutter_flux A Dart app architecture library with uni-directional data flow inspired by RefluxJS and Facebook's Flux. This is an experimental package

Google 368 Nov 30, 2021
Firebase + Flutter sample apps with code snippets, supported by comprehensive articles for each implementation.

FlutterFire Samples This repo is created to contain various sample apps demonstrating the integration of Firebase with Flutter. The final goal is to c

Souvik Biswas 104 Jan 6, 2022
Paper is a implementation of Flx Design System for Flutter

Paper is a implementation of Flx Design System for Flutter. Installing Add a lines like this to your pubspec.yaml. dependencies: paper: git:

Flx Team 3 Nov 21, 2021
DropdownButton, ToggleButton & CheckboxListTile implementation in Flutter as a Mobile App Development exercise.

Sort & Filter UI A new Flutter project. Getting Started This project is a starting point for a Flutter application. ⏮ Preview A few resources to get y

Ehmad Saeed⚡ 8 Sep 29, 2021
Flutter implementation of Figma's corner smoothing.

Figma Squircle Flutter implementation of Figma's corner smoothing. Usage Decoration The SmoothRectangleBorder can be provided to a regular ShapeDecora

Aloïs Deniel 57 Jan 11, 2022
a python-like bytes_io implementation for dart

bytes_io A python-like bytes_io implementation for dart A powerful helper for processing raw binary data Usage A simple usage example: import 'package

Kelly 6 Dec 21, 2021
A Gura parser implementation for Dart

Gura Dart parser This repository contains the implementation of a Gura configuration format parser for Dart, written in pure Dart. (Compliant with spe

Zack Campbell 4 Aug 1, 2021
A bugless implementation of BigDecimal in Dart based on Java's BigDecimal

big_decimal A bugless implementation of BigDecimal in Dart based on Java's BigDecimal Installation Add the following to your pubspec.yaml: dependencie

null 11 Dec 23, 2021
Simple UI design implementation of two pages.

dating_app_clone A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

null 4 Sep 21, 2021
A Flutter package that builds a list view and notifies when the widgets are on screen.

inview_notifier_list A Flutter package that builds a ListView or CustomScrollView and notifies when the widgets are on screen within a provided area.

Vamsi Krishna 402 Jan 17, 2022
A Flutter plugin that allows you to check if an app is installed/enabled, launch an app and get the list of installed apps.

Flutter AppAvailability Plugin A Flutter plugin that allows you to check if an app is installed/enabled, launch an app and get the list of installed a

Lorenzo Pichilli 83 Jan 13, 2022
A quick sample app on how to implement a friend list and a profile page in Flutter.

FlutterMates All code resides in the /lib folder: there's no Android / iOS specific code needed. The article, slides and how this came to be, is here.

Codemate Ltd 485 Jan 10, 2022
Download files from Firebase Storage with Flutter. List all images, videos, or other files from Firebase and download them.

Flutter Tutorial - Download Files From Firebase Storage Download files from Firebase Storage with Flutter. List all images, videos, or other files fro

Johannes Milke 18 Jan 10, 2022
A curated list of awesomeness for Flutter Linux.

Awesome Flutter Linux ?? A curated list of awesomeness for Flutter Linux. Packages Adwaita Icons - Package that contains all icons built for the Adwai

J-P Nurmi 53 Jan 6, 2022
A curated list of awesome things related to Flutter desktop.

awesome-flutter-desktop A curated list of awesome things related to Flutter desktop. Table of Contents awesome-flutter-desktop Packages Open Source Ap

LeanFlutter 579 Jan 17, 2022
Inner Drawer is an easy way to create an internal side section (left/right) where you can insert a list-menu or other.

flutter_inner_drawer Inner Drawer is an easy way to create an internal side section (left/right) where you can insert a list menu or other. Installing

Antonino Di Natale 393 Jan 17, 2022
Reorderable table, row, column, wrap, and sliver list that allow drag and drop of the children. https://pub.dartlang.org/packages/reorderables

** Kindly submit PR if you encounter issues and please make sure you're using stable channel releases. ** Maintaining open source software ain't easy.

Hansheng 455 Jan 15, 2022