Morioh
Login
Zack Jackson

Zack Jackson

4 years ago

In this video, I will explain how to use RxDart and it’s operators. We will also learn about StreamBuilder, StreamController, and StreamTransformer in this video.

RxDart

About

RxDart adds additional capabilities to Dart Streams and StreamControllers.

Dart comes with a very decent Streams API out-of-the-box; rather than attempting to provide an alternative to this API, RxDart adds functionality from the reactive extensions specification on top of it.

RxDart does not provide its own Observable class as a replacement for Dart Streams. Rather, it provides a number of additional Stream classes, operators (extension methods on the Stream class), and Subjects.

If you are familiar with Observables from other languages, please see the Rx Observables vs Dart Streams comparison chart for notable distinctions between the two.

Upgrading from RxDart 0.22.x to 0.23.x

RxDart 0.23.x moves away from the Observable class, utilizing Dart 2.6’s new extension methods instead. This requires several small refactors that can be easily automated – which is just what we’ve done!

Please follow the instructions on the rxdart_codemod package to automatically upgrade your code to support RxDart 0.23.x.

How To Use RxDart

For Example: Reading the Konami Code

import 'package:rxdart/rxdart.dart';

void main() {
  const konamiKeyCodes = const <int>[
    KeyCode.UP,
    KeyCode.UP,
    KeyCode.DOWN,
    KeyCode.DOWN,
    KeyCode.LEFT,
    KeyCode.RIGHT,
    KeyCode.LEFT,
    KeyCode.RIGHT,
    KeyCode.B,
    KeyCode.A,
  ];
  final result = querySelector('#result');

  document.onKeyUp
    .map((event) => event.keyCode)
    .bufferCount(10, 1) // An extension method provided by rxdart
    .where((lastTenKeyCodes) => const IterableEquality<int>().equals(lastTenKeyCodes, konamiKeyCodes))
    .listen((_) => result.innerHtml = 'KONAMI!');
}

API Overview

RxDart adds functionality to Dart Streams in three ways:

  • Stream Classes - create Streams with specific capabilities, such as combining or merging many Streams together.
  • Extension Methods - transform a source Stream into a new Stream with different capabilities, such as throttling or buffering events.
  • Subjects - StreamControllers with additional powers

Stream Classes

The Stream class provides different ways to create a Stream: Stream.fromIterable or Stream.periodic, for example. RxDart provides additional Stream classes for a variety of tasks, such as combining or merging Streams together!

You can construct the Streams provided by RxDart in two ways. The following examples are equivalent in terms of functionality:

  • Instantiating the Stream class directly.
    • Example: final mergedStream = MergeStream([myFirstStream, mySecondStream]);
  • Using static factories from the Rx class, which are useful for discovering which types of Streams are provided by RxDart. Under the hood, these factories simply call the the corresponding Stream constructor.
    • Example: final mergedStream = Rx.merge([myFirstStream, mySecondStream]);

List of Classes

Extension Methods

The extension methods provided by RxDart can be used on any Stream. They convert a source Stream into a new Stream with additional capabilities, such as buffering or throttling events.

Example

Stream.fromIterable([1, 2, 3])
  .throttleTime(Duration(seconds: 1))
  .listen(print); // prints 3

List of Extension Methods

Subjects

Dart provides the StreamController class to create and manage a Stream. RxDart offers two additional StreamControllers with additional capabilities, known as Subjects:

  • BehaviorSubject - A broadcast StreamController that caches the latest added value or error. When a new listener subscribes to the Stream, the latest value or error will be emitted to the listener. Furthermore, you can synchronously read the last emitted value.
  • ReplaySubject - A broadcast StreamController that caches the added values. When a new listener subscribes to the Stream, the cached values will be emitted to the listener.

Rx Observables vs Dart Streams

In many situations, Streams and Observables work the same way. However, if you’re used to standard Rx Observables, some features of the Stream api may surprise you. We’ve included a table below to help folks understand the differences.

Additional information about the following situations can be found by reading the Rx class documentation.
RxDart

Examples

Web and command-line examples can be found in the example folder.

Web Examples

In order to run the web examples, please follow these steps:

  1. Clone this repo and enter the directory
  2. Run pub get
  3. Run pub run build_runner serve example
  4. Navigate to http://localhost:8080/web/ in your browser

Command Line Examples

In order to run the command line example, please follow these steps:

  1. Clone this repo and enter the directory
  2. Run pub get
  3. Run dart example/example.dart 10

Flutter Example

Install Flutter

In order to run the flutter example, you must have Flutter installed. For installation instructions, view the online documentation.

Run the app

  1. Open up an Android Emulator, the iOS Simulator, or connect an appropriate mobile device for debugging.
  2. Open up a terminal
  3. cd into the example/flutter/github_search directory
  4. Run flutter doctor to ensure you have all Flutter dependencies working.
  5. Run flutter packages get
  6. Run flutter run

Notable References

Changelog

Refer to the Changelog to get all release notes.

#flutter #dart #mobileapps #webdev

RxDart Explained - The Flutter Way

youtube.com

RxDart Explained - The Flutter Way

In this Flutter tutorial, I will explain how to use RxDart and it's operators. We will also learn about StreamBuilder, StreamController, and StreamTransformer in this RxDart Explained.

34.15 GEEK