mobx - 기본구성

MobX

플러터에서 상태관리를 위해 mobx 를 사용합니다.(다른것을 사용할 수도 있습니다)

• https://mobx.pub/getting-started

MobX 관련 패키지 추가

pubspec.yaml

dependencies:

  ...

  provider: ^3.1.0+1
  mobx: ^0.3.9+1
  flutter_mobx: ^0.3.3+1

...

dev_dependencies:

  ...

  build_runner: ^1.7.2
  mobx_codegen: ^0.3.10

store 파일 생성

lib/store/counter_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++;
  }
}

build run

커맨드창에서 실행하면 counter_store.g.dart  파일이 생성됩니다.

flutter packages pub run build_runner build

store 생성 & provider로 전달

import 'package:flutter/material.dart';
import 'package:mart_firebase/screen/home_screen.dart';
import 'package:mart_firebase/store/counter_store.dart';
import 'package:provider/provider.dart';

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

class MyApp 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(),
        ));
  }
}

store 사용

import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:mart_firebase/store/counter_store.dart';
import 'package:provider/provider.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  CounterStore _counterStore;   // <--- 클래스 변수 선언

  void _increment() {
    _counterStore.incrementTimes(2);
  }

  @override
  Widget build(BuildContext context) {
    _counterStore = Provider.of<CounterStore>(context);  // <--- 스토어 할당

    return Scaffold(
        appBar: AppBar(
          title: Text('main screen'),
        ),
        body: Column(
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                _counterStore.increment();   // <--- 스토어 액션 호출
              },
              child: Text('Increase', style: TextStyle(fontSize: 20)),
            ),
            RaisedButton(
              onPressed: _increment,
              child: Text('increment * 2'),
            ),
            Observer(
              builder: (context) => Text('${_counterStore.value}'),  // <--- 스토어 값 사용
            )
          ],
        ));
  }
}