How to Add and Remove Item from List Array in Flutter 

In this article, we will discuss how to add and remove the item from the list array in Flutter. What shall we do today is to add one object model class name as a Student. The object model class includes the name of the student roll number as well as the address.

Related article: How To Use Spread Operator(…) In Flutter

Here we will use the concept of removeWhere() in dart. The remove where removes every element in the list that satisfies the test, which is passed in as a callback.

How to add the item in the array list

List<String> strings = [];

strings.add("Sagar");
strings.add("Ram Shrestha");
strings.add("Shyam Kc");
strings.add("Hari karki");

It will add the item to the list of Strings

Remove the item from the array list

strings.removeWhere((str){
    return str == "Sagar";
}); 

It will remove the item name (Sagar) from the given list of Strings. Now we will create an Object model class name as Students.

Also read: How To Remove Duplicates From List Of Objects

Object Model Class

class Students {
  String name, address;
  int rollno, id;

  Students({
    required this.name,
    required this.rollno,
    required this.address,
    required this.id,
  });
}

Now we add an item in the model class

List<Students> students= [];

  students.add(
      Students(
          id: 0, name: 'Sagar Koju', rollno: 730333, address: 'Kamalbinyak-10'),
    );
    students.add(
      Students(
          id: 1,
          name: 'Ram Shrestha',
          rollno: 730334,
          address: 'Bhaktapur-Sallaghari'),
    );
    students.add(
      Students(id: 2, name: 'Shyam Kc', rollno: 730322, address: 'Kathmandu'),
    );
    students.add(
      Students(
          id: 3, name: 'Hari karki', rollno: 730325, address: 'Laltipur-10'),
    );

We can delete the item from the model list by

 students.removeWhere((element) => element.id == students.id);

Now let’s take another example of how we can implement with the help of flutter:

import 'package:flutter/material.dart';
import 'package:vlogpost/model/student.dart';

class RemoveWhereScreem extends StatefulWidget {
  const RemoveWhereScreem({Key? key}) : super(key: key);

  @override
  State<RemoveWhereScreem> createState() => _RemoveWhereScreemState();
}

class _RemoveWhereScreemState extends State<RemoveWhereScreem> {
  List<Students> students = [];
  @override
  void initState() {
    students.add(
      Students(
          id: 0, name: 'Sagar Koju', rollno: 730333, address: 'Kamalbinyak-10'),
    );
    students.add(
      Students(
          id: 1,
          name: 'Ram Shrestha',
          rollno: 730334,
          address: 'Bhaktapur-Sallaghari'),
    );
    students.add(
      Students(id: 2, name: 'Shyam Kc', rollno: 730322, address: 'Kathmandu'),
    );
    students.add(
      Students(
          id: 3, name: 'Hari karki', rollno: 730325, address: 'Laltipur-10'),
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Add and Remove Item from List Array'),
      ),
      body: students.isNotEmpty
          ? Center(
              child: Column(
                children: students.map((e) {
                  return Container(
                    margin: const EdgeInsets.symmetric(
                        horizontal: 20, vertical: 10),
                    child: Card(
                      color: Colors.amberAccent,
                      child: ListTile(
                        title: Text(e.name),
                        subtitle: Text(e.address),
                        trailing: InkWell(
                          onTap: () {
                            students
                                .removeWhere((element) => element.id == e.id);
                            setState(() {});
                          },
                          child: const Icon(Icons.delete),
                        ),
                      ),
                    ),
                  );
                }).toList(),
              ),
            )
          : const Center(
              child: Text('Please add text'),
            ),
    );
  }
}

Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below:

Thank you for reading the guide on how to Add and Remove Items from List Array.

Also Read: Slivers And CustomScrollView In Flutter