useListSignal

Creates a new ListSignal and subscribes to it.

A ListSignal provides a reactive wrapper around a standard Dart List. It tracks mutations (such as .add(), .remove(), or setting an element at an index) and automatically triggers rebuilds of the host HookWidget when they occur.

Since Dart lists are objects, standard signals only track identity changes. [ListSignal](/packages/signals/value/list) tracks in-place mutations as well, making it highly efficient for managing dynamic lists in your UI.

Parameters#

value: The initial list elements.
keys: A list of objects to watch. If any key changes, the list signal is re-created.
debugLabel: An optional debug label.

Example#

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:signals_hooks/signals_hooks.dart';

class TodoListWidget extends HookWidget {
  const TodoListWidget({super.key});

  @override
  Widget build(BuildContext context) {
    // Creates a reactive list managed by this widget
    final todos = useListSignal<String>([]);

    return Column(
      children: [
        ElevatedButton(
          onPressed: () => todos.add('Task ${todos.length + 1}'),
          child: const Text('Add Task'),
        ),
        Expanded(
          child: ListView.builder(
            itemCount: todos.length,
            itemBuilder: (context, idx) => ListTile(
              title: Text(todos[idx]),
              trailing: IconButton(
                icon: const Icon(Icons.delete),
                onPressed: () => todos.removeAt(idx),
              ),
            ),
          ),
        ),
      ],
    );
  }
}