Rxflutterify_binding

A library built on top of Flutter that allows all widgets to automatically rebuild when their input streams emit events, making state management easier and more efficient.

Motivations

As app developers, we often gather requirements from customers, which include various scenarios and designs. Our job is to bring these visions to life through code. The typical workflow involves:

Analyzing Scenarios: Understanding the requirements and how the application should behave.
Sketching Components with Dummy Data: Creating initial UI components using placeholder data to visualize the layout and functionality.
Binding Data to Fit Scenarios: Connecting our UI components to real data sources to make them dynamic.

Simplifying Data Binding with Streams

With rxflutterify_binding, the data binding process becomes significantly easier and more time-saving by leveraging streams. By simply adding a $ in front of your Flutter widgets, you can effortlessly bind them to streams, allowing for automatic updates whenever new data is emitted.

Disclaimer: this package is a part of my flutter_clone project. Feel free to explore it if you're interested in creating exceptional packages on top of Flutter.

Here's a quick example:

Assume that we had a Text widget in the sketch,

Text('A string');

Change it into $Text widget

// Assume that we had a variable called stringStream as type Stream<String>;
$Text($.all, 'A string'.bind(#data, stringStream));

More detail in Usage section.

Features

Automatic widget rebuilding based on input stream events
Seamless integration with RxDart for reactive programming
Simplified state management compared to traditional Flutter approaches
Supports both stateful and stateless widgets
Lightweight and easy to integrate into existing Flutter projects

Installation

Add the package to your pubspec.yaml file:

dependencies:
  rxflutterify_binding: ^0.0.1

If the latest version of this package is incompatible with your Flutter version, please refer to the Version Mapping section below. There, you'll find instructions on how to use a specific version that matches your Flutter environment.

You can specify a compatible version using the ref parameter in your pubspec.yaml file. For example:

dependencies:
  rxflutterify_binding:
    git:
      url: https://github.com/haitr/flutter_clone.git
      path: packages/rxflutterify_binding
      ref: rxflutterify_binding/v0.0.1

Version Compatibility

pub	ref (verison)	ref (Flutter version)	Flutter version
0.0.1	rxflutterify_binding/v0.0.1	rxflutterify_binding/flutter/v3.22	3.22.x
0.0.2	rxflutterify_binding/v0.0.2	rxflutterify_binding/flutter/v3.24	3.24.x

Usage

Find more examples in the examples directory.

The rxflutterify_binding package simplifies the process of binding Streams to Flutter Widgets. By calling the bind method to bind any argument to a Stream, you can easily make them reactive.

Quick start

In order to make a Widget reactive:

Add a $ prefix to the Widget name.
Add the react-type parameter as the first argument.

react-type	description
`$.all`	react on every emitted event
`$.none`	skip all events

Currently, only $.all and $.none is supported; additional types will be added later.

Bind arguments with corresponding Stream: To bind any argument to a Stream, utilize the bind method, where the first parameter is a Symbol that represents the name of the corresponding parameter. For example:

Text('a string'.bind(#data, stringStream));

Container(color: Colors.blue.bind(#color, colorStream));

Note: bind method only run while declaring widget, not in build phase.

Assuming that there was a Text or a Column in your sketch:

Text(
  'Hello, World!',
  style: TextStyle(fontSize: 20),
)

Column(
  children: [/* ... */],
  mainAxisAlignment: MainAxisAlignment.center,
)

As reactive:

$Text(
  $.all,
  'Hello, World!'.bind(#data, greetingStream), 
  style: TextStyle(fontSize: 20).bind(#style, textStyleStream),
)

In the Text widget, there is a positional String parameter called data, so we need to use #data for the input stream.

$Column(
  $.all,
  mainAxisAlignment: MainAxisAlignment.center.bind(
    #mainAxisAlignment,
    alignmentStream,
  ),
  children: [/* ... */],
)

To make a custom widget reactive, enclose it within a Wrapper and ensure proper argument mapping. Be sure to place an instance of $ as the first parameter of the constructor.

For example:

class MyWidget extends StatelessWidget {
  final String? field1;
  final int field2;
  MyWidget({
    super.key,
    this.field1,
    required this.field2,
  });
  // ...
}

class $MyWidget extends MyWidget {
  const $MyWidget(
    $ $config, {
    super.key,
    super.field1,
    required super.field2,
  });

  @override
  Widget build(BuildContext context) {
    return Wrapper(
        Argument({
          #field1: field1,
          #field2: field2,
        }),
        builder: (args) => MyWidget(
              field1: args(#field1),
              field2: args(#field2),
            ));
  }
}

More detail in custom widget.

Note: in order to make a stream easier:

Stream<String> stringStream = 'init text'.react;

Dev Note: Despite using rxdart, it is significantly easier to manage Stream operations with various Stream operators, you also craft your own Dart Stream.

Example