Flutter - Slidable

Last Updated : 23 Jul, 2025

Slidable in an application can be used to perform a wide range of tasks with just a simple swipe to either right or left on the tile. It not only makes the UI very user-friendly but also saves a lot of time in doing trivial tasks which if done in other ways can be hectic and redundant to design. In this article, we will look into the process of designing a slidable for your application.

Steps to implement Slidable in Flutter Application

Step 1 : Adding Dependency

You can import the flutter_slidable dependency in the pubspec.yaml file as shown below:

flutter_slidable: ^4.0.0

Now, click on the pub get button in android studio or visual studio code or run the below command in terminal.

flutter pub get

Step 2 : Importing Dependency

To import the dependency in the main.dart file use the following:

import 'package:flutter_slidable/flutter_slidable.dart';

Step 3 : Creating App Structure

Use a StatelessWidget to give the application a simple structure as shown below:

Dart

class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {  return MaterialApp(  title: 'Flutter Slidable ',  theme: ThemeData(  primarySwatch: Colors.blue,  ),  home: MyHomePage(title: 'GeeksForGeeks'),  );  } }

Step 4 : Creating Homepage

Use a StatefulWidget to set up the homepage for the application that would in the future hold the tiles that can be swiped in either direction to perform tasks assigned to them as shown below:

Dart

class MyHomePage extends StatefulWidget {  MyHomePage({Key key, this.title}) : super(key: key);  final String title;  @override  _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> {  var items = List<int>.generate(20, (index) => index + 1);  ...

Step 5 : Assigning Actions

As the slides are swiped actions will appear depending upon the direction of the slide. In both the case two actions will be assigned to each swipe as following:

For left to right slide:
1. Delete tile
2. Share tile

For the right to left slide:
1. Archive tile
2. Save tile

To achieve above functionality follow below code:

Dart

Slidable(  key: const ValueKey(0),    // Define actions for the left side of the list item  startActionPane: ActionPane(  motion: const ScrollMotion(),  children: [  // Define a delete action  SlidableAction(  onPressed: (BuildContext context) {  setState(() {  items.removeAt(index);  });  ScaffoldMessenger.of(context).showSnackBar(  SnackBar(  content: Text('Item deleted'),  duration: Duration(seconds: 2),  ),  );  },  backgroundColor: const Color(0xFFFE4A49),  foregroundColor: Colors.white,  icon: Icons.delete,  label: 'Delete',  ),  // Define a share action  SlidableAction(  onPressed: (BuildContext context) {  ScaffoldMessenger.of(context).showSnackBar(  SnackBar(  content: Text('Item shared'),  duration: Duration(seconds: 2),  ),  );  },  backgroundColor: Color(0xFF21B7CA),  foregroundColor: Colors.white,  icon: Icons.share,  label: 'Share',  ),  ],  ),  // Define actions for the right side of the list item  endActionPane: ActionPane(  motion: ScrollMotion(),  children: [  // Define an archive action  SlidableAction(  flex: 2,  onPressed: (BuildContext context) {  setState(() {  items.removeAt(index);  });  ScaffoldMessenger.of(context).showSnackBar(  SnackBar(  content: Text('Item archived'),  duration: Duration(seconds: 2),  ),  );  },  backgroundColor: Color(0xFF7BC043),  foregroundColor: Colors.white,  icon: Icons.archive,  label: 'Archive',  ),  // Define a save action  SlidableAction(  onPressed: (BuildContext context) {  ScaffoldMessenger.of(context).showSnackBar(  SnackBar(  content: Text('Item Saved'),  duration: Duration(seconds: 2),  ),  );  },  backgroundColor: Color(0xFF0392CF),  foregroundColor: Colors.white,  icon: Icons.save,  label: 'Save',  ),  ],  ),  // Define the main content of the list item  child: ListTile(title: Text('Item ${items[index]} ')),  );

To know more about snackbar in flutter refer this article: Flutter – Snackbar

Complete Source Code (main.dart):

Dart

import 'package:flutter/material.dart'; import 'package:flutter_slidable/flutter_slidable.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {  return MaterialApp(  title: 'Flutter Slidable',  debugShowCheckedModeBanner: false,  home: MyHomePage(title: 'GeeksForGeeks'),  );  } } class MyHomePage extends StatefulWidget {  MyHomePage({super.key, required this.title});  final String title;  @override  _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> {  var items = List<int>.generate(20, (index) => index + 1);  @override  Widget build(BuildContext context) {  return Scaffold(  appBar: AppBar(  title: Text(widget.title),  backgroundColor: Colors.green,  foregroundColor: Colors.white,  ),  body: ListView.builder(  itemCount: items.length,  itemBuilder: (context, index) {  // Return a Slidable widget for each list item  return Slidable(  key: const ValueKey(0),  // Define actions for the left side of the list item  startActionPane: ActionPane(  motion: const ScrollMotion(),  children: [  // Define a delete action  SlidableAction(  onPressed: (BuildContext context) {  setState(() {  items.removeAt(index);  });  ScaffoldMessenger.of(context).showSnackBar(  SnackBar(  content: Text('Item deleted'),  duration: Duration(seconds: 2),  ),  );  },  backgroundColor: const Color(0xFFFE4A49),  foregroundColor: Colors.white,  icon: Icons.delete,  label: 'Delete',  ),  // Define a share action  SlidableAction(  onPressed: (BuildContext context) {  ScaffoldMessenger.of(context).showSnackBar(  SnackBar(  content: Text('Item shared'),  duration: Duration(seconds: 2),  ),  );  },  backgroundColor: Color(0xFF21B7CA),  foregroundColor: Colors.white,  icon: Icons.share,  label: 'Share',  ),  ],  ),  // Define actions for the right side of the list item  endActionPane: ActionPane(  motion: ScrollMotion(),  children: [  // Define an archive action  SlidableAction(  flex: 2,  onPressed: (BuildContext context) {  setState(() {  items.removeAt(index);  });  ScaffoldMessenger.of(context).showSnackBar(  SnackBar(  content: Text('Item archived'),  duration: Duration(seconds: 2),  ),  );  },  backgroundColor: Color(0xFF7BC043),  foregroundColor: Colors.white,  icon: Icons.archive,  label: 'Archive',  ),  // Define a save action  SlidableAction(  onPressed: (BuildContext context) {  ScaffoldMessenger.of(context).showSnackBar(  SnackBar(  content: Text('Item Saved'),  duration: Duration(seconds: 2),  ),  );  },  backgroundColor: Color(0xFF0392CF),  foregroundColor: Colors.white,  icon: Icons.save,  label: 'Save',  ),  ],  ),  // Define the main content of the list item  child: ListTile(title: Text('Item ${items[index]} ')),  );  },  ),  );  } }