https://github.com/csells/mobx_fun
Playing around with the DevX of MobX for FunX.
https://github.com/csells/mobx_fun
Last synced: 3 months ago
JSON representation
Playing around with the DevX of MobX for FunX.
- Host: GitHub
- URL: https://github.com/csells/mobx_fun
- Owner: csells
- License: bsd-3-clause
- Created: 2019-06-23T19:31:47.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-02-23T01:17:38.000Z (about 3 years ago)
- Last Synced: 2024-12-31T20:16:31.985Z (4 months ago)
- Language: Dart
- Size: 67.4 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# mobx_fun
This project is just me playing around with [mobX for Flutter](https://pub.dev/packages/flutter_mobx). I implemented a simple provider/consumer and reimplemented some of the samples from [mobx.pub](https://mobx.pub). Mostly this is to see how far I can push the usability of mobx, because in general it's PFM!
## Providers, Consumers and Prosumers, oh my!
Another thing that [the mobx samples](https://mobx.pub/examples/todos) do is pass around data via global variables or as ctor args, neither are best practices. I'm also a big fan of [Provider](https://pub.dev/packages/provider), which allows you to drop a hunk of data into the tree in one spot and grab it from wherever else you want it. In mobx, there is no such facility; instead you drop an Observer into the tree and if you happen to be using an observable, the right thing happens, but it provides no facility for looking up something further up the tree (not that mobx allows you to put anything into the tree anyway...). So, inspired by Provider, I built a simple Provider/Consumer for mobx.
To put something into the tree looks like this:
```dart
class HomePage extends StatelessWidget {
final todoList = TodoList();
@override
Widget build(BuildContext context) => Scaffold(body:
// add the data into the tree via the Provider
Provider(value: todoList, child: TodoExample())
);
}
}
```
Pulling it back out again happens via the Consumer:
```dart
class Description extends StatelessWidget {
@override
// use the Consumer to grab the data out of the tree
Widget build(BuildContext context) => Consumer(
builder: (_, list) => Padding(
padding: EdgeInsets.all(8),
child: Text(
list.itemsDescription,
style: TextStyle(fontWeight: FontWeight.bold),
),
),
);
}
```
Like Provider, this simple Provider/Consumer implementation uses InheritedWidget, which provides type-based scoping of data, which is why you need to pass the type you want to find in the tree. As part of the builder, you give it a name and use it like any other variable. The magic is that the Consumer drops a mobx Observer into the tree, too, so as you update the data, it keeps the widgets that use it up to date. PFM!
Now, in the case that you want to drop something from a list into the tree and then use it right away, e.g. as you're building a ListView, you may find yourself using a Provider immediate following by a Consumer, e.g.
```dart
ListView.builder(
itemCount: list.visibleTodos.length,
// Using Provider + Consumer at the same time manually
itemBuilder: (_, index) => Provider(
value: list.visibleTodos[index],
child: Consumer(
builder: (_, todo) => CheckboxListTile(
value: todo.done,
onChanged: (done) => todo.done = done,
...
```
Here we're pulling a specific Todo item out of the TodoList using the ListView builder's index, then immediately using it via a Consumer. For this case, I've invented the 'Prosumer':
```dart
ListView.builder(
itemCount: list.visibleTodos.length,
// Using Provider + Consumer at the same time automatically
itemBuilder: (_, index) => Prosumer(
list.visibleTodos[index],
builder: (_, todo) => CheckboxListTile(
value: todo.done,
onChanged: (done) => todo.done = done,
...
```
Under the hood, it's just a Provider + a Consumer, but this syntax pulls one level out of the tree you're writing, which always makes me happy...