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.0Now, click on the pub get button in android studio or visual studio code or run the below command in terminal.
flutter pub getStep 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:
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:
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:
- Delete tile
- Share tile
- For the right to left slide:
- Archive tile
- Save tile
To achieve above functionality follow below code:
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):
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]} ')),
);
},
),
);
}
}
Output: