▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼
▲▼▲▼▲▼
tags : #coding #flutter #package
references : UI and Animation Packages
▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼
▲▼▲▼▲▼
The flutter_slidable package is a powerful library in Flutter that allows you to create
interactive widgets with sliding functionalities. These are especially useful for creating list items
with swipe actions, such as delete, edit, archive, or any custom action.
Here's a comprehensive overview:
Key Features
1. Swipe Actions:
Add actions to either side (left or right) of a widget.
Trigger these actions with swipe gestures.
2. Customizable UI:
Fully control the appearance of the slideable actions.
Add icons, text, colors, and animations.
3. Multiple Action Panels:
Support for left and right action panels.
Each panel can contain multiple actions.
4. Dismissible Functionality:
Integrate Slidable with Flutter's Dismissible widget to allow items to be dismissed
completely.
Installation
Add the package to your pubspec.yaml :
dependencies:
flutter_slidable: ^v0.x.x
Run:
flutter pub get
Usage
Here’s how you can use the Slidable widget:
Basic Example
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
class SlidableExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: [
Slidable(
// Specify the Slidable action panes
startActionPane: ActionPane(
motion: ScrollMotion(),
children: [
SlidableAction(
onPressed: (context) {
// Action callback
print("Left Action Clicked!");
},
backgroundColor: Colors.blue,
foregroundColor: Colors.white,
icon: Icons.edit,
label: 'Edit',
),
],
),
endActionPane: ActionPane(
motion: DrawerMotion(),
children: [
SlidableAction(
onPressed: (context) {
print("Delete Action Clicked!");
},
backgroundColor: Colors.red,
foregroundColor: Colors.white,
icon: Icons.delete,
label: 'Delete',
),
],
),
child: ListTile(
title: Text('Swipe Me!'),
),
),
],
);
}
}
Key Components
1. Slidable:
The parent widget that wraps around a child widget (e.g., ListTile ).
Manages sliding gestures and actions.
2. ActionPane:
Specifies the panel where actions appear.
Types of motion available:
ScrollMotion()
DrawerMotion()
BehindMotion()
StretchMotion()
3. SlidableAction:
Represents each action within an ActionPane .
Customizable with properties like onPressed , icon , label , backgroundColor , and
foregroundColor .
4. Dismissible Pane:
Adds dismiss functionality, where swiping an item far enough triggers a dismiss action.
DismissiblePane(
onDismissed: () {
print("Item dismissed");
},
)
Advanced Features
1. Dynamic Actions:
Actions can be dynamically generated based on the item’s state or data.
ActionPane(
motion: ScrollMotion(),
children: List.generate(actions.length, (index) {
return SlidableAction(
onPressed: actions[index].onTap,
backgroundColor: actions[index].color,
icon: actions[index].icon,
label: actions[index].label,
);
}),
)
2. Slide Direction Control:
Choose which sides ( startActionPane , endActionPane ) have sliding actions.
Add a SlidableDirection to control if it slides horizontally or vertically.
3. Dismissable With Actions:
Slidable(
key: const ValueKey(0),
endActionPane: ActionPane(
motion: DrawerMotion(),
dismissible: DismissiblePane(onDismissed: () {
print("Item dismissed.");
}),
children: [
SlidableAction(
onPressed: (_) {},
backgroundColor: Colors.green,
icon: Icons.save,
label: 'Save',
),
SlidableAction(
onPressed: (_) {},
backgroundColor: Colors.red,
icon: Icons.delete,
label: 'Delete',
),
],
),
child: ListTile(title: Text('Swipe to dismiss')),
);
4. Animation and Motion Customization:
Custom motion animations for sliding behavior.
Practical Use Cases
1. Email or Messaging Apps:
Swipe to archive, delete, or mark as read.
2. Task Management Apps:
Swipe left to edit or complete tasks.
Swipe right to delete or postpone tasks.
3. E-commerce:
Swipe to add items to a wishlist or cart.
4. Social Media:
Swipe to like, share, or delete a post.
Best Practices
Avoid overloading with too many actions to keep the UI intuitive.
Ensure action labels are clear and concise.
Use colors strategically to convey meaning (e.g., red for delete, green for accept).
