-
-
Notifications
You must be signed in to change notification settings - Fork 310
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
38be286
commit 116c3be
Showing
12 changed files
with
176 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
File renamed without changes.
File renamed without changes.
2 changes: 1 addition & 1 deletion
2
docs/src/components/Sponsor.tsx → docs/src/components/home/Sponsor.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
docs/src/components/Testimonial.tsx → docs/src/components/home/Testimonial.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
## The Classic Counter, in MobX | ||
|
||
The code below has an `observable` that tracks the count, increments using the | ||
`increment` action and renders with an `Observer` widget (the `reaction`). | ||
|
||
```dart | ||
import 'package:flutter/material.dart'; | ||
import 'package:flutter_mobx/flutter_mobx.dart'; | ||
import 'package:mobx/mobx.dart'; | ||
class SimpleCounter { | ||
final count = Observable(0); | ||
void increment() { | ||
runInAction(() => count.value++); | ||
} | ||
} | ||
class CounterView extends StatefulWidget { | ||
const CounterView({Key? key}) : super(key: key); | ||
@override | ||
CounterExampleState createState() => CounterExampleState(); | ||
} | ||
class CounterExampleState extends State<CounterView> { | ||
final SimpleCounter counter = SimpleCounter(); | ||
@override | ||
Widget build(BuildContext context) => Scaffold( | ||
appBar: AppBar( | ||
backgroundColor: Colors.blue, | ||
title: const Text('MobX Counter'), | ||
), | ||
body: Center( | ||
child: Column( | ||
mainAxisAlignment: MainAxisAlignment.center, | ||
children: <Widget>[ | ||
const Text( | ||
'You have pushed the button this many times:', | ||
), | ||
Observer( | ||
builder: (_) => Text( | ||
'${counter.count.value}', | ||
style: const TextStyle(fontSize: 40), | ||
)), | ||
], | ||
), | ||
), | ||
floatingActionButton: FloatingActionButton( | ||
onPressed: counter.increment, | ||
tooltip: 'Increment', | ||
child: const Icon(Icons.add), | ||
), | ||
); | ||
} | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
import 'package:flutter/material.dart'; | ||
import 'package:flutter_mobx/flutter_mobx.dart'; | ||
import 'package:mobx/mobx.dart'; | ||
|
||
class SimpleCounter { | ||
// highlight-start | ||
// Step 1 | ||
// ====== | ||
// Setup the observable state. | ||
// In this case its a simple count as an integer. | ||
final count = Observable(0); | ||
// highlight-end | ||
|
||
// highlight-start | ||
// Step 2 | ||
// ====== | ||
// Setup the action to increment the count | ||
void increment() { | ||
runInAction(() => count.value++); | ||
} | ||
// highlight-end | ||
} | ||
|
||
class CounterView extends StatefulWidget { | ||
const CounterView({Key? key}) : super(key: key); | ||
|
||
@override | ||
CounterExampleState createState() => CounterExampleState(); | ||
} | ||
|
||
class CounterExampleState extends State<CounterView> { | ||
final SimpleCounter counter = SimpleCounter(); | ||
|
||
@override | ||
Widget build(BuildContext context) => Scaffold( | ||
appBar: AppBar( | ||
backgroundColor: Colors.blue, | ||
title: const Text('MobX Counter'), | ||
), | ||
body: Center( | ||
child: Column( | ||
mainAxisAlignment: MainAxisAlignment.center, | ||
children: <Widget>[ | ||
const Text( | ||
'You have pushed the button this many times:', | ||
), | ||
// highlight-start | ||
// Step 3 | ||
// ====== | ||
// Display the count using the Observer (a reaction) | ||
Observer( | ||
builder: (_) => Text( | ||
'${counter.count.value}', | ||
style: const TextStyle(fontSize: 40), | ||
)), | ||
// highlight-end | ||
], | ||
), | ||
), | ||
floatingActionButton: FloatingActionButton( | ||
onPressed: counter.increment, | ||
tooltip: 'Increment', | ||
child: const Icon(Icons.add), | ||
), | ||
); | ||
} |