How to Make Slide and Delete Item List in Flutter App

The list is an array in the dart programming language, In terms of UI, the List is the scrollable list of items of same kinds. For example, list of contact, list of cities, etc. In this example, we are going to show you to build slidable list item, and whenever, the user slides list item then show the action buttons. We have shown how to delete items from UI list as well as from array list.

To remove Item from List in Flutter.

List<Person> persons= [];
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"));

persons.removeWhere((element){
      return element.id == "3" || element.phone == "9812122233";
}); //go through the loop and match content to delete from list
//this will remove with id 3, and with phone "9812122233"

To make slide and delete list, first you need to add flutter_slidable flutter package in dependency by adding following line in pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  flutter_slidable: ^0.6.0

To make Slideable List:

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'),
    ),
  ],
);

See the example below, for full details. Read the explanation on comment:

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});
}

In this way, you can make slides and delete list in Flutter App.