doc: Update RtWatcher widget documentation and examples.

website/src/content/docs/widgets/rt_watcher.mdx

@@ -5,6 +5,82 @@ sidebar:
   order: 7
 ---
 
-:::caution
-This section is under construction.
-:::
+import { HM, HT, HN } from "@/components/Highlight";
+import CodeTabs from '@/components/CodeTabs.astro';
+import { Tabs, TabItem } from "@/components/Tabs";
+import ZappButton from "@/components/ZappButton.astro";
+import { Code } from "@astrojs/starlight/components";
+import { marks } from '@/examples/marks.ts'
+
+import counterCode from '@/examples/rt_watcher/lib/counter.dart?raw';
+import counterViewCode from '@/examples/rt_watcher/lib/counter_view.dart?raw';
+import mainCode from '@/examples/rt_watcher/lib/main.dart?raw';
+
+The <HT><a href="https://pub.dev/documentation/flutter_reactter/latest/flutter_reactter/RtWatcher-class.html">`RtWatcher`</a></HT> widget allows you to watch states and automatically rebuilds the widget tree whenever a monitored state changes.
+
+## Syntax
+
+The <HT>`RtWatcher`</HT> widget has two ways to use it:
+
+- **Using the default constructor**:
+
+```dart showLineNumbers=false
+RtWatcher(
+  Widget builder(
+    BuildContext context,
+    RtState watch(RtState state),
+  ), {
+    Key? key,
+  },
+)
+```
+
+- **Using the Builder constructor**:
+
+```dart showLineNumbers=false
+RtWatcher.builder({
+  Key? key,
+  Widget? child,
+  required Widget builder(
+    BuildContext context,
+    RtState watch(RtState state),
+    widget? child,
+  ),
+})
+```
+
+## Properties
+
+- `key`: An optional <HT>`Key`</HT> to use for identifying the widget.
+- `child`: An optional <HT>`Widget`</HT> that remains static while the widget tree is rebuilt.
+  Useful for parts of the UI that don't depend on the watched states and can remain unchanged.
+  It is passed to the <HM>`builder`</HM> function if it is defined.
+- <HM>`builder`</HM>: A required function that returns a widget.
+  This function is called whenever any of the states being watched change.
+  It takes three parameters:
+  - `context`: The <HT>`BuildContext`</HT> of the <HT>`RtWatcher`</HT> widget.
+  - <HM>`watch`</HM>: A function to watch the state that should trigger a rebuild when it changes.
+  - `child`: The `child` widget passed to <HT>`RtWatcher`</HT>.
+
+## Usage
+
+The following example demonstrates how to use the <HT>`RtlWatcher`</HT> widget to listen for changes in a state and rebuild the widget tree accordingly.
+
+<CodeTabs>
+  <ZappButton path="examples/rt_watcher"/>
+
+  <Tabs>
+    <TabItem>
+      <HM single slot="label">counter.dart</HM>
+      <Code code={counterCode} lang="dart" mark={[...marks, {range: "11-38"}]}/>
+    </TabItem>
+
+    <TabItem label="counter_view.dart">
+      <Code code={counterViewCode} lang="dart" mark={marks} />
+    </TabItem>
+
+    <TabItem label="main.dart">
+      <Code code={mainCode} lang="dart" mark={marks} />
+    </TabItem>
+  </Tabs>
+</CodeTabs>

website/src/examples/rt_watcher/lib/counter.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_reactter/flutter_reactter.dart';
+
+class Counter extends StatelessWidget {
+  const Counter({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final count = UseState(0);
+
+    return RtWatcher.builder(
+      // This widget remains static and does not rebuild when `count` changes.
+      // It is passed as a `child` to the `builder` function.
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          ElevatedButton(
+            child: const Icon(Icons.remove),
+            onPressed: () => count.value--,
+          ),
+          SizedBox(width: 8),
+          ElevatedButton(
+            child: const Icon(Icons.add),
+            onPressed: () => count.value++,
+          ),
+        ],
+      ),
+      // Rebuid the widget when `count` changes
+      builder: (context, watch, child) {
+        return Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text("Count: ${watch(count).value}"),
+            SizedBox(height: 8),
+            child!,
+          ],
+        );
+      },
+    );
+  }
+}

website/src/examples/rt_watcher/lib/counter_view.dart

@@ -0,0 +1,18 @@
+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: const Center(
+        child: Counter(),
+      ),
+    );
+  }
+}

website/src/examples/rt_watcher/lib/main.dart

@@ -0,0 +1,15 @@
+import 'package:flutter/material.dart';
+import 'counter_view.dart';
+
+void main() {
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      home: CounterView(),
+    );
+  }
+}

website/src/examples/rt_watcher/pubspec.yaml

@@ -0,0 +1,14 @@
+name: RtWatcher
+description: RtWatcher example
+version: 0.1.0
+
+environment:
+  sdk: ">=2.19.0 <4.0.0"
+
+dependencies:
+  flutter:
+    sdk: flutter
+  flutter_reactter: ^7.3.1
+
+flutter:
+  uses-material-design: true