mobx_widget 0.1.3

  • Readme
  • Changelog
  • Example
  • Installing
  • new50

Pub Version PRs Welcome

A simple way to consume MobX Observables through widgets. You can find a sort of widgets, like ObserverFuture, ObserverStream and ObserverText #

Example usage #

add dependency to pubspec.yaml

  mobx_widget:
    git: https://github.com/emanuel-braz/mobx_widget.git

OR

  dependencies:
    mobx_widget: ^0.1.3

Import package and use Observer Widgets

import 'package:mobx_widget/mobx_widget.dart';

ObservableFuture (ObserverFuture)

ObserverFuture(
  observableFuture: () => myStore.myObservableFuture,
  onData: (_, data) => MyCustomDataWidget(data: data),
  onNull: (_) => Center(child: Text('Oops! No connection.')),
  onPending: (_) => CircularProgressIndicator(),
  onError: (_, error) => MyCustomErrorReloaderWidget(error),
);

ObservableStream (ObserverStream)

ObserverStream(
  observableStream: () => myObservableStream,
  onData: (_, data) => Text('$data'),
  onNull: (_) => Text('NULL'),
  onUnstarted: (_) => Text('UNSTARTED'),
  onError: (_, error) => Text('ERROR: ' + error.toString())
)

Text Widget (ObserverText)

ObserverText(onData: (_) => myStore.text)

Contributions of any kind are welcome! 👾

TODO #

  • [x] add example
  • [ ] add unit test
  • [ ] add widget test
  • [ ] add more widgets

[0.0.1] - Initial commit #

[0.1.0] - First release #

[0.1.1] - Example included #

  • add example

[0.1.2] - Bugfix #

  • Only shows default reloader if there is callback and buttonText values

[0.1.3] - Add new widget #

  • Added ObserverText widget

example/lib/main.dart

import 'package:example/my_store.dart';
import 'package:flutter/material.dart';
import 'package:mobx_widget/mobx_widget.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MobX Widget Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'MobX Widget Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  MyStore myStore;

  @override
  void initState() {
    super.initState();
    myStore = MyStore();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        alignment: Alignment.center,
        child: DefaultTextStyle(
          textAlign: TextAlign.center,
          style: TextStyle(fontSize: 20, color: Colors.blue),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Container(
                  alignment: Alignment.center, 
                  child: Text(
                    'ObservableStream > ',
                    style: Theme.of(context).textTheme.headline5,
                  )),
              ObserverStream( // Use this widget to handle ObservableStream events
                observableStream: () => myStore.observableStream,
                onData: (_, data) => Text('$data'),
                onNull: (_) => Text('NULL'),
                onUnstarted: (_) => Text('UNSTARTED'),
                onError: (context, error) => Text('error: ' + error.toString()),
              ), 
              SizedBox(
                height: 16,
              ),
              Container(
                  alignment: Alignment.center,
                  child: Text(
                    'ObservableFuture > ',
                    style: Theme.of(context).textTheme.headline5,
                  )),
              ObserverFuture( // Use this widget to handle ObservableFuture events
                observableFuture: () => myStore.observableFuture,
                onData: (_, data) => Text(data.toString()),
                onNull: (_) => Text('NULL'),
                onError: (context, error) => Text('error: ${error.toString()}'),
                onPending: (context) => CircularProgressIndicator(),
                onUnstarted: (context) => Text('UNSTARTED'),
              ),
              SizedBox(
                height: 16,
              ),
              ObserverText(onData: (_) => myStore.text)
            ],
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    myStore.dispose();
    super.dispose();
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  mobx_widget: ^0.1.3

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

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

3. Import it

Now in your Dart code, you can use:


import 'package:mobx_widget/mobx_widget.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
0
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]
50
Learn more about scoring.

We analyzed this package on Mar 31, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
flutter_mobx ^1.0.1 1.1.0
mobx ^1.0.1 1.1.1
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
build_runner ^1.0.0
flutter_test
mobx_codegen ^1.0.1