rx_widgets 2.0.1

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 92

rx_widgets

rx_widgets is a package with stream based Flutter Widgets and Widget helper/convenience classes that facilitate an reactive programming style especially in combination with RxDart and RxCommands.

If you have any ideas for additional stream based Widget, open an issue PRs are always welcome ;-)

Getting Started

Add to your pubspec.yaml dependencies to rx_widgets

Available Classes

RxSpinner

Spinner/Busy indicator that reacts on the output of a Stream<bool> it starts running as soon as a true value is received until the next falseis emitted. If the Spinner should replace another Widget while Spinning this widget can be passed as normal parameter. RxSpinner also adapts to the current or specified platform look. Needless to say that RxSpinner is ideal in combination with RxCommand's isExecuting Observable

  /// Creates a new RxSpinner instance
  /// `busyEvents` : `Stream<bool>` that controls the activity of the Spinner. On receiving `true` it replaces the `normal` widget 
  ///  and starts running undtil it receives a `false`value.
  /// `platform`  : defines platorm style of the Spinner. If this is null or not provided the style of the current platform will be used
  /// `radius`    : radius of the Spinner  
  /// `normal`    : Widget that should be displayed while the Spinner is not active. If this is null a `Container` will be created instead.
  ///  all other parameters please see https://docs.flutter.io/flutter/material/CircularProgressIndicator-class.html 
  ///  they are ignored if the platform style is iOS.
  const RxSpinner({this.busyEvents, 
                  this.platform, 
                  this.radius = 20.0,  
                  this.backgroundColor,
                  this.value,
                  this.valueColor,
                  this.strokeWidth: 4.0,
                  this.normal, 
                  Key key }) 
          :  assert(busyEvents != null), super(key: key);

RxLoader

RxSpinner is great for simple Applications where you just want to show or hide a Spinner. But often especially when loading data you want to deal with errors and show an alternative Widget if no data arrived. Since RxCommand offers not only three separate Observables for state changes and results but is also an Observable<CommandResult<T> itself that emits CommandResult that bundle all state and data in one Object RxLoaderleverage this to support the Flutter update mechanic better.

/// Creates a new `RxLoader` instance
/// [busyEvents] : `Stream<bool>` that controls the activity of the Spinner. On receiving `true` it replaces the `normal` widget 
///  and starts running undtil it receives a `false`value.
/// [platform]  : defines platorm style of the Spinner. If this is null or not provided the style of the current platform will be used
/// [radius]    : radius of the Spinner  
/// [dataBuilder] : Builder that will be called as soon as an event with data is received. It will get passed the `data` feeld of the CommandResult.
/// If this is null a `Container` will be created instead.
/// [placeHolderBuilder] : Builder that will be called as soon as an event with `data==null` is received. 
/// If this is null a `Container` will be created instead.
/// [dataBuilder] : Builder that will be called as soon as an event with an `error` is received. It will get passed the `error` feeld of the CommandResult.
/// If this is null a `Container` will be created instead.
///  all other parameters please see https://docs.flutter.io/flutter/material/CircularProgressIndicator-class.html 
///  they are ignored if the platform style is iOS.
const RxLoader({this.commandResults, 
                this.platform, 
                this.radius = 20.0,  
                this.backgroundColor,
                this.value,
                this.valueColor,
                this.strokeWidth: 4.0,
                this.dataBuilder, 
                this.placeHolderBuilder, 
                this.errorBuilder,
                Key key }) 
        :  assert(commandResults != null), super(key: key);

WidgetSelector

WidgetSelectoris a convenience class that will return one of two Widgets based on the output of a Stream<bool> This is pretty handy if you want to react to state change like enable/disable in you ViewModel and update the View accordingly.

If you don't need builders for the alternative child widgets this class offers a more concise expression than WidgetBuilderSelector

  /// Creates a new WidgetSelector instance
  /// `buildEvents` : `Stream<bool>`that signals that the this Widget should be updated
  /// `onTrue` : Widget that should be returned if an item with value true is received
  /// `onFalse`: Widget that should be returned if an item with value true is received
  const WidgetSelector({this.buildEvents,  this.onTrue,  this.onFalse, Key key }) 
          :   assert(buildEvents != null),assert(onTrue != null), 
              assert(onFalse != null), super(key: key);

This is an example where it is used to enable/disable a Button

new WidgetSelector(buildEvents: TheViewModel.of(context).updateWeatherCommand.canExecute, 
    onTrue:  new RaisedButton(                               
                    child: new Text("Update"), 
                    color: new Color.fromARGB(255, 33, 150, 243),
                    textColor: new Color.fromARGB(255, 255, 255, 255),
                    onPressed: TheViewModel.of(context).updateWeatherCommand,
                    ),
    onFalse:  new RaisedButton(                               
                    child: new Text("Update"), 
                    color: new Color.fromARGB(255, 33, 150, 243),
                    textColor: new Color.fromARGB(255, 255, 255, 255),
                    onPressed: null,
                    ),
            
        ),

WidgetBuilderSelector

Like WidgetSelector but instead return Widgets it executes one of two provided builder functions. In comparison to WidgetSelector this is best used if the alternative child widgets are large so that you don't want to have them always created without using them.

/// Creates a new WidgetBuilderSelector instance
/// `buildEvents` : `Stream<bool>`that signals that the this Widget should be updated
/// `onTrue` : builder that should be executed if an item with value true is received
/// `onFalse`: builder that should be executed if an item with value true is received
const WidgetBuilderSelector({this.buildEvents,  this.onTrue,  this.onFalse, Key key }) 
        :  assert(buildEvents != null),assert(onTrue != null), assert(onFalse != null), super(key: key);

RxCommandBuilder

If you are working with RxCommands this is a special Builder that lets you define different builder for the different states an RxCommand can issue. If you don't specify one of the builders it will create a Container for that state.

/// Creates a new `RxCommandBuilder` instance
/// [commandResults] : `Stream<CommandResult<T>>` or a `RxCommand<T>` that issues `CommandResults`
/// [busyBuilder] : Builder that will be called as soon as an event with `isExecuting==true`.
/// [dataBuilder] : Builder that will be called as soon as an event with data is received. It will get passed the `data` feeld of the CommandResult.
/// If this is null a `Container` will be created instead.
/// [placeHolderBuilder] : Builder that will be called as soon as an event with `data==null` is received. 
/// If this is null a `Container` will be created instead.
/// [dataBuilder] : Builder that will be called as soon as an event with an `error` is received. It will get passed the `error` feeld of the CommandResult.
/// If this is null a `Container` will be created instead.
const RxCommandBuilder({Key key,
                this.commandResults, 
                this.platform, 
                this.radius = 20.0,  
                this.backgroundColor,
                this.value,
                this.valueColor,
                this.strokeWidth: 4.0,
                this.busyBuilder,
                this.dataBuilder, 
                this.placeHolderBuilder, 
                this.errorBuilder,
                }) 
        :  assert(commandResults != null), super(key: key);

[2.0.1] - 07.9.2018

  • Updated to RxCommand 4.0.1

[2.0.0] - 07.9.2018

  • Updated to RxCommand 3.0.0

[1.0.4] - 31.7.2018

  • Updated to RxCommand 2.0.3

[1.0.3] - 23.4.2018

  • Updated to RxCommand 1.0.8

[1.0.2] - 23.4.2018

  • Added RxCommandBuilder.

[1.0.1] - 18.4.2018

  • Added RxLoader.

[1.0.0] - 11.4.2018

  • Initial release.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:rx_widget_demo/homepage/homepage.dart';
import 'package:rx_widget_demo/homepage/homepage_model.dart';
import 'package:rx_widget_demo/model_provider.dart';
import 'package:rx_widget_demo/service/weather_service.dart';
import 'package:http/http.dart' as http;

void main() {
  final weatherService = new WeatherService(new http.Client());
  final homePageModel = new HomePageModel(weatherService);

  runApp(new MyApp(
    model: homePageModel,
  ));
}

class MyApp extends StatelessWidget {
  final HomePageModel model;

  const MyApp({Key key, this.model}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new ModelProvider(
      model: model,
      child: new MaterialApp(
        title: 'Flutter Demo',
        theme: new ThemeData.dark().copyWith(
          disabledColor: Colors.white12,
          primaryColor: new Color(0xFF1C262A),
          buttonColor: new Color(0xFF1C262A),
          accentColor: new Color(0xFFA7D9D5),
          scaffoldBackgroundColor: new Color.fromRGBO(38, 50, 56, 1.0),
        ),
        home: new HomePage(),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  rx_widgets: ^2.0.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:rx_widgets/rx_widgets.dart';
  
Version Uploaded Documentation Archive
2.0.1 Oct 17, 2018 Go to the documentation of rx_widgets 2.0.1 Download rx_widgets 2.0.1 archive
2.0.0 Sep 7, 2018 Go to the documentation of rx_widgets 2.0.0 Download rx_widgets 2.0.0 archive
1.0.4 Jul 31, 2018 Go to the documentation of rx_widgets 1.0.4 Download rx_widgets 1.0.4 archive
1.0.3 Apr 25, 2018 Go to the documentation of rx_widgets 1.0.3 Download rx_widgets 1.0.3 archive
1.0.2 Apr 23, 2018 Go to the documentation of rx_widgets 1.0.2 Download rx_widgets 1.0.2 archive
1.0.1 Apr 18, 2018 Go to the documentation of rx_widgets 1.0.1 Download rx_widgets 1.0.1 archive
1.0.0 Apr 11, 2018 Go to the documentation of rx_widgets 1.0.0 Download rx_widgets 1.0.0 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
83
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
92
Learn more about scoring.

We analyzed this package on Oct 17, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0
  • pana: 0.12.4
  • Flutter: 0.9.5

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Format lib/src/rx_spinner.dart.

Run flutter format to format lib/src/rx_spinner.dart.

Format lib/src/widget_selector.dart.

Run flutter format to format lib/src/widget_selector.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev <3.0.0
flutter 0.0.0
rx_command ^4.0.1 4.0.1
Transitive dependencies
collection 1.14.11
json_annotation 1.2.0
meta 1.1.6
quiver_hashcode 2.0.0
rxdart 0.19.0
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test