ObserverFuture, ObserverStream and ObserverText Widget - A simple way to consume MobX Observables through widgets. You can find a sort of widgets.
flutter pub add mobx_widget
dependencies:
mobx_widget: ^0.5.1
import 'package:mobx_widget/mobx_widget.dart';
ObserverText(
transition: Transition( // Trasition is optional
transition: TransitionType.fade,
duration: Duration(seconds: 1),
curveIn: Curves.linear,
curveOut: Curves.linear,
),
onData: (_) => '${myStore.currentStatus}',
// style: Theme.of(context).textTheme.bodyText1,
)
ObserverFuture<String, Exception>( // Use this widget to handle ObservableFuture events
retry: 2, // It will retry 2 times after the first error event
autoInitialize: false, // If true, it will call [fetchData] automatically
fetchData: myStore.fetch, // VoidCallback
observableFuture: () => myStore.observableFuture,
onData: (_, data) => Text('DATA: $data'),
onNull: (_) => Text('NULL'),
onError: (_, error) => Text('${error.toString()}'),
onPending: (_) => Text('PENDING'),
onUnstarted: (_) => Text('UNSTARTED'),
)
ObserverStream( // Use this widget to handle ObservableStream events
observableStream: () => myStore.observableStream,
onData: (_, data) => Text('DATA: $data'),
onNull: (_) => Text('NULL'),
onUnstarted: (_) => Text('UNSTARTED'),
onError: (_, error) => Text('ERROR: ' + error.toString()),
),
ObserverText(
onData: (_) => myStore.text,
// style: Theme.of(context).textTheme.bodyText1,
)
MyCustomObserverFutureWidget(
observableFuture: () => myStore.observableFuture,
onData: (_, data) => Text('😍'),
)
class MyCustomObserverFutureWidget extends StatelessWidget {
final ObservableFuture Function() observableFuture;
final Function(BuildContext context, dynamic data) onData;
MyCustomObserverFutureWidget({Key key, this.observableFuture, this.onData}) : super(key: key);
@override
Widget build(BuildContext context) {
return ObserverFuture(
observableFuture: observableFuture,
onData: onData,
onNull: (_) => Text('🤔'),
onError: (_, error) => Text('😥'),
onUnstarted: (_) => Text('😐'),
onPending: (_)=> Text('👂👂👂'),
showDefaultProgressInOverlay: true,
overlayWidget: Container(color:Colors.black45, child: Text('👀💬', style: TextStyle(fontSize: 40),), alignment: Alignment.center,)
);
}
}
- add example
- add animated transitions
- add unit test
- add widget test
- add more widgets