RxDart para los más pequeños ... proyectos

Ayer, mi buen amigo dijo algo como "Estoy escribiendo una aplicación simple fuera de línea, no necesito todas estas transmisiones y transmisiones". Incluso me sorprendió, y luego pensé que otros codificadores podrían compartir este error.

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

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

A mis apresurados críticos
que se apresuran a la batalla sin pensar, considerando que BlocProvider es un proveedor , recomiendo para el desarrollo general que lea primero el artículo básico , un enlace al que se encuentra en la página flutter_bloc, en la primera línea de la descripción.

El conocido ejemplo "Contador" que se genera al crear un proyecto Flutter es chico de azotes Un buen punto de partida para demostrar muchas prácticas.
Por lo tanto, contiene MyHomePage extends StatefulWidget , el método _incrementCounter para el comando de incremento y setState para volver a dibujar toda la jerarquía de widgets.

Introducimos la reactividad usando la biblioteca rxdart y algunos pasos simples:

Agregue la biblioteca a pubspec.yaml

 dependencies: ... rxdart: 0.22.2 

Cambiar la arquitectura del contador y agregar evento

 class _Counter { int _count; int get count => _count; _Counter(this._count) : this.onCounterUpd = BehaviorSubject<int>.seeded(_count); ///  . final BehaviorSubject<int> onCounterUpd; ///     ,   . Future incrementCounter() async { onCounterUpd.add(++_count); } } final _counter = _Counter(5); 

Hagamos que la clase StatelessWidget

 ///   " " class MyHomeRxPage extends StatelessWidget { final title; /// ! -     const MyHomeRxPage({Key key, this.title}) : super(key: key); ... 

Envuelva el widget de visualización en StreamBuilder y cambie la llamada al método 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 Se ve totalmente 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); ///  . final BehaviorSubject<int> onCounterUpd; ///     ,   . 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( // Here we take the value from the MyHomePage object that was created by // the App.build method, and use it to set our appbar title. title: Text(title), ), body: Center( // Center is a layout widget. It takes a single child and positions it // in the middle of the parent. child: Column( // Column is also a layout widget. It takes a list of children and // arranges them vertically. By default, it sizes itself to fit its // children horizontally, and tries to be as tall as its parent. // // Invoke "debug painting" (press "p" in the console, choose the // "Toggle Debug Paint" action from the Flutter Inspector in Android // Studio, or the "Toggle Debug Paint" command in Visual Studio Code) // to see the wireframe for each widget. // // Column has various properties to control how it sizes itself and // how it positions its children. Here we use mainAxisAlignment to // center the children vertically; the main axis here is the vertical // axis because Columns are vertical (the cross axis would be // horizontal). 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:', // ), /// 6. 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), ), // This trailing comma makes auto-formatting nicer for build methods. ); } } 

Ahora el código es reactivo, conciso, libre de redibujos innecesarios y fácilmente extensible.
Por ejemplo, si en el momento de cambiar el contador necesita cambiar el texto de otro widget, simplemente haga esto:

  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!

A modo de comparación, intente hacer lo mismo con InheritedWidget u otro patrón.

Entonces, con suerte, mostré que

• La reactividad es muy simple. BlocProvider InheritedWidgets mucho más fáciles, BlocProvider , etc.
• La reactividad no se trata fuera de línea / en línea. Ella es sobre arquitectura. Como he mostrado, en los casos más simples ni siquiera necesita agregar clases adicionales para aplicarlo.
• La reactividad es UI receptiva, extensión rápida de funcionalidad, separación elegante de código en capas de cualquier tipo: MVC, MVP, MVI, MVVM, lo que quieras.

Código de ejemplo (rama iter_0004_rxdart )

Editado una hora después
En vano lo hizo demasiado simple, obtuve clics para "variables globales" y una comprensión errónea de BehaviorSubject inicialización de BehaviorSubject , corregido