Flutter: I can't update Listview.builder

Question

I want to add an item to my list the easiest way, but it doesn't change somehow. It must be simple, but somehow I cannot update my list. If the whole project is needed to solve this problem, I can share the GitHub link. This project is Angela Yu's flutter course last project on Udemy.

This is my add_task screen:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:todoey/model/task.dart';
import 'package:todoey/model/task_bank.dart';

class AddTaskScreen extends StatefulWidget {
  const AddTaskScreen({Key? key}) : super(key: key);
  static const data = "Add Task";
  static const data2 = "Add";

  @override
  State<AddTaskScreen> createState() => _AddTaskScreenState();
}

class _AddTaskScreenState extends State<AddTaskScreen> {
  TextEditingController textEditingController = TextEditingController();
  TaskBank taskBank = TaskBank();
  String newTaskText = "";
  void addItem() {
    setState(() {
      taskBank.allTasks.add(
        Task(
          text: newTaskText,
          isDone: false,
        ),
      );
      textEditingController.clear();
    });
    Navigator.pop(context);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: const Color(0xFF757575),
      child: Container(
        padding: const EdgeInsets.all(20),
        decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(20), topRight: Radius.circular(20)),
        ),
        child: Column(
          children: [
            const Text(
              AddTaskScreen.data,
              style: TextStyle(
                color: Colors.lightBlueAccent,
                fontSize: 30.0,
              ),
            ),
            TextField(
              controller: textEditingController,
              autofocus: true,
              textAlign: TextAlign.center,
              onChanged: (newText) {
                newTaskText = newText;
              },
            ),
            const SizedBox(height: 10),
            CupertinoButton(
              child: const Text(AddTaskScreen.data2),
              onPressed: () {
                addItem();
              },
              color: Colors.lightBlueAccent,
            )
          ],
        ),
      ),
    );
  }
}

This is listview

import 'package:flutter/material.dart';
import 'package:todoey/model/task_bank.dart';

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

  @override
  State<TasksListView> createState() => _TasksListViewState();
}

class _TasksListViewState extends State<TasksListView> {
  TaskBank taskBank = TaskBank();

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 20.0),
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(20),
          topRight: Radius.circular(20),
        ),
      ),
      child: ListView.builder(
        itemCount: taskBank.allTasks.length,
        itemBuilder: (context, index) {
          bool isChecked = taskBank.allTasks[index].isDone;
          return ListTile(
            title: Text(taskBank.allTasks[index].text),
            trailing: Checkbox(
              checkColor: Colors.lightBlueAccent,
              value: isChecked,
              onChanged: (newVlue) {
                setState(() {
                  isChecked
                      ? isChecked = taskBank.taskDidntDone(index)
                      : isChecked = taskBank.taskDone(index);
                });
                print(taskBank.allTasks.length);
              },
            ),
          );
        },
      ),
    );
  }
}

And these are my models.

 class Task {
  String text;
  bool isDone;
  Task({required this.text, this.isDone = false});
}

    import 'package:todoey/model/task.dart';

class TaskBank {
  List<Task> allTasks = [
    Task(
      text: "Complete to Listview Challange",
      isDone: false,
    ),
    Task(
      text: "Complate to Udemy Course",
      isDone: false,
    ),
  ];

  bool taskDone(int index) {
    return allTasks[index].isDone = true;
  }

  bool taskDidntDone(int index) {
    return allTasks[index].isDone = false;
  }
}

Answer 1

The issue is here TasksListView is on separate context and Ui is not getting updated. A simple solution will be passing TaskBank on TasksListView. I will encourage you to look on state-management.

Run on dartPad

class TasksListView extends StatefulWidget {
  final TaskBank taskBank;
  const TasksListView({
    Key? key,
    required this.taskBank,
  }) : super(key: key);

  @override
  State<TasksListView> createState() => _TasksListViewState();
}

class _TasksListViewState extends State<TasksListView> {
  late TaskBank taskBank;
  @override
  void initState() {
    super.initState();
    taskBank = widget.taskBank;
  }