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:

List<String> strings = [];

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

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.

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

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.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

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

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

No any Comments on this Article


Please Wait...