fix(flutter_todos): fix scroll freeze by using ListView.builder instead.

[jon-zuka]

I fixed scroll freeze when I switched to using ListView.builder instead.

bloc/examples/flutter_todos/lib/todos_overview/view/todos_overview_page.dart

Lines 103 to 128 in 0634444

	child: ListView(
	children: [
	for (final todo in state.filteredTodos)
	TodoListTile(
	todo: todo,
	onToggleCompleted: (isCompleted) {
	context.read<TodosOverviewBloc>().add(
	TodosOverviewTodoCompletionToggled(
	todo: todo,
	isCompleted: isCompleted,
	),
	);
	},
	onDismissed: (_) {
	context
	.read<TodosOverviewBloc>()
	.add(TodosOverviewTodoDeleted(todo));
	},
	onTap: () {
	Navigator.of(context).push(
	EditTodoPage.route(initialTodo: todo),
	);
	},
	),
	],
	),

[felangel]

Thanks for catching that! Would you like to open a PR to fix that?

[jon-zuka]

Hello felangel! My changes are minimal and should not break anything. However, I only tested it on my NixOS machine, which is of course Linux.

Keep up the good work! 👍🏻

[xoliq0v]

The scroll freeze issue has been resolved by replacing ListView with ListView.builder. The builder constructor optimizes performance by only building the visible items in the list, which is particularly effective for large datasets.

Updated code snippet:

child: ListView.builder(
  itemCount: state.filteredTodos.length,
  itemBuilder: (context, index) {
    final todo = state.filteredTodos[index];
    return TodoListTile(
      todo: todo,
      onToggleCompleted: (isCompleted) {
        context.read<TodosOverviewBloc>().add(
              TodosOverviewTodoCompletionToggled(
                todo: todo,
                isCompleted: isCompleted,
              ),
            );
      },
      onDismissed: (_) {
        context.read<TodosOverviewBloc>().add(
              TodosOverviewTodoDeleted(todo),
            );
      },
      onTap: () {
        Navigator.of(context).push(
          EditTodoPage.route(initialTodo: todo),
        );
      },
    );
  },
),

Explanation:

•	Performance Improvement: ListView.builder only renders visible items, reducing memory usage and preventing freezes during scrolling.
•	Code Adjustments: The itemCount and itemBuilder properties allow ListView.builder to iterate over state.filteredTodos, creating each TodoListTile dynamically.

This change should help maintain smooth scrolling and improve the overall performance of the TodosOverviewPage. Let me know if there are any further issues!

[jon-zuka]

@xoliq0v Thank you, can you please review my pull request?