A provider architecture az amit a Google IO 19 ajanl Flutter ala, igy most ezt is megtanuljuk egyszeruen.
A Google amugy elkezdett egy sajat Provide package gyartasaba, de a Provider annyira jo lett, hogy felkaroltak es a sajatjukat nem is hasznaljak (community edition) Legalabbis a videoban ez hangzik el:D

Rogton a video:

Es akkor egy kis sajat szosszenet.

A Flutter provider package-rol lesz szo: https://pub.dev/packages/provider

Mi a franc ez?:D Egy otvozet a dependency injection es az allapotkezeles kozott, widgetektol widgeteknek!

Kezdjunk is kodolasnak!

Berdobjuk pubspec.yaml-be a:

provider: ^4.0.1

-t majd get

main.dart-ba ez lesz:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_provider_sample/counter.dart';
import 'package:flutter_provider_sample/counter_page.dart';
import 'package:provider/provider.dart';


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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => Counter()),
      ],
      child: Consumer<Counter>(
        builder: (context, counter, _) {
          return MaterialApp(
            home: const CounterPage(),
          );
        },
      ),
    );
  }
}

A szokasos kis counter appunkon mutatjuk be hogyan csinaljak ezt a providernel a nagyok. MyApp root widgetunk van, szokasos... Az elso widget egy Multiprovider widget (ellato/biztosito) lesz, amiben felsorolhatjuk milyen providereket hasznalunk es melyik class-al (celszeru rogton multival kezdeni nagy appoknal). Itt most csak egy Counter osztalyt, amit majd kesobb definialunk a counter.dart file-ban.

ChangeNotifierProvider: egy widget, ami biztosit egy peldanyt a ChangeNotifier osztalybol a leszarmazottainak. Mellesleg eleg okos hozza, hogy csak akkor buildelje ujra az osztalyt, ha abszolut szukseges. Plusz automatikus kezeli a dispose-t/destroy-at az osztalynak, ha mar nem kell.

Tobb infora nem terek most ki, olvashato ezen a linken:  https://pub.dev/packages/provider#-readme-tab-

Consumer: (fogyaszto) -ba kerul maga az a resz, amivel mar hasznalni is tudjuk a biztositott peldanyt.

Es akkor jojjenek a belso osztalyok (counter.dart):

import 'package:flutter/widgets.dart';

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }

  void decrement() 
    _count--;
    notifyListeners();
  }
}

A Counter ugye a ChangeNotifierProvider build-jeben kerul be a kepbe, ezert a with keyworddel meghivjuk ra a ChangeNotifier -t. (with-rol olvashatsz a neten meg a mixin keyword-ekrol)

Az osztaly ugy gondolom egyertelmu. van egy _count valtozoja, ami privat es egy getter-e, amivel lekerjuk.
Van dec/inc method-ja. Ami utana hivasra kerul az az erdekesebb: notifyListeners();

Ez rogton erdekes lehet azoknak, akik nativ androidoztak mar, a listanal kell ott hasonlokeppen meghivni, ha tortent valtozas. Ez siman egy listener/observer pattern, ami kb egy event, ami kozli, hogy valtozas tortent.

Observer/listenerbe most nem mennek bele melyebben, eleg ennyit tudni most errol.

counter_page.dart:

class CounterPage extends StatelessWidget {
  const CounterPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: null,
      body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const CounterLabel(),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  const DecrementCounterButton(),
                  const IncrementCounterButton(),
                ],
              ),
            ],
          )),
    );
  }
}

class DecrementCounterButton extends StatelessWidget {
  const DecrementCounterButton({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      onPressed: () => Provider.of<Counter>(context, listen: false).decrement(),
      tooltip: 'Decrement',
      child: const Icon(Icons.remove),
    );
  }
}

class IncrementCounterButton extends StatelessWidget {
  const IncrementCounterButton({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      onPressed: () => Provider.of<Counter>(context, listen: false).increment(),
      tooltip: 'Increment',
      child: const Icon(Icons.add),
    );
  }
}

class CounterLabel extends StatelessWidget {
  const CounterLabel({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);
    return Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        const Text('You have pushed the button this many times:'),
        Text('${counter.count}', style: Theme.of(context).textTheme.display1),
      ],
    );
  }
}

Tehat egy CounterPage osztaly lesz benne, a megjelenito reteg. Mindent kirakott emberunk widget-be kulon osztalyba, es a konstruktorjait const-al ellatta, igyis hivja meg oket.

Miert?

Hat hogy ne kelljen mindig mindent ujrabuildelni, optimalizalas. Viszont a dinamikus tartalom valtozik az observer miatt. Vagyis csak az a widget fog ujrabuildelodni, ami valtozik.

     onPressed: () => Provider.of<Counter>(context, listen: false).decrement(),

Provider-ben levo Counter osztalyra hivatkozunk es a funklciot meghivjuk (amit akarunk).

    final counter = Provider.of<Counter>(context);

itt pedig siman listenelunk ra. Mivel alapbol a listen = true.

ENNYI.