mobx_sample.dart

import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:mobx/mobx.dart';

part 'main.g.dart';

void main() => runApp(MyApp());

class CounterStore = CounterBase with _$CounterStore;

abstract class CounterBase with Store {

  @observable
  int counter = 0;

  @action
  increment() {
    counter++;
  }

  @action
  decrement() {
    counter--;
  }

}

final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final CounterStore _counter = CounterStore();

  final List<ReactionDisposer> disposers = [];

  void _showSnackBar(String message) {
    final snackbar = SnackBar(content: Text(message));

    _scaffoldKey.currentState.removeCurrentSnackBar();
    _scaffoldKey.currentState.showSnackBar(snackbar);
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();

    // [when] is executed only one time!
    disposers.add( when((_) => _counter.counter == 5, () {
      _showSnackBar('Counter reached 5');
    }));

    disposers.add(reaction((_) => _counter.counter == 10, (isCounterReachedTen) {
      if (isCounterReachedTen)
        _showSnackBar("[show if predicate return true] Counter reached 10");
    }));
  }

  @override
  void dispose() {
    disposers.forEach((disposer) => disposer());
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text("MobX Tests"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Observer(
              builder: (_) => Text(
                '${_counter.counter}',
                style: Theme.of(context).textTheme.display1,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          FloatingActionButton(
            onPressed: () => _counter.decrement(),
            tooltip: 'Decrement',
            child: Icon(Icons.remove),
          ),
          const SizedBox(width: 32),
          FloatingActionButton(
            onPressed: () => _counter.increment(),
            tooltip: 'Increment',
            child: Icon(Icons.add),
          )
        ],
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}