목차

Flutter Mobx

pubspec.yaml

dependencies:
  mobx: ^0.3.8
  flutter_mobx: ^0.3.3
  provider: ^3.1.0
 
dev_dependencies:
  build_runner: ^1.3.1
  mobx_codegen: ^0.3.9

명령어

flutter packages pub run build_runner build
flutter packages pub run build_runner watch

count_store.dart

import 'package:mobx/mobx.dart';

// Include generated file
part 'counter_store.g.dart';

// This is the class used by rest of your codebase
class CounterStore = _CounterStore with _$CounterStore;

// The store-class
abstract class _CounterStore with Store {
  @observable
  int value = 0;

  @action
  void increment() {
    value++;
  }
}

App

import 'store/counter_store.dart';
import 'store/search_store.dart';

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

class App extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
        providers: [
          Provider<CounterStore>(builder: (_) => CounterStore()),
          Provider<SearchStore>(builder: (_) => SearchStore()),
        ],
        child: MaterialApp(
          title: 'Flutter Demo',
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            primarySwatch: Colors.green,
            backgroundColor: Colors.grey,
          ),
          home: HomeScreen(),
          // home: SearchResultScreen(),
        ));
  }
}

Widget

final searchStore = Provider.of<SearchStore>(context);
 
Observer(
  builder: (context) => Text('${searchStore.state}'),
),
 
onPressed: () {
  searchStore.search('FIX ME!!!!');
},

Mobx Reaction

final List<ReactionDisposer> _disposers = [];
bool _pushed = false;
 
@override
void dispose() {
  _disposers.forEach((disposer) => disposer());
  super.dispose();
}
 
@override
void didChangeDependencies() {
  super.didChangeDependencies();
  searchStore = Provider.of<SearchStore>(context);
 
  _disposers.add(
    autorun(
      (_) {
        // print('${searchStore.state}');
      },
    ),
  );
 
  _disposers.add(
    reaction(
      (_) => searchStore.finished,
      (_) {
        print('## reaction called');
        if (_pushed == false) {
          _pushed = true;
          print('pushed is $_pushed');
          searchStore.setStateInit();
          Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) =>
                    SearchResultScreen(onWillPop: _onWillPop)),
          );
        }
      },
    ),
  );
}


관련 문서