BuildContext.watchId

BuildContext.watchId is a method similar to BuildContext.watch , but use id as first argument to locate the dependency.

Tip

This approach is useful when you have multiple dependencies of the same type and you want to access a specific one.

While you can use BuildContext.watch with id, BuildContext.watchId is more readable and clear when an id is required.

context.watch<MyDependency>(null, 'myId');
// is equivalent to
context.watchId<MyDependency>('myId');

Syntax & description

T context.watchId<T>(
  String id,
  [List<RtState> listenStates?(T instance)],
);

• context: The BuildContext object, which provides information about the current widget in the tree.
• T : The type of the dependency you want to access. These are some points to consider:
  • If the type is nullable, the method will return null if the dependency is not found.
  • If the type is not nullable, the method will throw an exception if the dependency is not found.
• id: An identifier for the T dependency. The dependency will be located by its type( T ) and the id.
• listenStates : An optional function that returns a list of state( RtState ) to listen for changes. If omitted, the method will listen for any changes in the T dependency.

Usage

This following example demonstrates how to use BuildContext.watchId :

• counter.dart
• counter_view.dart
• counter_controller.dart
• main.dart

import 'package:flutter/material.dart';
import 'package:flutter_reactter/flutter_reactter.dart';
import 'counter_controller.dart';

class Counter extends StatelessWidget {
  const Counter({Key? key, this.id}) : super(key: key);

  final String? id;

  @override
  Widget build(BuildContext context) {
    // Locale the `CounterController` dependency
    final counterController = context.use<CounterController>(id);

    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        ElevatedButton(
          onPressed: counterController.decrement,
          child: const Icon(Icons.remove),
        ),
        const SizedBox(width: 8),
        // Observe the `count` property of the `counterController`
        // and rebuild the widget tree when the `count` value changes
        Builder(
          builder: (context) {
            if (id != null) {
              context.watchId<CounterController>(id!, (inst) => [inst.count]);
            } else {
              context.watch<CounterController>((inst) => [inst.count]);
            }

            return Text("${counterController.count}");
          },
        ),
        const SizedBox(width: 8),
        ElevatedButton(
          onPressed: counterController.increment,
          child: const Icon(Icons.add),
        ),
      ],
    );
  }
}

import 'package:flutter/material.dart';
import 'counter.dart';

class CounterView extends StatelessWidget {
  const CounterView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Counter"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Counter(),
            const SizedBox(height: 8),
            FutureBuilder(
              future: Future.delayed(Duration(seconds: 1)),
              builder: (context, snapshot) {
                if (snapshot.connectionState != ConnectionState.done) {
                  return const CircularProgressIndicator();
                }

                return const Counter(id: "counterLazy");
              },
            ),
          ],
        ),
      ),
    );
  }
}

import 'package:reactter/reactter.dart';

class CounterController {
  // Create a reactive state using the `Signal` class
  final count = Signal(0);

  void increment() {
    count.value++;
  }

  void decrement() {
    count.value--;
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_reactter/flutter_reactter.dart';
import 'counter_controller.dart';
import 'counter_view.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RtMultiProvider(
        [
          RtProvider(() => CounterController()),
          RtProvider.lazy(() => CounterController(), id: 'counterLazy'),
        ],
        child: CounterView(),
      ),
    );
  }
}

In this example, the Counter widget uses BuildContext.watchId to get the instance of CounterController by its id from the nearest ancestor provider(located in main.dart) and listen for changes in the count state.