Flutter मोबाइल विकास · पाठ

Streams के साथ BLoC पैटर्न

इवेंट, स्थिति और स्ट्रीम का उपयोग करके व्यावसायिक तर्क को UI से अलग करने वाला Flutter का BLoC (Business Logic Component) पैटर्न सीखिए।

पाठ 4, कुल 4 में से13 चरण

Streams के साथ BLoC पैटर्न, CoddyKit पर Flutter मोबाइल विकास का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Flutter मोबाइल विकास सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Flutter मोबाइल विकास पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

BLoC क्या है?

BLoC का अर्थ Business Logic Component है। यह एक पैटर्न है जो इवेंट को स्ट्रीम के माध्यम से स्टेट में बदलकर बिज़नेस लॉजिक को विजेट से अलग रखता है।

  • UI इवेंट भेजता है
  • BLoC उन्हें संसाधित करता है
  • नए स्टेट UI तक वापस पहुँचते हैं

एक और पैटर्न क्यों?

आप पहले से setState, Provider और Riverpod जानते हैं। BLoC तब उपयोगी होता है जब लॉजिक जटिल हो और आपको चाहिए:

  • UI और लॉजिक का स्पष्ट पृथक्करण
  • पूर्वानुमान योग्य और परीक्षण योग्य स्टेट बदलाव
  • रिएक्टिव स्ट्रीम-आधारित प्रवाह

स्ट्रीम का पुनरावलोकन

स्ट्रीम समय के साथ आने वाले असिंक्रोनस मानों का क्रम है। StreamController आपको मान भेजने और उन्हें स्ट्रीम के रूप में उपलब्ध कराने देता है।

final controller = StreamController<int>();
controller.stream.listen((value) => print(value));
controller.add(1);
controller.add(2);

इवेंट

इवेंट एक अपरिवर्तनीय क्लास है, जो उपयोगकर्ता द्वारा किए गए किसी कार्य का वर्णन करती है। इन्हें सामान्य Dart क्लास के रूप में निर्धारित करें।

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

स्टेट

स्टेट UI को क्या दिखाना चाहिए, इसका एक अपरिवर्तनीय स्नैपशॉट है। इसे सरल और क्रमबद्ध किए जा सकने योग्य रखें।

class CounterState {
  final int count;
  const CounterState(this.count);
}

Bloc क्लास

flutter_bloc पैकेज का उपयोग करके, Bloc on<Event> हैंडलर के माध्यम से इवेंट को स्टेट में बदलता है।

class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(const CounterState(0)) {
    on<Increment>((e, emit) => emit(CounterState(state.count + 1)));
    on<Decrement>((e, emit) => emit(CounterState(state.count - 1)));
  }
}

Bloc उपलब्ध कराना

ट्री के किसी भाग को BlocProvider में लपेटें, ताकि उसके वंशज Bloc तक पहुँच सकें।

BlocProvider(
  create: (_) => CounterBloc(),
  child: const CounterPage(),
);

BlocBuilder के साथ प्रतिक्रिया

BlocBuilder जब भी कोई नई स्थिति जारी होती है, विजेट को फिर से बनाता है।

BlocBuilder<CounterBloc, CounterState>(
  builder: (context, state) => Text('Count: ' + state.count.toString()),
);

इवेंट भेजना

context.read<CounterBloc>().add(...) से ब्लॉक को इवेंट भेजें।

FloatingActionButton(
  onPressed: () => context.read<CounterBloc>().add(Increment()),
  child: const Icon(Icons.add),
);

साइड इफ़ेक्ट के लिए BlocListener

एक बार होने वाले साइड इफ़ेक्ट, जैसे SnackBar दिखाना या नेविगेट करना, के लिए BlocListener का उपयोग करें, जहाँ आप UI को फिर से नहीं बनाना चाहते।

BlocListener<CounterBloc, CounterState>(
  listener: (context, state) {
    if (state.count == 10) ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('Reached 10!')),
    );
  },
  child: child,
);

Cubit: हल्का BLoC

Cubit इवेंट हटाकर ऐसी विधियाँ सीधे उपलब्ध कराता है जो emit को कॉल करती हैं। जब पूरी इवेंट क्लास की आवश्यकता अधिक लगे, तब इसका उपयोग करें।

class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);
  void increment() => emit(state + 1);
}

त्वरित जाँच

हर स्थिति पर UI को फिर से बनाए बिना, एक बार का SnackBar दिखाने के लिए आपको किस विजेट का उपयोग करना चाहिए?

पुनरावलोकन

आपने BLoC पैटर्न सीखा:

  • स्ट्रीम के माध्यम से इवेंट अंदर और स्थितियाँ बाहर
  • on<Event> हैंडलर वाला Bloc या हल्का Cubit
  • BlocProvider, BlocBuilder और BlocListener

BLoC जटिल ऐप्स के लिए लॉजिक और UI को साफ़-सुथरे, परीक्षण योग्य तरीके से अलग करता है।

शुरुआत निःशुल्क

एआई शिक्षक के साथ Dart सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम
22
पाठ
88

अक्सर पूछे जाने वाले प्रश्न

क्या “Streams के साथ BLoC पैटर्न” पाठ निःशुल्क है?

हाँ — Flutter मोबाइल विकास अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “Streams के साथ BLoC पैटर्न” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Flutter मोबाइल विकास पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Streams के साथ BLoC पैटर्न” में मैं क्या सीखूँगा?

इवेंट, स्थिति और स्ट्रीम का उपयोग करके व्यावसायिक तर्क को UI से अलग करने वाला Flutter का BLoC (Business Logic Component) पैटर्न सीखिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Flutter मोबाइल विकास का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Flutter मोबाइल विकास शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Flutter मोबाइल विकास शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“Streams के साथ BLoC पैटर्न” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Flutter मोबाइल विकास पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Flutter मोबाइल विकास पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

  1. setState और InheritedWidget
  2. Provider पैकेज की मूल बातें
  3. स्थिति के लिए Riverpod
  4. Streams के साथ BLoC पैटर्न
← Flutter मोबाइल विकास पर वापस जाएँ