【Flutter】mobxでアーキテクチャを強力に

mobxとは

mobxは、Dart言語およびFlutterアプリケーションにおける状態管理ライブラリです。
mobxは、アプリケーションのリアクティブデータをUIに自動的に接続し、UIとデータの同期を簡単に行うことができます。

mobx | Dart package

MobX is a library for reactively managing the state of your applications. Use the power of observables, actions, and rea...

pub.dev

使い方

インストール

dependencies:
  mobx: ^2.3.3+2
  flutter_mobx: ^2.0.5
  build_runner: ^2.1.5
  mobx_codegen: ^2.0.4

Observableの作成

Observablesはアプリケーションのリアクティブな状態を表します。シンプルなカウンターの例を以下に示します。

import 'package:mobx/mobx.dart';

final counter = Observable(0);

クラスを使ったより複雑なObservableの例です。

import 'package:mobx/mobx.dart';

part 'counter.g.dart';

class Counter = CounterBase with _$Counter;

abstract class CounterBase with Store {
  @observable
  int value = 0;

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

Computed Observables

計算されたObservableは、他のObservableに基づいて自動的に計算される状態です。

import 'package:mobx/mobx.dart';

part 'contact.g.dart';

class Contact = ContactBase with _$Contact;

abstract class ContactBase with Store {
  @observable
  String firstName;

  @observable
  String lastName;

  @computed
  String get fullName => '$firstName $lastName';
}

Actions

ActionsはObservablesを変更するための方法です。例えば、カウンターの値を増やすアクションは以下のように定義します。

import 'package:mobx/mobx.dart';

part 'counter.g.dart';

class Counter = CounterBase with _$Counter;

abstract class CounterBase with Store {
  @observable
  int value = 0;

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

Reactions

ReactionsはObservablesの変更を監視し、それに応じて何らかの処理を行います。

import 'package:mobx/mobx.dart';

final greeting = Observable('Hello World');

final dispose = autorun((_){
  print(greeting.value);
});

greeting.value = 'Hello MobX';

// Reactionを終了
dispose();

Flutterでの利用

Flutterアプリケーションでmobxを利用する場合、Observerウィジェットを使用してUIを更新します。以下は、カウンターアプリケーションの完全な例です。

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

part 'counter.g.dart';

class Counter = CounterBase with _$Counter;

abstract class CounterBase with Store {
  @observable
  int value = 0;

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

class CounterExample extends StatefulWidget {
  const CounterExample({Key? key}) : super(key: key);

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

class _CounterExampleState extends State<CounterExample> {
  final _counter = Counter();

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: const Text('Counter'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                'You have pushed the button this many times:',
              ),
              Observer(
                builder: (_) => Text(
                  '${_counter.value}',
                  style: const TextStyle(fontSize: 20),
                ),
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _counter.increment,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ),
      );
}