mobx_provider

Additional package for Mobx, it allows you to bind your (viewmodels) mobx stores with UI more easily the package is inspired by filled stacks pattern view model provider.

Getting Started

NOTE : if you are not familiar with Mobx, take a look on it to see how you can use this package.

what's new in version 0.0.3

  • The packages now depends on the latest versions of mobx,flutter_mobx,provider see the change log for thier versions
  • Fix MobxStatefulProvider exception on dispose , Thanks to wbemanuel
  • change Provider.of(context) to Context.read()

Breaking Changes

  • in older versions (before 0.0.2) MobxStatefulProvider now changed to MobxStatefulObserver and MobxStatelessProvider now changed to MobxStatelessObserver with the same functionalities
  • in the new version (0.0.2) the MobxStatefulProvider widget is integration between Mobx and Provider package it contains Provider.of<T>(context) where T extends MobxBase , this widget exposes only the value of the store wihtout observing it
  • MobxWidgetProvider uses also Provider to get the value of the store and observe it in specific widget (see the example to have a better understanding)

1 - create you own store and make it extends MobxBase class and write your own logic

class CounterStore = _CounterStore with _$CounterStore;
abstract class _CounterStore extends MobxBase with Store {

  
  _CounterStore():_counter=0;
  @observable
  int _counter;

  int get counter => _counter;

  @action
  void increment() => _counter++;
  @override
  void dispose() {}
}

NOTE:

  • the class MobxBase contains a dispose function which should be implemented in your store .
  • additionally, it has some helper functions and states which indicates the state of your store whether it's loading ,error ,initial,success.

2- bind your logic with the UI like this

class CounterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MobxStatefulObserver<CounterStore>(
      store: CounterStore(),
      initFunction:(store){
        //do api calls here
        //store.fetchData();
      }
      builder: (context, store) {
        return Scaffold(
          floatingActionButton: FloatingActionButton(
            onPressed: store.increment,
          ),
          appBar: AppBar(
            title: Text('mobx provider example'),
          ),
          body: Center(
            child: Column(
              children: <Widget>[
                Text('counter value is ${store.counter}'),
              ],
            ),
          ),
        );
      },
    );
  }
}
  • MobxStatefulObserver is a stateful widget that takes a generic type which extends MobxBase .
  • it contains initFunction that's called in initState if you wanted to run some code when the widget is rendered for the first time
  • it'll call the dispose function when the widget it removed from the widget tree.

If you want to have more optimization when rendring the widget tree

  • you can use MobxStatefulProvider which exposes only the store from the provider package (donsn't observe any state)
  • use MobxWidgetProvider to observe the state of the store and only this widget will be rendered when the store changes
class CounterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MobxStatefulProviderr<CounterStore>(
      initFunction: (store){
        //do api calls here
        //store.fetchData();
      }
      builder: (context, store) {
        return Scaffold(
          floatingActionButton: FloatingActionButton(
            onPressed: store.increment,
          ),
          appBar: AppBar(
            title: Text('mobx provider example'),
          ),
          body: Center(
            child: Column(
              children: <Widget>[
               MobxWidgetProvider<CounterStore>(
                  builder:(context,store){
                    //this widget will only be rendered when the value changes
                    return Text('counter value is ${store.counter}');
                  }
               ) 
              ],
            ),
          ),
        );
      },
    );
  }
}

if you have any suggestions or improvments please let me know .

Libraries

counter_store
counter_widget
mobx_provider