Control del renderizado

En Flutter, el control eficiente del renderizado es crucial para crear aplicaciones de alto rendimiento, receptivas y escalables. El paquete flutter_reactter ofrece una manera sencilla de gestionar el comportamiento del renderizado en el árbol de widgets, permitiendo optimizar el rendimiento y ajustar la capacidad de respuesta de la aplicación con facilidad.

API

Este paquete proporciona los siguientes mecanismos de control del renderizado:

• Widgets
  • RtScope
  • RtProvider
  • RtProviders
  • RtConsumer
  • RtSelector
  • RtWatcher
  • RtComponent
  • RtSignalWatcher
• Extensiones
  • BuilderContext.use
  • BuilderContext.watch
  • BuilderContext.watchId
  • BuilderContext.select

How it works

El control del renderizado en Reactter se basa en dos conceptos fundamentales de Flutter:

• InheritedWidget: Este mecanismo poderoso comparte eficientemente datos en todo el árbol de widgets. Reactter extiende esta capacidad con el widget RtProvider , que almacena dependencias utilizando el sistema de inyección de dependencias. Esto permite que los widgets descendientes accedan a estas dependencias según sea necesario.

• Extensiones de BuildContext: Estos métodos facilitan el acceso a dependencias y el control del renderizado dentro del árbol de widgets. Los widgets de Reactter como RtConsumer , RtSelector y RtComponent utilizan estos métodos para observar dependencias o estados. Cuando la dependencia o cualquier estado observado cambia, estos widgets activan rápidamente la reconstrucción del árbol de widgets para reflejar el estado actualizado.

Ejemplo

Veamos cómo crear una aplicación de contador simple usando Reactter para demostrar cómo controlar el renderizado del árbol de widgets en Flutter.

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

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

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

  @override
  Widget build(BuildContext context) {
    // Provide the `CounterController` dependency to the widget tree
    return RtProvider<CounterController>(
      () => CounterController(),
      builder: (context, counterController, child) {
        return Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              onPressed: counterController.decrement,
              child: const Icon(Icons.remove),
            ),
            const SizedBox(width: 8),
            // Observe the `count` property of the `counterController`
            // and rebuild the widget tree when the `count` value changes
            RtConsumer<CounterController>(
              listenStates: (counterController) => [counterController.count],
              builder: (context, counterController, child) {
                return Text("${counterController.count}");
              },
            ),
            const SizedBox(width: 8),
            ElevatedButton(
              onPressed: counterController.increment,
              child: const Icon(Icons.add),
            ),
          ],
        );
      },
    );
  }
}

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

Ahora, cuando ejecutes la aplicación, verás una aplicación de contador con dos botones para incrementar y decrementar el valor de count.

En este caso, solo el widget Text se reconstruirá cuando el valor de count cambie, mientras que el widget CounterView no se reconstruirá por completo. Esto se debe a que el widget RtConsumer observa la propiedad count y activa la reconstrucción del árbol de widgets únicamente cuando el valor de count cambia.

En el ejemplo anterior, utilizamos el widget RtConsumer para observar la propiedad count de la instancia counterController, pero podemos lograr la misma funcionalidad utilizando el método watch de la clase BuildContext .

A continuación, mostramos cómo modificar el código para emplear el método watch junto al widget Builder y lograr el mismo resultado:

counter_view.dart

            // Observe the `count` property of the `counterController`
            // and rebuild the widget tree when the `count` value changes
            RtConsumer<CounterController>(
              listenStates: (counterController) => [counterController.count],
              builder: (context, counterController, child) {
            Builder(
              builder: (context) {
                // Observe the `count` property of the `counterController`
                // and rebuild the widget tree when the `count` value changes
                final counterController = context.watch<CounterController>(
                  (counterController) => [counterController.count],
                );

                return Text("${counterController.count}");
              },
            ),

Mientras que el método watch puede emplearse directamente dentro del método builder del widget RtProvider , es aconsejable utilizarlo junto a un widget Builder para evitar reconstrucciones innecesarias del árbol de widgets. Esta práctica aprovecha el alcance de BuildContext , ofreciendo un enfoque más granular para controlar el renderizado dentro del árbol de widgets.

Para casos de uso más avanzados, puedes emplear otros widgets de Reactter y métodos de BuildContext para poder refinar aún más el control del renderizado del árbol de widgets.