ReactterScope

The ReactterScope widget serves as an entry point for Reactter, allowing you to use any consumer(such as ReactterConsumer , ReactterSelect , ReactterComponent , BuildContext.watch , BuildContext.select ) to observe state changes within the subtree of the widget it wraps, without the need to explicitly define dependencies.

Caution

The ReactterScope widget is optional, but if you use any consumers without defining dependencies and their ancestor widgets are not wrapped by it, a ReactterScopeNotFoundException error will be thrown. Therefore, make sure this widget is correctly placed in the widget tree hierarchy.

To avoid such errors, it is advisable to wrap your application’s root widget with it.

Syntax

ReactterScope({
  Key? key,
  required Widget child,
})

Properties

• key: An optional Key to use for identifying the widget.
• child: The Widget that is to be wrapped by the ReactterScope widget.

Example

In the following example, we have a simple counter application that uses the ReactterScope widget to listen to the state changes of the count value.

• main.dart
• counter_view.dart

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

void main() {
  runApp(
    const ReactterScope(
      child: MyApp(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: CounterView(),
    );
  }
}

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

final count = Signal(0);

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: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => count.value--,
              child: const Icon(Icons.remove),
            ),
            const SizedBox(width: 8),
            ReactterConsumer(
              listenStates: (_) => [count],
              builder: (_, __, ___) {
                return Text('$count');
              },
            ),
            const SizedBox(width: 8),
            ElevatedButton(
              onPressed: () => count.value++,
              child: const Icon(Icons.add),
            ),
          ],
        ),
      ),
    );
  }
}