flutter_slidable1
▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲
▼▲▼▲▼▲▼
tags : #flutter #coding
references : UI and Animation Packages
▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲
▼▲▼▲▼▲▼
flutter_slidable is a powerful Flutter package that allows you to add sliding
(swipeable) actions to list items (like delete, archive, etc.) – similar to Gmail or Apple Mail
apps.
📦 Installation
Add to your pubspec.yaml :](<Here’s a complete Flutter Slidable template with everything
you need: explanation, code, and common use cases. I’ll break it into sections so you can
easily understand, modify, and master it.
🔧 What is flutter_slidable ?
flutter_slidable is a powerful Flutter package that allows you to add sliding
(swipeable) actions to list items (like delete, archive, etc.) – similar to Gmail or Apple Mail
apps.
📦 Installation
Add to your pubspec.yaml :
dependencies:
flutter_slidable: ^3.0.0
Then run:
flutter pub get
✅ Basic Usage Template
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
void main() =%3E runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: const SlidableExample(),
debugShowCheckedModeBanner: false,
);
}
}
class SlidableExample extends StatelessWidget {
const SlidableExample({super.key});
@override
Widget build(BuildContext context) {
final items = List.generate(10, (index) => 'Item $index');
return Scaffold(
appBar: AppBar(title: const Text('Slidable Example')),
body: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return Slidable(
key: ValueKey(items[index]),
// You can slide in from start or end
startActionPane: ActionPane(
motion: const DrawerMotion(),
children: [
SlidableAction(
onPressed: (_) => print('Archive ${items[index]}'),
backgroundColor: Colors.blue,
icon: Icons.archive,
label: 'Archive',
),
SlidableAction(
onPressed: (_) => print('Share ${items[index]}'),
backgroundColor: Colors.green,
icon: Icons.share,
label: 'Share',
),
],
),
endActionPane: ActionPane(
motion: const ScrollMotion(),
children: [
SlidableAction(
onPressed: (_) => print('Edit ${items[index]}'),
backgroundColor: Colors.orange,
icon: Icons.edit,
label: 'Edit',
),
SlidableAction(
onPressed: (_) => print('Delete ${items[index]}'),
backgroundColor: Colors.red,
icon: Icons.delete,
label: 'Delete',
),
],
),
child: ListTile(
title: Text(items[index]),
subtitle: const Text('Swipe to see actions'),
tileColor: Colors.grey.shade100,
),
);
},
),
);
}
}
💡 Key Concepts
Feature Description
Slidable The main widget wrapping each item
startActionPane Actions when swiped from left to right
endActionPane Actions when swiped from right to left
ActionPane Defines the animation and direction
SlidableAction Each individual action (button)
🔥 Motion Types
DrawerMotion() – Side drawer animation
ScrollMotion() – Parallax scroll style
BehindMotion() – Simple reveal behind
StretchMotion() – Elastic stretch effect
Example:
ActionPane(
motion: const StretchMotion(),
...
)
🧠 Advanced Tips
1. Dismiss the Slidable programmatically:
final controller = SlidableController();
controller.close(); // or open()
2. Custom Action Buttons:
SlidableAction(
flex: 2, // makes button wider
autoClose: true,
foregroundColor: Colors.white,
icon: Icons.archive,
label: 'Archive',
)
3. With BLoC / Cubit / Provider:
You can call a method from your state management logic inside onPressed .
🧪 Use Cases
To-do lists (Complete/Delete)
Mail inbox (Archive/Reply)
Shopping apps (Add to cart/Delete)
Notes (Pin/Archive/Delete)
🧼 Clean Code Tip
You can extract the slidable tile into a separate widget:
Widget buildSlidableItem(String title) {
return Slidable(
...
child: ListTile(title: Text(title)),
);
}
⚠️Common Mistakes
Mistake Fix
Not giving a key to Slidable Always assign ValueKey for
performance
Using inside ReorderableListView without handling Use ValueKey and test reordering
keys properly manually
Overflow error in small screens Limit the number of actions or
wrap content
