BLoC — यह क्या है, Flutter में Business Logic Component

BLoC क्या है?

BLoC (Business Logic Component) — Flutter के लिए एक आर्किटेक्चरल पैटर्न जिसमें व्यावसायिक तर्क को UI से अलग एक अलग क्लास में निकाला जाता है। BLoC इवेंट्स की स्ट्रीम (Event) के माध्यम से इनपुट डेटा प्राप्त करता है और स्टेट्स की स्ट्रीम (State) के माध्यम से आउटपुट डेटा उत्पन्न करता है। प्रस्तुति परत (Widget) केवल State स्ट्रीम की सदस्यता लेती है और UI प्रस्तुत करती है, कभी भी सीधे व्यावसायिक तर्क निष्पादित नहीं करती।

BLoC अवधारणा रिएक्टिव प्रोग्रामिंग और Observer पैटर्न पर आधारित है। प्रत्येक BLoC घटक एक स्पष्ट अनुबंध के साथ एक अलग मॉड्यूल है: Events का ज्ञात सेट (क्या हो सकता है) और States का ज्ञात सेट (क्या प्रदर्शित किया जा सकता है)। डेवलपर UI से "गलती से" स्थिति नहीं बदल सकता — केवल एक विशिष्ट Event के माध्यम से। यह कोड को पूर्वानुमानित और परीक्षण योग्य बनाता है।

Flutter Community 2025 सर्वेक्षण के अनुसार, Provider के बाद Flutter में स्टेट मैनेजमेंट समाधानों में BLoC दूसरे स्थान पर है। मुख्य लाभ: स्ट्रॉन्ग टाइपिंग, तर्क पृथक्करण, अंतर्निहित Stream समर्थन, उपयोगिताओं का समृद्ध पारिस्थितिकी तंत्र (BlocProvider, BlocListener, BlocSelector)।

BLoC आर्किटेक्चर: Event → Bloc → State

BLoC आर्किटेक्चर तीन संस्थाओं के आसपास बनाया गया है: Event (इनपुट), Bloc (हैंडलर) और State (आउटपुट)। Widget add() विधि के माध्यम से Event भेजता है। Bloc mapEventToState या on<Event> विधि में Event प्राप्त करता है, व्यावसायिक तर्क निष्पादित करता है और yield के माध्यम से एक नया State उत्सर्जित करता है। Widget Stream के माध्यम से State प्राप्त करता है और पुनर्निर्माण करता है।

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

टाइप सुरक्षा: Bloc दो प्रकारों — Event और State — के साथ पैरामीटराइज़ किया गया है। Dart कंपाइलर जाँचता है कि Widget केवल घोषित Events को कॉल करता है और Bloc केवल घोषित States को लौटाता है। "अज्ञात कार्रवाई" जैसी रनटाइम त्रुटियाँ समाप्त हो जाती हैं।

Close और Dispose: Bloc Closeable इंटरफ़ेस लागू करता है। जब कोई विजेट नष्ट होता है, Bloc स्वचालित रूप से close() विधि के माध्यम से Stream को बंद करता है। रिएक्टिव सब्सक्रिप्शन लीक असंभव हैं — BlocProvider Bloc के जीवनचक्र का प्रबंधन करता है, इसे रूट या पेज से बांधता है।

Bloc और Cubit: तुलना

Cubit Event के बिना Bloc का एक सरलीकृत कार्यान्वयन है, जिसे flutter_bloc 6.0 पैकेज में प्रस्तुत किया गया। Cubit Event क्लास के बजाय सीधे विधियाँ घोषित करता है: increment(), fetchData()। आंतरिक रूप से, Cubit उसी Stream-आधारित तंत्र का उपयोग करता है लेकिन Event परत को छिपाता है। यह सरल परिदृश्यों के लिए boilerplate को 40-50% तक कम करता है।

Cubit कब चुनें: 2-3 वेरिएंट वाली स्थिति (लोड हो रहा है, लोड हुआ, त्रुटि), सरल फ़ॉर्म, काउंटर, UI स्थितियाँ (खुला/बंद)। Bloc कब चुनें: कई क्रियाओं वाला जटिल व्यावसायिक तर्क: ऑर्डर प्रोसेसिंग, प्राधिकरण, डेटा सिंक्रोनाइज़ेशन। Bloc Event के माध्यम से प्रत्येक क्रिया का विस्तृत ट्रेसिंग प्रदान करता है — प्रत्येक कॉल BlocObserver में लॉग की जाती है।

BlocObserver — एक वैश्विक पर्यवेक्षक जो एप्लिकेशन में सभी Bloc और Cubit को ट्रैक करता है। यह Event, State, त्रुटियों और संक्रमणों को लॉग करने की अनुमति देता है। बस एक इंस्टेंस कनेक्ट करें: Bloc.observer = AppBlocObserver(), और संपूर्ण एप्लिकेशन स्थिति ट्रेसिंग केंद्रीय रूप से उपलब्ध है।

BlocProvider और BlocBuilder

BlocProvider — flutter_bloc से एक InheritedWidget जो चाइल्ड विजेट्स को Bloc प्रदान करता है। जब कोई विजेट प्रारंभ होता है, BlocProvider एक Bloc बनाता है, और जब नष्ट होता है — close() के माध्यम से इसे स्वचालित रूप से बंद करता है। BlocProvider को MaterialApp स्तर (ग्लोबल Bloc) या किसी विशिष्ट रूट स्तर (लोकल 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 — एक विजेट जो प्रत्येक नए State पर UI का पुनर्निर्माण करता है। BlocListener — साइड इफ़ेक्ट के लिए (UI का पुनर्निर्माण किए बिना एक बार State प्रोसेस करें): SnackBar दिखाना, दूसरी स्क्रीन पर नेविगेट करना। BlocConsumer — Builder और Listener का संयोजन उन मामलों के लिए जहाँ पुनर्निर्माण और साइड इफ़ेक्ट दोनों की आवश्यकता है। BlocSelector — केवल तब चयनात्मक पुनर्निर्माण के लिए जब State का कोई विशिष्ट फ़ील्ड बदलता है।

MultiBlocProvider — नेस्टिंग स्तर बढ़ाए बिना नेस्टेड BlocProvider के लिए एक विजेट। 10-15 Bloc वाला Flutter एप्लिकेशन सभी Bloc को पंजीकृत करने के लिए रूट स्तर पर MultiBlocProvider का उपयोग करता है जो पूरे एप्लिकेशन के लिए उपलब्ध हैं: AuthenticationBloc, CartBloc, SettingsBloc।

BLoC परीक्षण

BLoC का परीक्षण Flutter विजेट के बिना अलगाव में किया जाता है। बस Dart पैकेज flutter_test और bloc_test पैकेज आयात करें। परीक्षण परिदृश्य: Bloc बनाएँ, Event जोड़ें, State जाँचें। blocTest — एक उपयोगिता जो अनुक्रम को स्वचालित करती है: build → act → expect।

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

मॉकिंग: एक Bloc जो रिपॉजिटरी या API पर निर्भर करता है, mocktail के माध्यम से मॉक के साथ परीक्षण किया जाता है। रिपॉजिटरी को एब्स्ट्रक्शन स्तर पर मॉक किया जाता है, और Bloc कंस्ट्रक्टर के माध्यम से मॉक की गई निर्भरताएँ प्राप्त करता है। Hydrated Bloc — स्थानीय स्टोरेज में स्वचालित स्थिति Persistence/Restoration के लिए एक एक्सटेंशन। इसका परीक्षण HydratedBlocStorage और अस्थायी फ़ाइल स्टोरेज के साथ किया जाता है।

उत्पादन में BLoC

फ़ोल्डर और फ़ाइलें: BLoC के साथ एक विशिष्ट Flutter प्रोजेक्ट संरचना: bloc/counter_bloc.dart, bloc/counter_event.dart, bloc/counter_state.dart। 30+ स्क्रीन के लिए, फ़ीचर-आधारित समूहीकरण अनुशंसित है: features/auth/bloc/, features/cart/bloc/। प्रत्येक Bloc एक अलग फ़ाइल है, प्रत्येक Event और State — या तो अलग फ़ाइलों में या Bloc के साथ एक फ़ाइल में।

प्रदर्शन: BLoC खाली Stream के लिए ओवरहेड नहीं बनाता है। BlocBuilder पुनर्निर्माण को फ़िल्टर करने के लिए buildWhen का उपयोग करता है — विजेट केवल तब अपडेट होता है जब कोई विशिष्ट शर्त बदलती है। Close सुनिश्चित करता है कि निष्क्रिय Bloc मेमोरी का उपभोग न करें। Flutter DevTools के अनुसार, BLoC बंडल आकार में 1% से कम जोड़ता है।

Provider से माइग्रेशन: BLoC एक ही प्रोजेक्ट में Provider के साथ आसानी से सह-अस्तित्व में रहता है। क्रमिक माइग्रेशन: पहले सबसे जटिल Provider को Bloc से बदलें, फिर बाकी। BlocProvider Provider ट्री के साथ संगत है: पुराने विजेट Provider का उपयोग कर सकते हैं, नए — BlocProvider, एक ही एप्लिकेशन के भीतर।