RtScope

The RtScope widget serves as an entry point for Reactter, allowing you to use any consumer(such as RtConsumer , RtSelector , RtComponent , 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 RtScope widget is optional, but if you use any consumers without defining dependencies and their ancestor widgets are not wrapped by it, a RtScopeNotFoundException 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

RtScope({
  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 RtScope widget.

Usage

In the following example, we have a simple counter application that uses the RtScope 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 RtScope(
      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),
            RtConsumer(
              listenStates: (_) => [count],
              builder: (_, __, ___) {
                return Text('$count');
              },
            ),
            const SizedBox(width: 8),
            ElevatedButton(
              onPressed: () => count.value++,
              child: const Icon(Icons.add),
            ),
          ],
        ),
      ),
    );
  }
}