Lifecycle

In Reactter, both the states and the dependency (managed by the dependency injection) contain different stages, also known as Lifecycle . The lifecycle entails events emitted through the event handler.

Let’s explore the lifecycle events:

• Lifecycle.registered: is triggered when the dependency has been registered.
• Lifecycle.created: is triggered when the dependency instance has been created.
• Lifecycle.willMount (exclusive of flutter_reactter package): is triggered when the dependency is going to be mounted in the widget tree.
• Lifecycle.didMount (exclusive of flutter_reactter package): is triggered after the dependency has been successfully mounted in the widget tree.
• Lifecycle.willUpdate: is triggered anytime the state or the dependency is about to be updated. The event parameter is a RtState .
• Lifecycle.didUpdate: is triggered anytime the state or the dependency has been updated. The event parameter is a RtState .
• Lifecycle.willUnmount(exclusive of flutter_reactter package): is triggered when the dependency is about to be unmounted from the widget tree.
• Lifecycle.didUnmount(exclusive of flutter_reactter package): is triggered when the dependency has been successfully unmounted from the widget tree.
• Lifecycle.deleted: is triggered when the dependency instance has been deleted.
• Lifecycle.unregistered: is triggered when the dependency is no longer registered.

Using Event Handler

You can listen to the lifecycle events of a dependency using Rt.on or Rt.one method of the event handler. e.g:

Tip

This example is taken from Rendering Control page. It’s recommended to read that page first before proceeding.

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

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

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

  @override
  Widget build(BuildContext context) {
    Rt.on(
      RtDependency<CounterController>(),
      Lifecycle.unregistered,
      (_, __) => print('CounterController unregistered'),
    );

    Rt.on(
      RtDependency<CounterController>(),
      Lifecycle.registered,
      (_, __) => print('CounterController registered'),
    );

    Rt.on(
      RtDependency<CounterController>(),
      Lifecycle.created,
      (_, __) => print('CounterController created'),
    );

    Rt.on(
      RtDependency<CounterController>(),
      Lifecycle.deleted,
      (_, __) => print('CounterController deleted'),
    );

    final showCounter = Signal(false);

    return Scaffold(
      appBar: AppBar(
        title: const Text("Counter - Lifecycle using EventHandler"),
      ),
      body: RtSignalWatcher(
        builder: (context, child) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () => showCounter(!showCounter.value),
                  child: showCounter.value
                      ? const Text('Hide counter')
                      : const Text('Show Counter'),
                ),
                const SizedBox(height: 8),
                if (showCounter.value) const Counter(),
              ],
            ),
          );
        },
      ),
    );
  }
}

import 'package:flutter_reactter/flutter_reactter.dart';

class CounterController {
  final count = Signal(0);

  CounterController() {
    Rt.on(this, Lifecycle.willMount, (_, __) {
      print('CounterController will mount');
    });

    Rt.on(this, Lifecycle.didMount, (_, __) {
      print('CounterController did mount');
    });

    Rt.on(this, Lifecycle.willUpdate, (_, state) {
      print('CounterController will update by ${state.runtimeType}');
    });

    Rt.on(this, Lifecycle.didUpdate, (_, state) {
      print('CounterController did updated by ${state.runtimeType}');
    });

    Rt.on(this, Lifecycle.willUnmount, (_, __) {
      print('CounterController will unmount');
    });

    Rt.on(this, Lifecycle.didUnmount, (_, __) {
      print('CounterController did unmount');
    });
  }

  void increment() {
    count.value++;
  }

  void decrement() {
    count.value--;
  }
}

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:flutter/material.dart';
import 'counter_view.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterView(),
    );
  }
}

Note

The RtDependency is a generic class that takes the type of the dependency and optionally pass an id. This class is used to identify the dependency in the event handler. It ideal to use the RtDependency class when the dependency is not initialize yet.

Using LifecycleObserver

Extend your instances with LifecycleObserver and use its methods to observe the lifecycle events. e.g:

Tip

This example is taken from Rendering Control page. It’s recommended to read that page first before proceeding.

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

import 'package:flutter_reactter/flutter_reactter.dart';

class CounterController extends LifecycleObserver {
  final count = Signal(0);

  void onInitialized() {
    print('CounterController initialized');
  }

  void onDidMount() {
    print('CounterController mounted');
  }

  void onWillMount() {
    print('CounterController will mount');
  }

  void onWillUpdate(RtState state) {
    print('CounterController will update by ${state.runtimeType}');
  }

  void onDidUpdate(RtState state) {
    print('CounterController did update by ${state.runtimeType}');
  }

  void onWillUnmount() {
    print('CounterController will unmount');
  }

  void onDidUnmount() {
    print('CounterController did unmount');
  }

  void increment() {
    count.value++;
  }

  void decrement() {
    count.value--;
  }
}

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

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

  @override
  Widget build(BuildContext context) {
    final showCounter = Signal(false);

    return Scaffold(
      appBar: AppBar(
        title: const Text("Counter - Lifecycle using LifecycleObserver"),
      ),
      body: RtSignalWatcher(
        builder: (context, child) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () => showCounter(!showCounter.value),
                  child: showCounter.value
                      ? const Text('Hide counter')
                      : const Text('Show Counter'),
                ),
                const SizedBox(height: 8),
                if (showCounter.value) const Counter(),
              ],
            ),
          );
        },
      ),
    );
  }
}

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:flutter/material.dart';
import 'counter_view.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterView(),
    );
  }
}

Using UseEffect

The UseEffect hook can be used to listen to the lifecycle events of a dependency. e.g:

Tip

This example is taken from Rendering Control page. It’s recommended to read that page first before proceeding.

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

import 'package:flutter_reactter/flutter_reactter.dart';

class CounterController {
  final count = Signal(0);

  CounterController() {
    UseEffect(() {
      print('CounterController mounted');

      return () {
        print('CounterController will unmount');
      };
    }, []);

    UseEffect(() {
      print(
        "CounterController's count changed to ${count.value}",
      );
    }, [count]);
  }

  void increment() {
    count.value++;
  }

  void decrement() {
    count.value--;
  }
}

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

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

  @override
  Widget build(BuildContext context) {
    final showCounter = Signal(false);

    return Scaffold(
      appBar: AppBar(
        title: const Text("Counter - Lifecycle using UseEffect"),
      ),
      body: RtSignalWatcher(
        builder: (context, child) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () => showCounter(!showCounter.value),
                  child: showCounter.value
                      ? const Text('Hide counter')
                      : const Text('Show Counter'),
                ),
                const SizedBox(height: 8),
                if (showCounter.value) const Counter(),
              ],
            ),
          );
        },
      ),
    );
  }
}

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:flutter/material.dart';
import 'counter_view.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterView(),
    );
  }
}