• Stars
    star
    2,695
  • Rank 16,938 (Top 0.4 %)
  • Language
    Dart
  • License
    MIT License
  • Created over 6 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

Pub BuyMeACoffee

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:

Behind Motion

Drawer Motion

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

Drawer Motion

Scroll Motion

The actions follow the Slidable while it's moving:

Scroll Motion

Stretch Motion

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

Stretch Motion

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.

More Repositories

1

flutter_staggered_grid_view

A Flutter staggered grid view
Dart
3,043
star
2

flutter_sticky_header

Flutter implementation of sticky headers for sliver
Dart
880
star
3

flutter_sidekick

Widgets for creating Hero-like animations between two widgets within the same screen.
Dart
294
star
4

local_hero

A widget which implicitly launches a hero animation when its position changed within the same route.
Dart
204
star
5

gap

Flutter widgets for easily adding gaps inside Flex widgets such as Columns and Rows or scrolling views
Dart
193
star
6

binder

A lightweight, yet powerful way to bind your application state with your business logic.
Dart
177
star
7

flutter_counter_challenge_2020

A set of counter apps made for #FlutterCounterChallenge2020
Dart
174
star
8

overflow_view

A widget displaying children in a line until there is not enough space and showing a the number of children not rendered.
Dart
170
star
9

nil

A simple Flutter widget to add in the widget tree when you want to show nothing, with minimal impact on performance.
Dart
152
star
10

RestLess

The automatic type-safe-reflectionless REST API client library for .Net Standard
C#
110
star
11

flutter_parallax

A Flutter widget that moves according to a scroll controller.
Dart
100
star
12

flutter_scatter

A widget that displays a collection of dispersed and non-overlapping children
Dart
91
star
13

visual_effect

VisualEffect API for Flutter
Dart
70
star
14

polygon

A simple way to draw polygon shapes and to clip them
Dart
62
star
15

maestro

A way to compose your app's state and to expose your data across your entire Flutter application.
Dart
47
star
16

atomized_image

A widget which paints and animates images with particles to achieve an atomized effect
Dart
40
star
17

hashwag

Flutter app that showcases some hashtags
Dart
25
star
18

value_layout_builder

A LayoutBuilder with an extra value
Dart
17
star
19

state_watcher

A simple, yet powerful reactive state management solution for Flutter applications
Dart
15
star
20

DoLess.UriTemplates

.Net Standard implementation of the URI Template Spec https://tools.ietf.org/html/rfc6570
C#
14
star
21

flutter-binder-snippets

Quick and easy Binder snippets
13
star
22

flutter_puzzle_hack

Dart
10
star
23

dash_punk

Dart
6
star
24

letsar

My profile
5
star
25

DoLess.Commands

Commands for Mvvm
C#
4
star
26

DoLess.Bindings

C#
3
star
27

DoLess.Localization

A simple way to share localization files (resx) from cross-platform lib to iOS and Android libs
C#
3
star
28

letsar.github.io

JavaScript
2
star
29

RestLess.JsonNet

Json formatters for RestLess using Json.Net
C#
1
star
30

adventofcode_2021

Dart
1
star