ListView dosen't render widget when using riverpod provider

Question

I writing an app using flutter that add item to list (using simpleDialog) and show thus items in ListView when you add on. The problem is that the list only update when I move to another page and them get to the list page, so the data is there. I just don't understand how to make the list to re-render...

This is the provider I declare

@riverpod
List<Task> tasks(TasksRef ref) => [];

This is my widget how preset the list (tasks)

class TasksScreen extends StatefulHookConsumerWidget {
  const TasksScreen({super.key});

  @override
  ConsumerState<TasksScreen> createState() => _TasksScreenState();
}

class _TasksScreenState extends ConsumerState<TasksScreen> {
  @override
  Widget build(BuildContext context) {
    List<model.Task> tasks = ref.read(tasksProvider);
    List<Task> list = [];
    list = [...test(tasks)];

    return ProviderScope(
        child: Scaffold(
      body: ListView.builder(
        itemBuilder: (context, index) {
          return Task(task: ref.read(tasksProvider)[index]);
        },
        itemCount: ref.read(tasksProvider).length,
      ),
    ));
  }

  List<Task> test(List<model.Task> list) {
    List<Task> tasks = [];

    for (var i = 0; i < list.length; i++) {
      tasks.add(Task(task: list[i]));
    }

    return tasks;
  }
}

Thanks a lot for helpers !

I expecting that the changing of the provider lead to the list that render the page and show the list

Answer 1

You should use watch instead of read since read does not rebuild the widget when the state change as describe in the document

class TaskListNotifier extends StateNotifier<List<model.Task>> {
    TaskListNotifier() : super([]); // initial state
    void add(model.Task) {
        state.add(model.Task);
        state = [...state]; // this will notify and rebuild the UI
    }
}

final tasksProvider = StateNotifierProvider<TaskListNotifier, List<model.Task>>((ref) {
  return TaskListNotifier();
});

class TasksScreen extends StatefulHookConsumerWidget {
  const TasksScreen({super.key});

  @override
  ConsumerState<TasksScreen> createState() => _TasksScreenState();
}

class _TasksScreenState extends ConsumerState<TasksScreen> {
  @override
  Widget build(BuildContext context) {
    List<model.Task> tasks = ref.watch(tasksProvider);

    return ProviderScope(
        child: Scaffold(
      body: ListView.builder(
        itemBuilder: (context, index) {
          return GestureDetector(
          onTap: () {
            ref.read(tasksProvider.notifier).add(tasks[index]);
          },
          child: Task(task: tasks[index]),
          );
        },
        itemCount: tasks.length,
      ),
    ));
  }
}