Ok, Flutterezem egy ideje, kb 5 honapja, de az akkori projectet meg egyszeru MVC stilusban irtam sajat szabalyokkal. Persze mai fejjel mar lehet jobb lett volna mas szabalyokat felallitani.

Ezekre a megoldasokra keresek valaszt ebben es a kovetkezo blog posztban.

Most a MobX-rol lesz szo, ami dart ala egy allapot kezelo cucc (state management) atlathato reaktiv programozassal. A reaktiv progrmozasrol most nem beszelek, utana lehet ennek nezni.

A MobX Obszervereket, Akciokat es Reakciokat (bocs a magyarert) kulonit el, de angolul talan erdemesebb rola olvasni. (https://github.com/mobxjs/mobx.dart)

Keszitsunk Flutterbol (Android Studio) egy uj Flutter projectet. Neve legyen MobX Teszt.

A pubspec.yaml dependency-kbe masoljuk be ezeket, majd nyomjunk ra egy PACKAGES GET-et:

mobx: ^0.3.9
 flutter_mobx: ^0.3.0
 mobx_codegen: ^0.3.10
 provider: ^3.0.0
 json_serializable: ^3.0.0

dev_dependencies:
 build_runner: any

Kedvenc kis counter programunkat fogjuk lekodolni, ami az alap flutter app keszitesnel is elkeszul, csakhogy MobX formaban.

Ehhez a main file tartalma ez legyen:

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

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

Eddig ugye semmi kulonost nem latunk, a CounterExample class meg nincs letrehozva, a MyApp widget class pedig a gyokere lesz az appunknak.

A build_runner -t azert toltottuk le a repobol, mert bizony majd buildelnunk kell a MobX generated filejait on the fly, amikor egy MobX class elkeszult, eztaltal MobX baratunk a boilerplate kodot elrejti egy valami.g.dart fileba.

A mobx_codegen pedig a MobX classokbol general .g.dart filet.

Csinalunk egy counter.dart filet. Aminek a tartalma lesz a Counter class.

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++;
  }

  @action
  void decrement() {
    value--;
  }
}

En az eredeti appot kiegeszitettem egy decrement-el, igy 2 gomb lesz az appunkban, egy ami noveli, egy ami csokkenti az erteket a valtozonak.

A MobX package-et fogjuk hasznalni ugye.

Observable es Action annotaciok jelkepezik ugye az erteket/tulajdonsagot es az akciot, amit esetleg muvelunk.
Counter classunk pedig az abstract Base class-bol ered.
Termeszetesen az Akciok async-ok is lehetnek, ha pl fetch-elni akarunk kozben vmit, varakozni ra.

@action
Future<void> loadStuff() async {
  loading = true; //This notifies observers
  stuff = await fetchStuff();
  loading = false; //This also notifies observers
}

De most maradjunk a Counter peldanknal...

Terminalba beirjuk az alabbit:

flutter packages pub run build_runner build

Ezutan letrejon jobb esetben a counter.g.dart file (part resz)

Igazsag szerint nekem ez a resz nem tetszik leginkabb, de mint megtudtam ezt automatara is rakhatjuk egy scriptbe Android Studio alatt BUILD elott... Fene sem akar minden egy MobX class irasa/valtoztatasa utan buildelni manualisan.

Hianyzik meg a CounterExample class ami egy Widget lesz (ugye flutterben minden IS az)

counter_page.dart filet letrehozol (ez lehet counter_widget.dart is vagy counter_component.dart is rad bizom a nevet)

Tartalma pedig:

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

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

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

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

Termeszetesen az importokat alt+enterrel importoljuk. Mint lathato ez egy sima Widget, ami kirajzol 2 gombot meg egy text-et. A text tartalma egy Observer widgetbol jon, ha valtozik a _counter erteke.

A 2 gomb pedig siman noveli es csokkenti az erteket es ekkor meghivodik a state change.

POZITIVUM:
- elkulonitett kod
- nincs szenakazal
- annotaciok
- Observer widget, nice

NEGATIVUM:
- manualis build minden egyes update-kor
- a build time is idobe kerul
- .g file-ok mutatasa Android Studio alatt (talan ezt is be lehet allitani, hogy tuntesse el)

Maradjatok velem, kovetkezo cikkben a BloC-t hasznalom!:)