RtWatcher

The RtWatcher widget allows you to watch states and automatically rebuilds the widget tree whenever a monitored state changes.

Syntax

The RtWatcher widget has two ways to use it:

• Using the default constructor:

RtWatcher(
  Widget builder(
    BuildContext context,
    RtState watch(RtState state),
  ), {
    Key? key,
  },
)

• Using the Builder constructor:

RtWatcher.builder({
  Key? key,
  Widget? child,
  required Widget builder(
    BuildContext context,
    RtState watch(RtState state),
    widget? child,
  ),
})

Properties

• key: An optional Key to use for identifying the widget.
• child: An optional Widget 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 builder function if it is defined.
• builder : 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 BuildContext of the RtWatcher widget.
  • watch : A function to watch the state that should trigger a rebuild when it changes.
  • child: The child widget passed to RtWatcher .

Usage

The following example demonstrates how to use the RtlWatcher widget to listen for changes in a state and rebuild the widget tree accordingly.

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

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!,
          ],
        );
      },
    );
  }
}

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(),
      ),
    );
  }
}

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(),
    );
  }
}