Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/emanuel-braz/mobx_widget
A simple way to consume MobX Observables through widgets. You can find a sort of widgets, like ObserverFuture, ObserverStream and ObserverText
https://github.com/emanuel-braz/mobx_widget
Last synced: 8 days ago
JSON representation
A simple way to consume MobX Observables through widgets. You can find a sort of widgets, like ObserverFuture, ObserverStream and ObserverText
- Host: GitHub
- URL: https://github.com/emanuel-braz/mobx_widget
- Owner: emanuel-braz
- License: bsd-3-clause
- Created: 2020-03-22T16:48:25.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-09-11T01:06:11.000Z (about 3 years ago)
- Last Synced: 2023-08-20T22:33:25.715Z (about 1 year ago)
- Language: Dart
- Homepage:
- Size: 146 KB
- Stars: 7
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://pub.dev/packages/mobx_widget) 
### ObserverFuture, ObserverStream and ObserverText Widget - A simple way to consume MobX Observables through widgets. You can find a sort of widgets.
### Example usage
`flutter pub add mobx_widget`
```yaml
dependencies:
mobx_widget: ^0.5.1
```
#### Import package and use Observer Widgets
```dart
import 'package:mobx_widget/mobx_widget.dart';
```
#### Animated Transitions for Observable Text Widget (ObserverText)
```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,
)
```
#### ObservableFuture (ObserverFuture) - Generic types is optional(required both if used)
```dart
ObserverFuture( // 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'),
)
```
#### ObservableStream (ObserverStream)
```dart
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()),
),
```
#### Text Widget (ObserverText)
```dart
ObserverText(
onData: (_) => myStore.text,
// style: Theme.of(context).textTheme.bodyText1,
)
```
#### Customize the ObserverFuture widget behavior just once and use it in the entire application.
```dart
MyCustomObserverFutureWidget(
observableFuture: () => myStore.observableFuture,
onData: (_, data) => Text('😍'),
)
```
```dart
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,)
);
}
}
```
### All widgets has an optional transition prorpety
#### Contributions of any kind are welcome! 👾
### TODO
- [x] add example
- [x] add animated transitions
- [ ] add unit test
- [ ] add widget test
- [ ] add more widgets