How to Remove Elements from ListView.builder and Refresh the List in Flutter

Question

I’m working on a Flutter project where I need to remove elements from a ListView.builder and refresh the list to reflect these changes. However, I’m encountering issues where the list does not update correctly after removing an item. Here is a simplified version of my code:

class List extends StatefulWidget {
  @override
  _ListState createState() => _ListState();
}

class _ListState extends State<List> {
  List<Map<String, dynamic>> taskData = [
    {'id': 1, 'name': 'List 1', 'status': 'Pending'},
    {'id': 2, 'name': 'List 2', 'status': 'Completed'},
    // More tasks...
  ];

  void removeList(int taskId) {
    setState(() {
      taskData.removeWhere((element) => element['id'] == taskId);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Task List')),
      body: ListView.builder(
        itemCount: taskData.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(taskData[index]['name']),
            trailing: IconButton(
              icon: Icon(Icons.delete),
              onPressed: () => removeList(taskData[index]['id']),
            ),
          );
        },
      ),
    );
  }
}

When I remove a task using the delete button, the ListView.builder does not refresh automatically to reflect the changes. I have to navigate away from the screen and come back to see the updated list.

Using setState to update the list. Ensuring the list is updated correctly within the setState method. Using unique keys for list items.

How can I ensure that the ListView.builder refreshes automatically when an item is removed? Are there any best practices or alternative approaches to achieve this in Flutter?

Answer 1

class List extends StatefulWidget {
  @override
  _ListState createState() => _ListState();
}

class _ListState extends State<List> {
  List<Map<String, dynamic>> taskData = [
    {'id': 1, 'name': 'List 1', 'status': 'Pending'},
    {'id': 2, 'name': 'List 2', 'status': 'Completed'},
    // More tasks...
  ];

  void removeTask(int taskId) {
    setState(() {
      taskData.removeWhere((element) => element['id'] == taskId);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Task List')),
      body: ListView.builder(
        itemCount: taskData.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(taskData[index]['name']),
            trailing: IconButton(
              icon: Icon(Icons.delete),
              onPressed: () => removeTask(taskData[index]['id']),
            ),
          );
        },
      ),
    );
  }
}