ReactterSelector
Esta página aún no está disponible en tu idioma.
The ReactterSelector
widget is an similarly to ReactterConsumer
. It obtains the dependency provided by the closest ReactterProvider
widget and allows you to select a specific value from the state to rebuild the widget tree when the value changes.
Syntax
ReactterSelector<T, V>({ Key? key, String? id, Widget? child, required V selector( T instance, ReactterState select(ReactterState state), ), required Widget builder( BuildContext context, T instance, V value, Widget? child, ),})
Properties
key
: An optionalKey
to use for identifying the widget.id
: An optionalString
to identify the selector.child
: An optionalWidget
which is independent of theReactterSelector
. If defined, it is passed to thebuilder
function.-
selector
: A function that computes a valueV
from one or more states and listens for changes to rebuild the widget tree when the value changes. It receives the following arguments:instance
: The instance ofT
dependency provided by the closestReactterProvider
widget.select
: A function that allows you to wrap the state to be listened for changes and returns it.
-
builder
: A function that builds a widget depending on theReactterSelector
. It receives the following arguments:context
: TheBuildContext
of the widget. A handle to the location ofReactterSelector
in the widget tree.instance
: The instance ofT
dependency provided by the closestReactterProvider
widget.value
: The selected value computedV
by theselector
function.child
: Thechild
widget passed to theReactterSelector
widget.
Usage
Basic Usage
In the following example, we have a simple counter application that uses the ReactterSelector
widget to select a specific value from the state to rebuild the widget tree when the value changes.
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: 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) {4 collapsed lines
29 // Obtains the `CounterController` dependency30 // provided by the closest `ReactterProvider` widget31 final counterController = context.use<CounterController>();32
33 return Column(34 children: [24 collapsed lines
35 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 // Listens the `CounterController`44 // and rebuilds the widget tree when it changes45 ReactterConsumer<CounterController>(46 listenAll: true,47 builder: (context, counterController, child) {48 return Text("${counterController.count}");49 },50 ),51 const SizedBox(width: 8),52 ElevatedButton(53 onPressed: counterController.increment,54 child: const Icon(Icons.add),55 ),56 ],57 ),58 const SizedBox(height: 8),59 // Selects the `count` state from the `CounterController`,60 // calculates if the `count` is divided by 361 // and rebuilds the widget tree when the value(`isDividedBy3`) changes62 ReactterSelector<CounterController, bool>(63 selector: (counterController, select) {64 return select(counterController.count).value % 3 == 0;65 },66 builder: (context, counterController, isDividedBy3, child) {67 return Text(68 isDividedBy3 ? "Divided by 3" : "Not divided by 3",69 );70 },71 ),72 ],73 );74 }75}