The ValueNotifier é uma forma simples e nativa de reatividade do Flutter. Esta extension visa aplicar de forma transparente a functional reactive programming (TFRP).
Add in pubspec.yaml:
dependencies:
rx_notifier: <version>
Está extensão acrescenta uma classe RxNotifier e um conversor ValueNotifier -> RxNotifier para que possa ser observado de forma transparente pela função rxObserver() e pelo Widget RxBuilder.
O RxNotifier é diretamente uma extensão de ValueListenable então qualquer objeto que o implemente pode ser convertido para RxNotifier
A única diferença do RxNofifier para o ValueNotifier é a função de assinatura automática nos Observadores rxObserver() e RxBuilder, muito semelhante as reactions do MobX.
Para começar instancie um RxNofifier.
final counter = RxNotifier<int>(0);
ou converta um ValueNotifier já existente usando o método .rx():
final counter = myValueNotifierCounter.rx();
IMPORTANT: O método rx() foi adicionado ao ValueNotifier usando Extension Methods.
Atribuímos um novo valor:
final counter = RxNotifier<int>(0);
increment(){
counter.value++;
}
E escutamos as alterações usando o rxObserver:
RxDisposer disposer = rxObserver((){
print(counter.value);
});
disposer();
Ou escutamos na árvore de Widget usando o RxBuilder:
Widget builder(BuildContext context){
return RxBuilder(
builder: (_) => Text('${counter.value}'),
);
}
Esse é o uso transparente de reatividade individual, porém podemos também combinar RxNotifier Objects produzindo um novo valor. Essa técnica se chama Computed
Para combinar dois ou mais RxNotifier Objects precisamos usar um getter retornando um novo valor combinado:
final num1 = RxNotifier<int>(1);
final num2 = RxNotifier<int>(2);
String get result => 'num1: ${num1.value} + num2: ${num2.value} = ${num1.value + num2.value}';
...
rxObserver((){
print(result); // print´s "num1: 1 + num2: 2 = 3
});
IMPORTANT: É realmente necessário que os computed sejam Getters e não atribuições. A reação acontecerá quando qualquer um dos RxNotifier modificar o valor.
Podemos também usar getters nos valores reativos tornando, vamos repetir o exemplo acima:
final _num1 = RxNotifier<int>(1);
int get num1 => _num1.value;
final _num2 = RxNotifier<int>(2);
int get num2 => _num2.value;
String get result => 'num1: $num1 + num2: $num2 = ${num1 + num2}';
...
rxObserver((){
print(result); // print´s "num1: 1 + num2: 2 = 3
});
Tanto o rxObserver quanto o RxBuilder tem a propriedade filter que é uma função que retorna um bool. Use isso para definir quando(ou não) refletir as alterações:
Widget builder(BuildContext context){
return RxBuilder(
filter: () => counter.value < 10,
builder: (_) => Text('${counter.value}'),
);
}
O functional_listener adiciona map, where, listen, debounce, combineLatest e várias outras funções para o ValueNotifier. Muito obrigado Thomas Burkhart por isso!!!
Please send feature requests and bugs at the issue tracker.
This README was created based on templates made available by Stagehand under a BSD-style license.