Saltearse al contenido
Reactter

Cliclo de vida

En Reactter, tanto los estados como la dependencia (gestionada por la inyección de dependencia) contienen diferentes etapas, también conocidas como ciclo de vida ( Lifecycle ). El ciclo de vida implica eventos emitidos a través del manejador de eventos.

Estos son los eventos del ciclo de vida:

  • Lifecycle.registered: se activa cuando la dependencia ha sido registrada.
  • Lifecycle.created: se activa cuando la instancia de la dependencia ha sido creada.
  • Lifecycle.willMount (exclusivo del paquete flutter_reactter): se activa cuando la dependencia va a ser montada en el árbol de widgets.
  • Lifecycle.didMount (exclusivo del paquete flutter_reactter): se activa después de que la dependencia se haya montado con éxito en el árbol de widgets.
  • Lifecycle.willUpdate: se activa en cualquier momento en que el estado o la dependencia estén a punto de ser actualizados. El parámetro de evento es un RtState .
  • Lifecycle.didUpdate: se activa en cualquier momento en que el estado o la dependencia ha sido actualizado. El parámetro de evento es un RtState .
  • Lifecycle.willUnmount (exclusivo del paquete flutter_reactter): se activa cuando la dependencia está a punto de ser desmontada del árbol de widgets.
  • Lifecycle.didUnmount (exclusivo del paquete flutter_reactter): se activa cuando la dependencia ha sido desmontada con éxito del árbol de widgets.
  • Lifecycle.deleted: se activa cuando la instancia de la dependencia ha sido eliminada.
  • Lifecycle.unregistered: se activa cuando la dependencia ya no está registrada.

Usando el manejador de eventos

Puedes escuchar los eventos del ciclo de vida de una instancia (como una dependencia o un estado) usando el método Rt.on o Rt.one del manejador de eventos. Por ejemplo:

 
1
import 'package:flutter/material.dart';
2
import 'package:flutter_reactter/flutter_reactter.dart';
3
import 'counter.dart';
4
import 'counter_controller.dart';
5


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


9
  @override
10
  Widget build(BuildContext context) {
11
    Rt.on(
12
      RtDependencyRef<CounterController>(),
13
      Lifecycle.unregistered,
14
      (_, __) => print('CounterController unregistered'),
15
    );
16


17
    Rt.on(
18
      RtDependencyRef<CounterController>(),
19
      Lifecycle.registered,
20
      (_, __) => print('CounterController registered'),
21
    );
22


23
    Rt.on(
24
      RtDependencyRef<CounterController>(),
25
      Lifecycle.created,
26
      (_, __) => print('CounterController created'),
27
    );
28


29
    Rt.on(
30
      RtDependencyRef<CounterController>(),
31
      Lifecycle.deleted,
32
      (_, __) => print('CounterController deleted'),
33
    );
27 collapsed lines
34


35
    final showCounter = Signal(false);
36


37
    return Scaffold(
38
      appBar: AppBar(
39
        title: const Text("Counter - Lifecycle using EventHandler"),
40
      ),
41
      body: RtSignalWatcher(
42
        builder: (context, child) {
43
          return Center(
44
            child: Column(
45
              mainAxisAlignment: MainAxisAlignment.center,
46
              children: [
47
                ElevatedButton(
48
                  onPressed: () => showCounter(!showCounter.value),
49
                  child: showCounter.value
50
                      ? const Text('Hide counter')
51
                      : const Text('Show Counter'),
52
                ),
53
                const SizedBox(height: 8),
54
                if (showCounter.value) const Counter(),
55
              ],
56
            ),
57
          );
58
        },
59
      ),
60
    );
61
  }
62
}
1
import 'package:flutter_reactter/flutter_reactter.dart';
2


3
class CounterController {
4
  final count = Signal(0);
5


6
  CounterController() {
7
    Rt.on(this, Lifecycle.willMount, (_, __) {
8
      print('CounterController will mount');
9
    });
10


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


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


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


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


27
    Rt.on(this, Lifecycle.didUnmount, (_, __) {
28
      print('CounterController did unmount');
29
    });
30
  }
31


32
  void increment() {
33
    count.value++;
34
  }
35


36
  void decrement() {
37
    count.value--;
38
  }
39
}
1
import 'package:flutter/material.dart';
2
import 'package:flutter_reactter/flutter_reactter.dart';
3


4
import 'counter_controller.dart';
5


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


9
  @override
10
  Widget build(BuildContext context) {
11
    // Provide the `CounterController` dependency to the widget tree
12
    return RtProvider<CounterController>(
13
      () => CounterController(),
14
      builder: (context, counterController, child) {
15
        return Row(
16
          mainAxisSize: MainAxisSize.min,
17
          children: [
18
            ElevatedButton(
19
              onPressed: counterController.decrement,
20
              child: const Icon(Icons.remove),
21
            ),
22
            const SizedBox(width: 8),
23
            // Observe the `count` property of the `counterController`
24
            // and rebuild the widget tree when the `count` value changes
25
            RtConsumer<CounterController>(
26
              listenStates: (counterController) => [counterController.count],
27
              builder: (context, counterController, child) {
28
                return Text("${counterController.count}");
29
              },
30
            ),
31
            const SizedBox(width: 8),
32
            ElevatedButton(
33
              onPressed: counterController.increment,
34
              child: const Icon(Icons.add),
35
            ),
36
          ],
37
        );
38
      },
39
    );
40
  }
41
}
1
import 'package:flutter/material.dart';
2
import 'counter_view.dart';
3


4
void main() {
5
  runApp(MyApp());
6
}
7


8
class MyApp extends StatelessWidget {
9
  @override
10
  Widget build(BuildContext context) {
11
    return MaterialApp(
12
      home: CounterView(),
13
    );
14
  }
15
}

Usando RtDependencyLifecycle

Extiende tus instancias con RtDependencyLifecycle para escuchar los eventos del ciclo de vida de una dependencia o estado. Por ejemplo:

 
1
import 'package:flutter_reactter/flutter_reactter.dart';
2


3
class CounterController extends RtDependencyLifecycle {
4
  final count = Signal(0);
5


6
  void increment() {
7
    count.value++;
8
  }
9


10
  void decrement() {
11
    count.value--;
12
  }
13


14
  @override
15
  void onCreated() {
16
    print('CounterController initialized');
17
  }
18


19
  @override
20
  void onDidMount() {
21
    print('CounterController mounted');
22
  }
23


24
  @override
25
  void onWillMount() {
26
    print('CounterController will mount');
27
  }
28


29
  @override
30
  void onWillUpdate(RtState state) {
31
    print('CounterController will update by ${state.runtimeType}');
32
  }
33


34
  @override
35
  void onDidUpdate(RtState state) {
36
    print('CounterController did update by ${state.runtimeType}');
37
  }
38


39
  @override
40
  void onWillUnmount() {
41
    print('CounterController will unmount');
42
  }
43


44
  @override
45
  void onDidUnmount() {
46
    print('CounterController did unmount');
47
  }
48
}
1
import 'package:flutter/material.dart';
2
import 'package:flutter_reactter/flutter_reactter.dart';
3
import 'counter.dart';
4


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


8
  @override
9
  Widget build(BuildContext context) {
10
    final showCounter = Signal(false);
11


12
    return Scaffold(
13
      appBar: AppBar(
14
        title: const Text("Counter - Lifecycle using RtDependencyLifecycle"),
15
      ),
16
      body: RtSignalWatcher(
17
        builder: (context, child) {
18
          return Center(
19
            child: Column(
20
              mainAxisAlignment: MainAxisAlignment.center,
21
              children: [
22
                ElevatedButton(
23
                  onPressed: () => showCounter(!showCounter.value),
24
                  child: showCounter.value
25
                      ? const Text('Hide counter')
26
                      : const Text('Show Counter'),
27
                ),
28
                const SizedBox(height: 8),
29
                if (showCounter.value) const Counter(),
30
              ],
31
            ),
32
          );
33
        },
34
      ),
35
    );
36
  }
37
}
1
import 'package:flutter/material.dart';
2
import 'package:flutter_reactter/flutter_reactter.dart';
3


4
import 'counter_controller.dart';
5


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


9
  @override
10
  Widget build(BuildContext context) {
11
    // Provide the `CounterController` dependency to the widget tree
12
    return RtProvider<CounterController>(
13
      () => CounterController(),
14
      builder: (context, counterController, child) {
15
        return Row(
16
          mainAxisSize: MainAxisSize.min,
17
          children: [
18
            ElevatedButton(
19
              onPressed: counterController.decrement,
20
              child: const Icon(Icons.remove),
21
            ),
22
            const SizedBox(width: 8),
23
            // Observe the `count` property of the `counterController`
24
            // and rebuild the widget tree when the `count` value changes
25
            RtConsumer<CounterController>(
26
              listenStates: (counterController) => [counterController.count],
27
              builder: (context, counterController, child) {
28
                return Text("${counterController.count}");
29
              },
30
            ),
31
            const SizedBox(width: 8),
32
            ElevatedButton(
33
              onPressed: counterController.increment,
34
              child: const Icon(Icons.add),
35
            ),
36
          ],
37
        );
38
      },
39
    );
40
  }
41
}
1
import 'package:flutter/material.dart';
2
import 'counter_view.dart';
3


4
void main() {
5
  runApp(MyApp());
6
}
7


8
class MyApp extends StatelessWidget {
9
  @override
10
  Widget build(BuildContext context) {
11
    return MaterialApp(
12
      home: CounterView(),
13
    );
14
  }
15
}

Usando UseEffect

El hook UseEffect se puede usar para escuchar los eventos del ciclo de vida de una dependencia o estado. Por ejemplo:

 
1
import 'package:flutter_reactter/flutter_reactter.dart';
2


3
class CounterController {
4
  final count = Signal(0);
5


6
  CounterController() {
7
    UseEffect(() {
8
      print('CounterController mounted');
9


10
      return () {
11
        print('CounterController will unmount');
12
      };
13
    }, []);
14


15
    UseEffect(() {
16
      print(
17
        "CounterController's count changed to ${count.value}",
18
      );
19
    }, [count]);
20
  }
21


22
  void increment() {
23
    count.value++;
24
  }
25


26
  void decrement() {
27
    count.value--;
28
  }
29
}
1
import 'package:flutter/material.dart';
2
import 'package:flutter_reactter/flutter_reactter.dart';
3
import 'counter.dart';
4


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


8
  @override
9
  Widget build(BuildContext context) {
10
    final showCounter = Signal(false);
11


12
    return Scaffold(
13
      appBar: AppBar(
14
        title: const Text("Counter - Lifecycle using UseEffect"),
15
      ),
16
      body: RtSignalWatcher(
17
        builder: (context, child) {
18
          return Center(
19
            child: Column(
20
              mainAxisAlignment: MainAxisAlignment.center,
21
              children: [
22
                ElevatedButton(
23
                  onPressed: () => showCounter(!showCounter.value),
24
                  child: showCounter.value
25
                      ? const Text('Hide counter')
26
                      : const Text('Show Counter'),
27
                ),
28
                const SizedBox(height: 8),
29
                if (showCounter.value) const Counter(),
30
              ],
31
            ),
32
          );
33
        },
34
      ),
35
    );
36
  }
37
}
1
import 'package:flutter/material.dart';
2
import 'package:flutter_reactter/flutter_reactter.dart';
3


4
import 'counter_controller.dart';
5


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


9
  @override
10
  Widget build(BuildContext context) {
11
    // Provide the `CounterController` dependency to the widget tree
12
    return RtProvider<CounterController>(
13
      () => CounterController(),
14
      builder: (context, counterController, child) {
15
        return Row(
16
          mainAxisSize: MainAxisSize.min,
17
          children: [
18
            ElevatedButton(
19
              onPressed: counterController.decrement,
20
              child: const Icon(Icons.remove),
21
            ),
22
            const SizedBox(width: 8),
23
            // Observe the `count` property of the `counterController`
24
            // and rebuild the widget tree when the `count` value changes
25
            RtConsumer<CounterController>(
26
              listenStates: (counterController) => [counterController.count],
27
              builder: (context, counterController, child) {
28
                return Text("${counterController.count}");
29
              },
30
            ),
31
            const SizedBox(width: 8),
32
            ElevatedButton(
33
              onPressed: counterController.increment,
34
              child: const Icon(Icons.add),
35
            ),
36
          ],
37
        );
38
      },
39
    );
40
  }
41
}
1
import 'package:flutter/material.dart';
2
import 'counter_view.dart';
3


4
void main() {
5
  runApp(MyApp());
6
}
7


8
class MyApp extends StatelessWidget {
9
  @override
10
  Widget build(BuildContext context) {
11
    return MaterialApp(
12
      home: CounterView(),
13
    );
14
  }
15
}