Comience a usar ReactiveX en dardo y Flutter desde el principio

Ayer mi amigo dijo algo así como "Estoy escribiendo una aplicación simple fuera de línea, no necesito estas transmisiones y todo ese jazz". Estaba confundido, pero pensé que podría haber otros codificadores en este engaño.

A continuación, literalmente en 50 líneas, mostraré, en un ejemplo conocido, que la reactividad es:

a) no se trata de fuera de línea / en línea
b) muy fácil
c) muy bueno para simplificar casi cualquier código

Para mis críticos apresurados ,
que se apresuran a la batalla sin mirar atrás, suponiendo que BlocProvider es un proveedor , recomendé leer primero el artículo básico para el desarrollo general. La referencia a un artículo está en la página de flutter_bloc , en la primera línea de la descripción.

Un ejemplo bien conocido para todos es "Un contador", que se genera cuando se crea el proyecto Flutter, es el buen punto de partida para demostrar muchas prácticas. Por lo tanto, contiene MyHomePage extends StatefulWidget , método _incrementCounter para el comando de incremento y setState para volver a dibujar toda la jerarquía de widgets.

rxdart la reactividad con la ayuda de la biblioteca rxdart y algunos pasos sencillos:

Agreguemos una biblioteca en pubspec.yaml

 dependencies: ... rxdart: 0.22.2 

Cambiemos la arquitectura de un contador y agreguemos un evento

 class _Counter { int _count; int get count => _count; _Counter(this._count) : this.onCounterUpd = BehaviorSubject<int>.seeded(_count); /// Here is the event. final BehaviorSubject<int> onCounterUpd; /// Increment now fires an event. Future incrementCounter() async { onCounterUpd.add(++_count); } } final _counter = _Counter(5); 

Hagamos la clase StatelessWidget

 class MyHomeRxPage extends StatelessWidget { final title; /// ! Look it can be constant one now. const MyHomeRxPage({Key key, this.title}) : super(key: key); ... 

Terminemos un widget en un StreamBuilder y cambiemos el método de una llamada de incremento.

  StreamBuilder<int>( stream: _counter.onCounterUpd, builder: (context, snapshot) { return Text( '${snapshot.data}', style: Theme.of(context).textTheme.display1, ); }), ... floatingActionButton: FloatingActionButton( onPressed: _counter.incrementCounter, ... 

Eso es todo En su totalidad se ve así:

 import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; import 'package:rxdart/rxdart.dart'; class _Counter { int _count; int get count => _count; _Counter(this._count) : this.onCounterUpd = BehaviorSubject<int>.seeded(_count); /// event final BehaviorSubject<int> onCounterUpd; /// fire an event Future incrementCounter() async { onCounterUpd.add(++_count); } } final _counter = _Counter(5); class MyHomeRxPage extends StatelessWidget { final title; const MyHomeRxPage({Key key, this.title}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ StreamBuilder<int>( stream: _counter.onCounterUpd, builder: (context, snapshot) { return Text( 'You have pushed the button ${snapshot.data} times:', ); }), // Text( // 'You have pushed the button this many times:', // ), StreamBuilder<int>( stream: _counter.onCounterUpd, builder: (context, snapshot) { return Text( '${snapshot.data}', style: Theme.of(context).textTheme.display1, ); }), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _counter.incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ), // ); } } 

Ahora el código es reactivo, lacónico, libre de redibujos innecesarios y fácilmente extensible. Por ejemplo, si es necesario cambiar el texto de otro widget, cuando el contador está cambiando, es suficiente hacer lo siguiente:

  StreamBuilder<int>( stream: onCounterUpd, builder: (context, snapshot) { return Text( 'You have pushed the button ${snapshot.data} times:', ); }), // Text( // 'You have pushed the button this many times:', // ), 

y voila!

Para comparar, intente hacer esto con InheritedWidget o con otro patrón.

Entonces, espero, demostré que

• La reactividad es muy fácil. Mucho más fácil que InheritedWidgets , BlocProvider , etc.
• La reactividad no se trata de fuera de línea / en línea. Se trata de arquitectura. En algún caso simple, incluso no debe ingresar clases adicionales para usarlo.
• La reactividad es una interfaz de usuario comprensiva, una rápida ampliación funcional, elegante división de código en capas de todo tipo: MVC, MVP, MVI, MVVM, MVU , lo que quieras.

→ Código: (rama iter_0004_rxdart )

Buena suerte en la codificación.