RxDart untuk ... proyek terkecil

Kemarin, teman baik saya mengatakan sesuatu seperti "Saya sedang menulis aplikasi offline sederhana, saya tidak membutuhkan semua aliran dan aliran ini." Saya bahkan terkejut, dan kemudian saya berpikir bahwa pembuat enkode lain dapat berbagi kesalahan ini.

Di bawah ini, secara harfiah dalam 50 baris, saya akan menunjukkan dengan contoh terkenal bahwa reaktivitas

a) ini bukan tentang offline / online
b) sangat sederhana
c) sangat bagus untuk menyederhanakan hampir semua kode

Untuk kritik saya yang tergesa-gesa
yang bergegas ke pertempuran tanpa berpikir, mengingat BlocProvider adalah penyedia , saya sarankan untuk pengembangan umum untuk membaca terlebih dahulu artikel dasar , tautan yang ada di halaman flutter_bloc, pada baris pertama deskripsi.

Contoh terkenal "Penghitung" yang dihasilkan saat membuat proyek Flutter adalah anak lelaki cambuk Titik awal yang baik untuk menunjukkan banyak praktik.
Jadi, ini berisi MyHomePage extends StatefulWidget , metode _incrementCounter untuk perintah kenaikan dan setState untuk menggambar ulang seluruh hierarki widget.

Kami memperkenalkan reaktivitas menggunakan perpustakaan rxdart dan beberapa langkah sederhana:

Tambahkan perpustakaan ke pubspec.yaml

 dependencies: ... rxdart: 0.22.2 

Ubah arsitektur penghitung dan tambahkan acara

 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); 

Mari kita buat kelas StatelessWidget

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

Bungkus widget tampilan di StreamBuilder dan ubah panggilan ke metode kenaikan

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

Itu saja. Ini benar-benar terlihat seperti ini

 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. ); } } 

Sekarang kodenya reaktif, ringkas, bebas dari gambar ulang yang tidak perlu, dan mudah diperluas.
Misalnya, jika pada saat mengubah penghitung Anda perlu mengubah teks widget lain, lakukan saja ini:

  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:', // ), 

dan voila!

Sebagai perbandingan, coba lakukan hal yang sama dengan InheritedWidget, atau pola lain.

Jadi, semoga, saya menunjukkan itu

• Reaktivitas sangat sederhana. BlocProvider , BlocProvider , dll yang lebih mudah.
• Reaktivitas bukan tentang offline / online. Dia tentang arsitektur. Seperti yang telah saya tunjukkan, dalam kasus paling sederhana Anda bahkan tidak perlu menambahkan kelas tambahan untuk menerapkannya.
• Reaktivitas adalah UI yang responsif, perluasan fungsionalitas yang cepat, pemisahan kode yang anggun menjadi beberapa jenis lapisan: MVC, MVP, MVI, MVVM, apa pun yang Anda inginkan.

Kode contoh (cabang iter_0004_rxdart )

Diedit satu jam kemudian
Sia-sia melakukannya terlalu sederhana, mendapat klik untuk "variabel global" dan pemahaman yang salah tentang inisialisasi BehaviorSubject , diperbaiki