How to Add (Push) and Remove Item from List Array with Dart in Flutter App

In this example, we are going to show you the easiest way to add (push) and remove (pop) item or element in the list array. You will learn to remove specific string of modal object from list. See the example below:

How to Add (Push) Strings in Array List:

List<String> strings = [];

strings.add("Nepal");
strings.add("India");
strings.add("United State of America");
strings.add("China");
strings.add("Canada");

Remove (pop) Item from Array List:

strings.removeWhere((str){
    return str == "Nepal";
}); //go through the loop and match content to delete from list

You can do similarly for other data type.

Working with Modal Class:

Modal Class:

class Person{ //modal class for Person object
   String id, name, phone, address;
   Person({required this.id, required this.name, required this.phone, required this.address});
}

Add Item in Modal List Array:

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

Delete Item from Modal List:

persons.removeWhere((element){
      return element.id == personone.id;
}); //go through the loop and match content to delete from list

or by matching string:

persons.removeWhere((element){
      return element.name == "hari prasad chaudhary";
}); //go through the loop and match content to delete from list

Full Code Example:

import 'package:flutter/material.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("Add And Delete List"),
              backgroundColor: Colors.redAccent,
          ),
          body: SingleChildScrollView( 
            child: Container( 
              padding: EdgeInsets.all(10),
              child: Column(
                children: persons.map((personone){
                      return Container(
                          child: Card(
                            child:ListTile( 
                              title: Text(personone.name),
                              subtitle: Text(personone.phone + "\n" + personone.address),
                              trailing: 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
                                      });   
                                  },
                                ),
                             ),
                          ),
                          
                      );
                  }).toList(),
                ),
            ),
          ) 
        
      );
  }
}

class Person{ //modal class for Person object
   String id, name, phone, address;
   Person({required this.id, required this.name, required this.phone, required this.address});
}

Output Screenshot:

In this way, you can add or remove item from Modal list array using Dart in Flutter App.