ReactterSelector

The ReactterSelector widget is an similarly to ReactterConsumer . It obtains the dependency provided by the closest ReactterProvider widget and allows you to select a specific value from the state to rebuild the widget tree when the value changes.

Syntax

ReactterSelector<T, V>({
  Key? key,
  String? id,
  Widget? child,
  required V selector(
    T instance,
    ReactterState select(ReactterState state),
  ),
  required Widget builder(
    BuildContext context,
    T instance,
    V value,
    Widget? child,
  ),
})

Properties

• key: An optional Key to use for identifying the widget.
• id: An optional String to identify the selector.
• child: An optional Widget which is independent of the ReactterSelector . If defined, it is passed to the builder function.
• selector : A function that computes a value V from one or more states and listens for changes to rebuild the widget tree when the value changes. It receives the following arguments:
  • instance: The instance of T dependency provided by the closest ReactterProvider widget.
  • select: A function that allows you to wrap the state to be listened for changes and returns it.
• builder : A function that builds a widget depending on the ReactterSelector . It receives the following arguments:
  • context: The BuildContext of the widget. A handle to the location of ReactterSelector in the widget tree.
  • instance: The instance of T dependency provided by the closest ReactterProvider widget.
  • value: The selected value computed V by the selector function.
  • child: The child widget passed to the ReactterSelector widget.

Usage

Basic Usage

In the following example, we have a simple counter application that uses the ReactterSelector widget to select a specific value from the state to rebuild the widget tree when the value changes.

counter_controller.dart

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--;
  }
}

counter_view.dart

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

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

  @override
  Widget build(BuildContext context) {
    // Provides the `CounterController` dependency to the widget tree
    return ReactterProvider<CounterController>(
      () => CounterController(),
      child: Scaffold(
        appBar: AppBar(
          title: const Text("Counter"),
        ),
        body: const Center(
          child: Counter(),
        ),
      ),
    );
  }
}

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

  Widget build(BuildContext context) {
    // Obtains the `CounterController` dependency
    // provided by the closest `ReactterProvider` widget
    final counterController = context.use<CounterController>();

    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: counterController.decrement,
              child: const Icon(Icons.remove),
            ),
            const SizedBox(width: 8),
            // Listens the `CounterController`
            // and rebuilds the widget tree when it changes
            ReactterConsumer<CounterController>(
              listenAll: true,
              builder: (context, counterController, child) {
                return Text("${counterController.count}");
              },
            ),
            const SizedBox(width: 8),
            ElevatedButton(
              onPressed: counterController.increment,
              child: const Icon(Icons.add),
            ),
          ],
        ),
        const SizedBox(height: 8),
        // Selects the `count` state from the `CounterController`,
        // calculates if the `count` is divided by 3
        // and rebuilds the widget tree when the value(`isDividedBy3`) changes
        ReactterSelector<CounterController, bool>(
          selector: (counterController, select) {
            return select(counterController.count).value % 3 == 0;
          },
          builder: (context, counterController, isDividedBy3, child) {
            return Text(
              isDividedBy3 ? "Divided by 3" : "Not divided by 3",
            );
          },
        ),
      ],
    );
  }
}