RtComponent

The RtComponent is a StatelessWidget hat simplifies the creation of reactive widgets by utilizing the dependency injection system. It provides features similar to RtProvider and RtConsumer that are used to inject and consume dependencies.

Tip

The RtComponent widget is a more efficient way to create reactive widgets than using RtProvider and RtConsumer widgets separately.

Syntax

abstract class RtComponent<T> extends StatelessWidget {
  const RtComponent({Key? key}): super(key: key);

  T Function()? get builder => null;
  String? get id => null;
  List<RtState> Function(T instance)? get listenStates => null;
  bool get listenAll => false;
  Widget render(BuildContext context, T inst);
}

Getters and Methods

• builder: An optional function that creates an instance of the T dependency. This function is registered by Dependency Injection. If omitted, an attempt will be made to locate it within the closest ancestor where it was initially created.
• id: An optional identifier for the T dependency. If omitted, the dependency will be located by its type( T ).
• listenStates: An optional function for defining a list of the states that will rebuild the widget tree defined in the render method whenever it changes. It exposes the instance of the T dependency as argument of the function. If omitted, the listenAll getter is checked.
• listenAll: A boolean value that determines whether to listen to all states( RtState ) of the T dependency for rebuilds the widget tree defined in the render method. For default, it is set to false .
• render : A required function that builds the widget tree based on the instance of the T dependency. It receives the following arguments:
  • context: The BuildContext of the RtComponent widget.
  • inst: The instance of the T dependency.

Usage

In the following example demonstrates a reactive counter implementation using RtComponent .

• counter_with_buttons.dart
• counter.dart
• counter_view.dart
• counter_controller.dart
• main.dart

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

class CounterWithButtons extends RtComponent<CounterController> {
  const CounterWithButtons({Key? key, this.id}) : super(key: key);

  // Identify the `CounterController` dependency
  @override
  final String? id;

  // Provide the `CounterController` dependency to the widget tree
  @override
  get builder => () => CounterController();

  @override
  Widget render(context, counterController) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        ElevatedButton(
          onPressed: counterController.decrement,
          child: const Icon(Icons.remove),
        ),
        const SizedBox(width: 8),
        Counter(id: id),
        const SizedBox(width: 8),
        ElevatedButton(
          onPressed: counterController.increment,
          child: const Icon(Icons.add),
        ),
      ],
    );
  }
}

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

class Counter extends RtComponent<CounterController> {
  const Counter({Key? key, this.id}) : super(key: key);

  // Identify the `CounterController` dependency
  @override
  final String? id;

  // Provide the `CounterController` dependency to the widget tree
  @override
  get builder => () => CounterController();

  // Observe the `count` property of the `counterController`
  // and rebuild the widget tree when the `count` value changes
  @override
  get listenStates => (counterController) => [counterController.count];

  @override
  Widget render(context, counterController) {
    return Text("${counterController.count}");
  }
}

import 'package:flutter/material.dart';
import 'counter.dart';
import 'counter_with_buttons.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: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: const [
            Text('Counter:'),
            CounterWithButtons(),
            SizedBox(height: 16),
            Text('Counter with id:'),
            CounterWithButtons(id: 'withId'),
          ],
        ),
      ),
      floatingActionButton: const CircleAvatar(
        child: Counter(),
      ),
    );
  }
}

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

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

In this example, we introduce two components: Counter and CounterWithButtons .

Counter listens changes in the count property of CounterController using the listenStates getter, and displays its value within the render method. On the other hand, CounterWithButtons provides buttons for incrementing and decrementing the counter and integrates the Counter component to display the count in its render method.

Both Counter and CounterWithButtons extend RtComponent with CounterController as their dependency, use the builder getter to create an instance of CounterController and the id getter to distinguish between different instances of the counter.