useListSignal<T> function

ListSignal<T> useListSignal<T>(List<T> value, { List<Object?> keys = const <Object>[], ListSignalOptions<T>? options, })

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.

:::tip Since Dart lists are objects, standard signals only track identity changes. ListSignal 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),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

Implementation

ListSignal<T> useListSignal<T>(
  List<T> value, {
  List<Object?> keys = const <Object>[],
  ListSignalOptions<T>? options,
}) {
  final s = useMemoized(() => listSignal(value, options: options), keys);
  return useExistingSignal(s, keys: keys);
}