[상태관리#5] mobX

마지막으로 다소 생소한 상태관리 mobx이다.

 

이거는 할까말까 고민했는데 flutter favorite을 받았길래 한번 다뤄보긴해야겠다싶어 하게 되었다.

 

코드는 아래와 같다.

import 'package:mobx/mobx.dart';

part 'controller.g.dart';

class Counter = CounterBase with _$Counter;

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

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

  void decrement() {
    value--;
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:shw_test/components/button.dart';
import 'package:shw_test/mobx/controller.dart';

class MobxScreen extends ConsumerWidget {
  const MobxScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final counter = Counter();
    return Scaffold(
      appBar: AppBar(
        title: const Text("Counter"),
      ),
      body: Center(
        child: Column(
          children: [
            Observer(
              builder: (_) => Text(
                counter.value.toString(),
                style: const TextStyle(fontSize: 50),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Button(
                  text: "+",
                  fontSize: 30,
                  onPressed: () {
                    counter.increment();
                  },
                ),
                const SizedBox(
                  width: 20,
                ),
                Button(
                  text: "-",
                  fontSize: 30,
                  onPressed: () {
                    counter.decrement();
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

 

보면 알겠지만 mobx는 코드 제너레이터가 있다.

간단한 편이긴한데 개인적인 취향은 코드 제너레이터는 최소화하고 싶은편이라 썩 끌리는 상태관리는 아니였다