dependencies:

flutter:

sdk: flutter

flutter_slidable: ^0.6.0

Slidable(

actionPane: SlidableDrawerActionPane(),

actionExtentRatio: 0.25,

child: Container(

color: Colors.white,

child: ListTile(

leading: CircleAvatar(

backgroundColor: Colors.indigoAccent,

child: Text('$3'),

foregroundColor: Colors.white,

),

title: Text('Tile n°$3'),

subtitle: Text('SlidableDrawerDelegate'),

),

),

actions: <Widget>[

IconSlideAction(

caption: 'Archive',

color: Colors.blue,

icon: Icons.archive,

onTap: () => _showSnackBar('Archive'),

 ),

IconSlideAction(

caption: 'Share',

color: Colors.indigo,

icon: Icons.share,

onTap: () => _showSnackBar('Share'),

),

],

secondaryActions: <Widget>[

IconSlideAction(

caption: 'More',

color: Colors.black45,

icon: Icons.more_horiz,

onTap: () => _showSnackBar('More'),

),

IconSlideAction(

caption: 'Delete',

color: Colors.red,

icon: Icons.delete,

onTap: () => _showSnackBar('Delete'),

),

],

);

import 'package:flutter/material.dart';

import 'package:flutter_slidable/flutter_slidable.dart';
void main() {

runApp(

MaterialApp(

home: MyApp(),

);

class MyApp extends StatefulWidget{

@override

_MyAppState createState() => _MyAppState();

class _MyAppState extends State<MyApp> {

List<Person> persons= [];

@override

void initState() {

//adding item to list, you can add using json from network

persons.add(Person(id:"1", name:"Hari Prasad Chaudhary", phone:"9812122233",

address:"Kathmandu, Nepal"));

persons.add(Person(id:"2", name:"Krishna Karki", phone:"9812122244", address:"Pokhara, Nepal"));

persons.add(Person(id:"3", name:"Ujjwal Joshi", phone:"98121224444", address:"Bangalore, India"));

persons.add(Person(id:"4", name:"Samir Hussain Khan", phone:"9812122255", address:"Karachi,

Pakistan"));
 super.initState();

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title:Text("Slide And Delete List"),

backgroundColor: Colors.redAccent,

),

body: SingleChildScrollView(

child: Container(

padding: EdgeInsets.all(10),

child: Column(

children: persons.map((personone){

return Slidable( //enable slidable in list

key: Key(personone.id), //set key

// you have to set key, other wise, after removing item from list, -

// - slidable will be opened.

actionPane: SlidableDrawerActionPane(),

actionExtentRatio: 0.15,

actions: [ //action button to show in head

ElevatedButton(

child: Icon(Icons.phone),

onPressed: (){
 //action for phone call

},

),

//add more action buttons here

],

child: Card(

child:ListTile(

title: Text(personone.name),

subtitle: Text(personone.phone + "\n" + personone.address),

),

),

secondaryActions: [ //action button to show on tail

ElevatedButton(

style: ElevatedButton.styleFrom(

primary: Colors.redAccent

),

child: Icon(Icons.delete),

onPressed: (){

//delete action for this button

persons.removeWhere((element){

return element.id == personone.id;

}); //go through the loop and match content to delete from list

setState(() {
 //refresh UI after deleting element from list

});

},

),

//add more action buttons here.

],

);

}).toList(),

),

),

);

class Person{ //modal class for Person object

String id, name, phone, address;

Person({this.id, this.name, this.phone, this.address});