Tutorial and code of slidable in flutter. Copy and paste the below code as per your requirements.
flutter_slidable:
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Center(child: Text('Slidable'),) ,
backgroundColor: Colors.indigo,
),
body: ListView(
children: [
Slidable(
key: const ValueKey(0),
startActionPane: ActionPane(
motion: const ScrollMotion(),
dismissible: DismissiblePane(onDismissed: () {}),
children: const [
SlidableAction(
onPressed: doNothing,
backgroundColor: Colors.red,
foregroundColor: Colors.white,
icon: Icons.delete,
label: 'Delete',
),
SlidableAction(
onPressed: doNothing,
backgroundColor: Colors.teal,
foregroundColor: Colors.white,
icon: Icons.share,
label: 'Share',
),
],
),
endActionPane: const ActionPane(
motion: ScrollMotion(),
children: [
SlidableAction(
flex: 2,
onPressed: doNothing,
backgroundColor: Colors.amber,
foregroundColor: Colors.white,
icon: Icons.archive,
label: 'Archive',
),
SlidableAction(
onPressed: doNothing,
backgroundColor: Colors.purple,
foregroundColor: Colors.white,
icon: Icons.save,
label: 'Save',
),
],
),
child: const ListTile(title: Text('This is first item of list')),
),
Slidable(
key: const ValueKey(1),
startActionPane: const ActionPane(
motion: ScrollMotion(),
children: [
SlidableAction(
onPressed: doNothing,
backgroundColor: Colors.red,
foregroundColor: Colors.white,
icon: Icons.delete,
label: 'Delete',
),
SlidableAction(
onPressed: doNothing,
backgroundColor: Colors.teal,
foregroundColor: Colors.white,
icon: Icons.share,
label: 'Share',
),
],
),
endActionPane: ActionPane(
motion: const ScrollMotion(),
dismissible: DismissiblePane(onDismissed: () {}),
children: const [
SlidableAction(
flex: 2,
onPressed: doNothing,
backgroundColor: Colors.amber,
foregroundColor: Colors.white,
icon: Icons.archive,
label: 'Archive',
),
SlidableAction(
onPressed: doNothing,
backgroundColor: Colors.purple,
foregroundColor: Colors.white,
icon: Icons.save,
label: 'Save',
),
],
),
child: const ListTile(title: Text('This is second item of list')),
),
],
),
),
);
}
}
void doNothing(BuildContext context) {}