ReactterConsumer
Esta página aún no está disponible en tu idioma.
The ReactterConsumer
widget obtains the dependency provided by the closest ReactterProvider
widget and rebuilds itself whenever there are changes in the dependency or any defined states.
Syntax
ReactterConsumer<T>({ Key? key, String? id, Widget? child, bool listenAll = false, List<ReactterState> listenStates( T instance, ), required Widget builder( BuildContext context, T instance, Widget? child, ),})
Properties
key
: An optionalKey
to use for identifying the widget.id
: An optional identifier for the dependency. If omitted, the dependency will be located by its type(T
).child
: An optionalWidget
that is independent of theReactterConsumer
. If defined, it is passed to thebuilder
function if it is defined.listenAll
: A boolean that determines whether to listen to all states provided by theT
dependency. If set totrue
, thelistenStates
function is ignored. The default value isfalse
.-
listenStates
: A function that returns a list of state(ReactterState
) to listen to. It takes the instance of theT
dependency as an åargument. If omitted, thelistenAll
property is checked. -
builder
: A function that builds a widget depending on theReactterConsumer
. It receives the following arguments:context
: TheBuildContext
of the widget. A handle to the location ofReactterConsumer
in the widget tree.instance
: The instance ofT
dependency provided by the closestReactterProvider
widget.child
: Thechild
widget passed to theReactterConsumer
widget.
Usage
Basic Usage
To use the ReactterConsumer
widget, you need to provide the T
dependency using the ReactterProvider
widget.
Here’s an example of how to use it:
14 collapsed lines
1import 'package:reactter/reactter.dart';2
3class CounterController {4 // Create a reactive state using the `Signal` class5 final count = Signal(0);6
7 void increment() {8 count.value++;9 }10
11 void decrement() {12 count.value--;13 }14}
1import 'package:flutter/material.dart';2import 'package:flutter_reactter/flutter_reactter.dart';3import 'counter_controller.dart';4
5class CounterView extends StatelessWidget {6 const CounterView({Key? key}) : super(key: key);7
8 @override9 Widget build(BuildContext context) {10 // Provides the `CounterController` dependency to the widget tree11 return ReactterProvider<CounterController>(12 () => CounterController(),13 child: Scaffold(14 appBar: AppBar(15 title: const Text("Counter"),16 ),17 body: const Center(18 child: Counter(),19 ),20 ),21 );22 }23}24
25class Counter extends StatelessWidget {26 const Counter({Key? key}) : super(key: key);27
28 Widget build(BuildContext context) {29 // Locales the `CounterController` dependency30 return ReactterConsumer<CounterController>(31 builder: (context, counterController, child) {32 return Row(33 mainAxisAlignment: MainAxisAlignment.center,34 children: [35 ElevatedButton(36 onPressed: counterController.decrement,37 child: const Icon(Icons.remove),38 ),39 const SizedBox(width: 8),40 Text("${counterController.count}"),41 const SizedBox(width: 8),42 ElevatedButton(43 onPressed: counterController.increment,44 child: const Icon(Icons.add),45 ),46 ],47 );48 },49 );50 }51}
15 collapsed lines
1import 'package:flutter/material.dart';2import 'counter_view.dart';3
4void main() {5 runApp(MyApp());6}7
8class MyApp extends StatelessWidget {9 @override10 Widget build(BuildContext context) {11 return MaterialApp(12 home: CounterView(),13 );14 }15}
In the example above, the ReactterConsumer
widget is used only to access the CounterController
dependency within the Counter
widget.
Consequently, it does not rebuild whenever there are changes in the count
state of the CounterController
dependency.
Listening to all state
The ReactterConsumer
widget can listen to all states provided by the T
dependency by setting the listenAll
property to true
.
Here’s an example of how to use it:
14 collapsed lines
1import 'package:reactter/reactter.dart';2
3class CounterController {4 // Create a reactive state using the `Signal` class5 final count = Signal(0);6
7 void increment() {8 count.value++;9 }10
11 void decrement() {12 count.value--;13 }14}
25 collapsed lines
1import 'package:flutter/material.dart';2import 'package:flutter_reactter/flutter_reactter.dart';3import 'counter_controller.dart';4
5class CounterView extends StatelessWidget {6 const CounterView({Key? key}) : super(key: key);7
8 @override9 Widget build(BuildContext context) {10 // Provides the `CounterController` dependency to the widget tree11 return ReactterProvider<CounterController>(12 // Registers the `CounterController` dependency13 () => CounterController(),14 child: Scaffold(15 appBar: AppBar(16 title: const Text("Counter"),17 ),18 body: const Center(19 child: Counter(),20 ),21 ),22 );23 }24}25
26class Counter extends StatelessWidget {27 const Counter({Key? key}) : super(key: key);28
29 Widget build(BuildContext context) {30 return ReactterConsumer<CounterController>(31 // Listens to all states provided by the `CounterController` dependency32 listenAll: true,33 // Rebuilds whenever there are changes any state of the `CounterController` dependency34 builder: (context, counterController, child) {35 return Row(36 mainAxisAlignment: MainAxisAlignment.center,37 children: [38 ElevatedButton(39 onPressed: counterController.decrement,40 child: const Icon(Icons.remove),41 ),42 const SizedBox(width: 8),43 Text("${counterController.count}"),44 const SizedBox(width: 8),45 ElevatedButton(46 onPressed: counterController.increment,47 child: const Icon(Icons.add),48 ),49 ],50 );51 },52 );53 }54}
15 collapsed lines
1import 'package:flutter/material.dart';2import 'counter_view.dart';3
4void main() {5 runApp(MyApp());6}7
8class MyApp extends StatelessWidget {9 @override10 Widget build(BuildContext context) {11 return MaterialApp(12 home: CounterView(),13 );14 }15}
In the example above, the ReactterConsumer
widget will trigger a rebuild of the widget subtree(the Row
widget and each of its children) whenever there are changes in any state of the CounterController
dependency.
So, that approach lacks performance efficient.
It is advisable to optimize by selectively wrapping only the necessary widgets with the ReactterConsumer
widget, utilizing either active or non-active listening as appropriate, e.g.:
23class Counter extends StatelessWidget {24 const Counter({Key? key}) : super(key: key);25
26 Widget build(BuildContext context) {27 return ReactterConsumer<CounterController>(28 // Listens to all states provided by the `CounterController` dependency29 listenAll: true,30 builder: (context, counterController, child) {31 return Row(32 mainAxisAlignment: MainAxisAlignment.center,33 children: [34 ElevatedButton(35 onPressed: counterController.decrement,36 child: const Icon(Icons.remove),37 ),38 const SizedBox(width: 8),39 Text("${counterController.count}"),40 ReactterConsumer<CounterController>(41 // Listens to all states provided by the `CounterController` dependency42 listenAll: true,43 // Rebuilds whenever there are changes any state of the `CounterController` dependency44 builder: (context, counterController, child) {45 return Text("${counterController.count}");46 },47 ),48 const SizedBox(width: 8),49 ElevatedButton(50 onPressed: counterController.increment,51 child: const Icon(Icons.add),52 ),53 ],54 );55 },56 );57 }58}
Listening to specific states
The ReactterConsumer
widget can listen to specific states provided by the T
dependency by defining the listenStates
property.
Here’s an example of how to use it:
14 collapsed lines
1import 'package:reactter/reactter.dart';2
3class CounterController {4 // Create a reactive state using the `Signal` class5 final count = Signal(0);6
7 void increment() {8 count.value++;9 }10
11 void decrement() {12 count.value--;13 }14}
24 collapsed lines
1import 'package:flutter/material.dart';2import 'package:flutter_reactter/flutter_reactter.dart';3import 'counter_controller.dart';4
5class CounterView extends StatelessWidget {6 const CounterView({Key? key}) : super(key: key);7
8 @override9 Widget build(BuildContext context) {10 // Provides the `CounterController` dependency to the widget tree11 return ReactterProvider<CounterController>(12 () => CounterController(),13 child: Scaffold(14 appBar: AppBar(15 title: const Text("Counter"),16 ),17 body: const Center(18 child: const Counter(),19 ),20 ),21 );22 }23}24
25class Counter extends StatelessWidget {26 const Counter({Key? key}) : super(key: key);27
28 Widget build(BuildContext context) {+29 // Locales the `CounterController` dependency30 return ReactterConsumer<CounterController>(31 builder: (context, counterController, child) {32 return Row(33 mainAxisAlignment: MainAxisAlignment.center,34 children: [35 ElevatedButton(36 onPressed: counterController.decrement,37 child: const Icon(Icons.remove),38 ),39 const SizedBox(width: 8),40 ReactterConsumer<CounterController>(41 // Listens to the `count` state of the `CounterController` dependency42 listenStates: (counterController) => [counterController.count],43 // Rebuilds whenever there are changes in the `count` state of the `CounterController` dependency44 builder: (context, counterController, child) {45 return Text("${counterController.count}");46 },47 ),48 const SizedBox(width: 8),49 ElevatedButton(50 onPressed: counterController.increment,51 child: const Icon(Icons.add),52 ),53 ],54 );55 },56 );57 }58}
15 collapsed lines
1import 'package:flutter/material.dart';2import 'counter_view.dart';3
4void main() {5 runApp(MyApp());6}7
8class MyApp extends StatelessWidget {9 @override10 Widget build(BuildContext context) {11 return MaterialApp(12 home: CounterView(),13 );14 }15}
In the example above, the ReactterConsumer
widget will trigger a rebuild of the Text
widget whenever there are changes in the count
state of the CounterController
dependency.
Using id
The ReactterConsumer
widget can use the id
property to locate the T
dependency by its identifier.
It is useful when there are multiple instances of the same type of dependency in the widget tree.
Here’s an example of how to use it:
14 collapsed lines
1import 'package:reactter/reactter.dart';2
3class CounterController {4 // Create a reactive state using the `Signal` class5 final count = Signal(0);6
7 void increment() {8 count.value++;9 }10
11 void decrement() {12 count.value--;13 }14}
32 collapsed lines
1import 'package:flutter/material.dart';2import 'package:flutter_reactter/flutter_reactter.dart';3import 'counter_controller.dart';4
5class CounterView extends StatelessWidget {6 const CounterView({Key? key}) : super(key: key);7
8 @override9 Widget build(BuildContext context) {10 // Provides the `CounterController` dependencies to the widget tree11 return ReactterProviders(12 [13 ReactterProvider(() => CounterController(), id: "counter1"),14 ReactterProvider(() => CounterController(), id: "counter2"),15 ],16 child: Scaffold(17 appBar: AppBar(18 title: const Text("Counter"),19 ),20 body: const Center(21 child: Column(22 children: [23 const Counter(id: "counter1"),24 const Counter(id: "counter2"),25 ],26 ),27 ),28 ),29 );30 }31}32
33class Counter extends StatelessWidget {34 final String? id;35
36 const Counter({Key? key, this.id}) : super(key: key);37
38 Widget build(BuildContext context) {39 return ReactterConsumer<CounterController>(40 // Locates the `CounterController` dependency by its identifier41 id: id,42 builder: (context, counterController, child) {43 return Row(44 mainAxisAlignment: MainAxisAlignment.center,45 children: [46 ElevatedButton(47 onPressed: counterController.decrement,48 child: const Icon(Icons.remove),49 ),50 const SizedBox(width: 8),51 ReactterConsumer<CounterController>(52 // Locates the `CounterController` dependency by its identifier53 id: id,54 // Listens to the `count` state of the `CounterController` dependency55 listenStates: (counterController) => [counterController.count],56 // Rebuilds whenever there are changes in the `count` state of the `CounterController` dependency57 builder: (context, counterController, child) {58 return Text("${counterController.count}");59 },60 ),61 const SizedBox(width: 8),62 ElevatedButton(63 onPressed: counterController.increment,64 child: const Icon(Icons.add),65 ),66 ],67 );68 },69 );70 }71}
15 collapsed lines
1import 'package:flutter/material.dart';2import 'counter_view.dart';3
4void main() {5 runApp(MyApp());6}7
8class MyApp extends StatelessWidget {9 @override10 Widget build(BuildContext context) {11 return MaterialApp(12 home: CounterView(),13 );14 }15}
In the example above, the ReactterConsumer
widget uses the id
property to locate the CounterController
dependency by the counter1
and counter2
identifiers.
Using child
The ReactterConsumer
widget can accept a child
property that is independent of the ReactterConsumer
widget.
It is useful when you want to provide a widget that does not rebuild when the dependency changes.
Here’s an example of how to use it:
14 collapsed lines
1import 'package:reactter/reactter.dart';2
3class CounterController {4 // Create a reactive state using the `Signal` class5 final count = Signal(0);6
7 void increment() {8 count.value++;9 }10
11 void decrement() {12 count.value--;13 }14}
25 collapsed lines
1import 'package:flutter/material.dart';2import 'package:flutter_reactter/flutter_reactter.dart';3import 'counter_controller.dart';4
5class CounterView extends StatelessWidget {6 const CounterView({Key? key}) : super(key: key);7
8 @override9 Widget build(BuildContext context) {10 // Provides the `CounterController` dependency to the widget tree11 return ReactterProvider<CounterController>(12 // Registers the `CounterController` dependency13 () => CounterController(),14 child: Scaffold(15 appBar: AppBar(16 title: const Text("Counter"),17 ),18 body: const Center(19 child: Counter(),20 ),21 ),22 );23 }24}25
26class Counter extends StatelessWidget {27 final String? id;28
29 const Counter({Key? key, this.id}) : super(key: key);30
31 Widget build(BuildContext context) {32 return ReactterConsumer<CounterController>(33 // Locates the `CounterController` dependency by its identifier34 id: id,35 builder: (context, counterController, child) {36 return Row(37 mainAxisAlignment: MainAxisAlignment.center,38 children: [39 ElevatedButton(40 onPressed: counterController.decrement,41 child: const Icon(Icons.remove),42 ),43 const SizedBox(width: 8),44 ReactterConsumer<CounterController>(45 // Locates the `CounterController` dependency by its identifier46 id: id,47 // Listens to the `count` state of the `CounterController` dependency48 listenStates: (counterController) => [counterController.count],49 // Passes the `child` widget to the `builder` function50 child: Text("Count[$id]: "),51 // Rebuilds whenever there are changes in the `count` state of the `CounterController` dependency52 builder: (context, counterController, child) {53 return Row(54 children: [55 child!,56 Text("${counterController.count}"),57 ],58 );59 },60 ),61 const SizedBox(width: 8),62 ElevatedButton(63 onPressed: counterController.increment,64 child: const Icon(Icons.add),65 ),66 ],67 );68 },69 );70 }71}
15 collapsed lines
1import 'package:flutter/material.dart';2import 'counter_view.dart';3
4void main() {5 runApp(MyApp());6}7
8class MyApp extends StatelessWidget {9 @override10 Widget build(BuildContext context) {11 return MaterialApp(12 home: CounterView(),13 );14 }15}
In the example above, the ReactterConsumer
widget uses the child
property to pass the Text
widget to the builder
function.