BLoC — mi ez, Business Logic Component a Flutterben

Mi az a BLoC?

BLoC (Business Logic Component) — architekturális minta Flutterhez, amelyben az üzleti logika egy külön osztályba van kiszervezve, elkülönítve az UI-tól. A BLoC bemeneti adatokat fogad az események adatfolyamán (Event) keresztül, és kimeneti adatokat állít elő az állapotok adatfolyamán (State) keresztül. A prezentációs réteg (Widget) csak feliratkozik a State adatfolyamra és megjeleníti az UI-t, soha nem hajt végre közvetlenül üzleti logikát.

A BLoC koncepció a reaktív programozáson és az Observer mintán alapul. Minden BLoC komponens egy külön modul, egyértelmű szerződéssel: ismert az Event halmaz (mi történhet) és a State halmaz (mi jeleníthető meg). A fejlesztő nem tud "véletlenül" állapotot változtatni az UI-ból — csak egy konkrét Event-en keresztül. Ez kiszámíthatóvá és tesztelhetővé teszi a kódot.

A Flutter Community 2025 felmérése szerint a BLoC a második helyen áll a népszerűségben a Flutter állapotkezelési megoldásai között a Provider után. Fő előnyök: szigorú típusosság, logika elkülönítése, beépített Stream támogatás, gazdag segédprogram ökoszisztéma (BlocProvider, BlocListener, BlocSelector).

BLoC architektúra: Event → Bloc → State

BLoC architektúra három entitás köré épül: Event (bemenet), Bloc (feldolgozó) és State (kimenet). A Widget az add() metóduson keresztül küldi el az Event-et. A Bloc az Event-et a mapEventToState vagy on<Event> metódusban fogadja, végrehajtja az üzleti logikát és új State-et állít elő a yield segítségével. A Widget a State-et a Stream-en keresztül kapja és újrarajzolódik.

abstract class CounterEvent {}

class Increment extends CounterEvent {}
class Decrement extends CounterEvent {}

class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0);

  @override
  Stream<int> mapEventToState(CounterEvent event) async* {
    if (event is Increment) {
      yield state + 1;
    } else if (event is Decrement) {
      yield state - 1;
    }
  }
}

Típusbiztonság: A Bloc két típussal van paraméterezve — Event és State. A Dart fordító ellenőrzi, hogy a Widget csak deklarált Event-eket hívjon, és a Bloc csak deklarált State-eket adjon vissza. Az "Ismeretlen Művelet" típusú futásidejű hibák ki vannak zárva.

Close és Dispose: A Bloc implementálja a Closeable interfészt. A widget megsemmisítésekor a Bloc automatikusan bezárja a Stream-et a close() metóduson keresztül. Reaktív feliratkozások szivárgása lehetetlen — a BlocProvider kezeli a Bloc életciklusát, egy útvonalhoz vagy oldalhoz kötve azt.

Bloc és Cubit: összehasonlítás

Cubit — a Bloc egyszerűsített implementációja Event nélkül, a flutter_bloc 6.0 csomagban bevezetve. A Cubit közvetlenül metódusokat deklarál az Event osztályok helyett: increment(), fetchData(). Belsőleg a Cubit ugyanazt a Stream-alapú mechanizmust használja, de elrejti az Event réteget. Ez 40-50%-kal csökkenti a boilerplate-ot egyszerű forgatókönyvek esetén.

Mikor válasszuk a Cubit-ot: állapot 2-3 változattal (loading, loaded, error), egyszerű űrlapok, számlálók, UI állapotok (nyitva/zárva). Mikor Bloc: összetett üzleti logika sok művelettel: rendelés leadása, hitelesítés, adatszinkronizáció. A Bloc részletes nyomonkövetést biztosít minden műveletről Event-en keresztül — minden hívás naplózásra kerül a BlocObserver-ben.

BlocObserver — globális megfigyelő, amely az összes Bloc-ot és Cubit-ot követi az alkalmazásban. Lehetővé teszi az Event, State, hibák és átmenetek naplózását. Elég egy példányt csatlakoztatni: Bloc.observer = AppBlocObserver(), és az alkalmazás állapotának teljes nyomonkövetése központilag elérhető.

BlocProvider és BlocBuilder

BlocProvider — InheritedWidget a flutter_bloc-ból, amely a Bloc-ot elérhetővé teszi a gyermek widgetek számára. A widget inicializálásakor a BlocProvider létrehoz egy Bloc-ot, és megsemmisítéskor automatikusan bezárja a close() segítségével. A BlocProvider elhelyezhető MaterialApp szinten (globális Bloc) vagy egy adott útvonal szintjén (lokális Bloc).

BlocProvider(
  create: (context) => CounterBloc(),
  child: Column(
    children: [
      BlocBuilder<CounterBloc, int>(
        builder: (context, state) => Text('$state'),
      ),
      ElevatedButton(
        onPressed: () => context.read<CounterBloc>().add(Increment()),
        child: Text('+'),
      ),
    ],
  ),
)

BlocBuilder — widget, amely minden új State-nél újraépíti az UI-t. BlocListener — mellékhatásokhoz (egyszeri State feldolgozás UI újraépítés nélkül): SnackBar megjelenítése, navigáció másik képernyőre. BlocConsumer — a Builder és Listener kombinációja olyan esetekre, amikor mind újraépítés, mind mellékhatás szükséges. BlocSelector — szelektív újraépítéshez csak a State egy adott mezőjének változásakor.

MultiBlocProvider — widget egymásba ágyazott BlocProvider-ekhez a beágyazási szint növelése nélkül. A 10-15 Bloc-ot használó Flutter alkalmazás a gyökér szinten használ MultiBlocProvider-et az összes, a teljes alkalmazás számára elérhető Bloc regisztrálásához: AuthenticationBloc, CartBloc, SettingsBloc.

BLoC tesztelése

A BLoC tesztelése elkülönítve történik, Flutter widgetek nélkül. Elég importálni a Dart flutter_test csomagot és a bloc_test csomagot. Teszt forgatókönyv: Bloc létrehozása, Event hozzáadása, State ellenőrzése. blocTest — segédprogram, amely automatizálja a build → act → expect sorozatot.

blocTest<CounterBloc, int>(
  'emits [1] when Increment is added',
  build: () => CounterBloc(),
  act: (bloc) => bloc.add(Increment()),
  expect: () => [1],
)

Mocking: A repository-tól vagy API-tól függő BLoC mock-okkal tesztelhető a mocktail segítségével. A repository absztrakciós szinten van mock-olva, a Bloc a mock-olt függőségeket a konstruktoron keresztül kapja. Hydrated Bloc — kiterjesztés az állapot automatikus mentéséhez/visszaállításához helyi tárolóban. HydratedBlocStorage-al és ideiglenes fájltárolóval tesztelhető.

BLoC éles használatban

Mappák és fájlok: egy BLoC-os Flutter projekt tipikus struktúrája: bloc/counter_bloc.dart, bloc/counter_event.dart, bloc/counter_state.dart. 30+ képernyő esetén funkcionalitás szerinti csoportosítás ajánlott: features/auth/bloc/, features/cart/bloc/. Minden Bloc külön fájl, minden Event és State — vagy külön fájlokban, vagy egy fájlban a Bloc-kal.

Teljesítmény: A BLoC nem hoz létre többletterhelést üres Stream-eken. A BlocBuilder a buildWhen segítségével szűri az újraépítéseket — a widget csak egy adott feltétel változásakor frissül. A Close garantálja, hogy az inaktív Bloc-ok nem fogyasztanak memóriát. A Flutter DevTools szerint a BLoC kevesebb mint 1%-ot ad hozzá a bundle méretéhez.

Migráció Provider-ről: A BLoC könnyen együtt él a Provider-rel ugyanabban a projektben. Fokozatos migráció: először a legösszetettebb Provider-ek kerülnek Bloc-ra cserélésre, majd a többiek. A BlocProvider kompatibilis a Provider fával: a régi widgetek használhatják a Provider-t, az újak — a BlocProvider-t, ugyanabban az alkalmazásban.