Rendering Control

In Flutter, efficient rendering control is essential for crafting high-performance, responsive, and scalable applications. Reactter provides a way to easily control the rendering of components in the widget tree behavior effortlessly, using the flutter_reactter package. This package provides a collection of Widgets and some BuildContext methods:

• Widgets
  • ReactterScope
  • ReactterWatcher
  • ReactterProvider
  • ReactterProviders
  • ReactterConsumer
  • ReactterSelector
  • ReactterComponent
• Extensions
  • BuilderContext.use
  • BuilderContext.watch
  • BuilderContext.watchId
  • BuilderContext.select

How it works

The rendering control in Reactter is based on two core concepts of Flutter:

• InheritedWidget: This powerful mechanism efficiently shares data across the widget tree. Reactter extends this capability with the ReactterProvider widget, which stores dependencies using the dependency injection system. This allows descendant widgets to access these dependencies as needed.
• BuildContext Methods: These methods facilitate dependency access and rendering control within the widget tree. Reactter widgets like ReactterConsumer , ReactterSelector , and ReactterComponent use these methods to observe dependencies or states. Whenever the dependency or any observed state undergoes a change, these widgets promptly trigger the rebuilding of the widget tree to reflect the updated state.

Example

Let’s create a simple counter app using Reactter to demonstrate how to control the rendering of the widget tree in 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) {
    // Provides the `CounterController` dependency to the widget tree
    return ReactterProvider<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),
            // Observes the `count` property of the `counterController`
            // and rebuilds the widget tree when the `count` value changes
            ReactterConsumer<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(),
    );
  }
}

Now, when you run the app, you will see a counter app with two buttons to increment and decrement the count value.

In this scenario, only the Text widget will be rebuilt when the count value changes, not the entire CounterView widget. This is because the ReactterConsumer widget observes the count property and triggers the rebuilding of the widget tree when the count value changes.

In example, we used the ReactterConsumer widget to observe the count property of the counterController instance, but we can do the same functionality by using the watch method of the BuildContext class.

Here’s how we can refactor the code to use the watch method along with a Builder widget to achieve the same outcome:

counter_view.dart

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

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

Although the watch method can be directly employed within the builder method of the ReactterProvider widget, it’s advisable to utilize it alongside a Builder widget to prevent unnecessary rebuilds of the widget tree. This practice leverages the BuildContext scope, offering a more granular approach to rendering control within the widget tree.

For more advanced use cases, you can employ other Reactter’s widgets and BuildContext methods to further refine the rendering control of the widget tree. By embracing these strategies, you can optimize the performance and efficiency of your Flutter applications while ensuring a seamless user experience.