डार्ट और फ्लटर में रिएक्टिवएक्स का उपयोग शुरू से करें

कल मेरे दोस्त ने कहा कि "मैं सरल ऑफ़लाइन एप्लिकेशन लिख रहा हूं, मुझे इन धाराओं और उस सभी जैज़ की आवश्यकता नहीं है"। मैं भ्रमित था, लेकिन मुझे लगा, इस भ्रम में अन्य कोडर हो सकते हैं।

नीचे, वस्तुतः 50 पंक्तियों में मैं दिखाऊंगा, ज्ञात उदाहरण पर कि प्रतिक्रियाशीलता है:

a) ऑफलाइन / ऑनलाइन के बारे में नहीं
बी) बहुत आसान है
ग) लगभग किसी भी कोड को सरल बनाने के लिए बहुत अच्छा है

मेरे जल्दबाजी के आलोचकों के लिए ,
जो बिना पीछे देखे लड़ाई में भाग जाता है, उस BlocProvider - एक प्रदाता है , मैंने सामान्य विकास के लिए पहला मूल लेख पढ़ने की सिफारिश की है। एक लेख का संदर्भ वर्णन में पहली पंक्ति में flutter_bloc के पृष्ठ पर है।

सभी उदाहरण के लिए एक अच्छी तरह से ज्ञात "ए काउंटर" है, जो फ़्लटर परियोजना के निर्माण के समय उत्पन्न हुआ था, बहुत सारे अभ्यासों के प्रदर्शन के लिए अच्छा शुरुआत बिंदु है। तो, इसमें MyHomePage extends StatefulWidget शामिल MyHomePage extends StatefulWidget , वेतन वृद्धि की विधि के लिए विधि _incrementCounter और setState के पूरे पदानुक्रम redraw के लिए setState ।

आइए rxdart लाइब्रेरी और कुछ आसान चरणों की मदद से प्रतिक्रियाशीलता का परिचय दें:

चलो pubspec.yaml में एक पुस्तकालय जोड़ें

 dependencies: ... rxdart: 0.22.2 

आइए एक काउंटर की वास्तुकला को बदलें और घटना जोड़ें

 class _Counter { int _count; int get count => _count; _Counter(this._count) : this.onCounterUpd = BehaviorSubject<int>.seeded(_count); /// Here is the event. final BehaviorSubject<int> onCounterUpd; /// Increment now fires an event. Future incrementCounter() async { onCounterUpd.add(++_count); } } final _counter = _Counter(5); 

कक्षा को स्टेटलेसविजेट बनाते हैं

 class MyHomeRxPage extends StatelessWidget { final title; /// ! Look it can be constant one now. const MyHomeRxPage({Key key, this.title}) : super(key: key); ... 

आइए एक स्ट्रीमब्यूस्टल में एक विजेट लपेटें और वेतन वृद्धि की विधि को कॉल करें।

  StreamBuilder<int>( stream: _counter.onCounterUpd, builder: (context, snapshot) { return Text( '${snapshot.data}', style: Theme.of(context).textTheme.display1, ); }), ... floatingActionButton: FloatingActionButton( onPressed: _counter.incrementCounter, ... 

बस इतना ही। पूर्ण रूप से ऐसा दिखता है:

 import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; import 'package:rxdart/rxdart.dart'; class _Counter { int _count; int get count => _count; _Counter(this._count) : this.onCounterUpd = BehaviorSubject<int>.seeded(_count); /// event final BehaviorSubject<int> onCounterUpd; /// fire an event Future incrementCounter() async { onCounterUpd.add(++_count); } } final _counter = _Counter(5); class MyHomeRxPage extends StatelessWidget { final title; const MyHomeRxPage({Key key, this.title}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ StreamBuilder<int>( stream: _counter.onCounterUpd, builder: (context, snapshot) { return Text( 'You have pushed the button ${snapshot.data} times:', ); }), // Text( // 'You have pushed the button this many times:', // ), StreamBuilder<int>( stream: _counter.onCounterUpd, builder: (context, snapshot) { return Text( '${snapshot.data}', style: Theme.of(context).textTheme.display1, ); }), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _counter.incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ), // ); } } 

अब कोड रिएक्टिव, लैकोनिक है, जो अनावश्यक लालच से मुक्त है और आसानी से एक्स्टेंसिबल है। उदाहरण के लिए, यदि काउंटर बदलना है, तो अन्य विजेट का पाठ बदलना आवश्यक है, यह अनुसरण करने के लिए पर्याप्त है:

  StreamBuilder<int>( stream: onCounterUpd, builder: (context, snapshot) { return Text( 'You have pushed the button ${snapshot.data} times:', ); }), // Text( // 'You have pushed the button this many times:', // ), 

और आवाज!

तुलना के लिए InheritedWidget या किसी अन्य पैटर्न के साथ ऐसा करने का प्रयास करें।

इसलिए, मुझे आशा है, मैंने वह कर दिखाया है

• प्रतिक्रियाशीलता बहुत आसान है। InheritedWidgets , BlocProvider , आदि की तुलना में बहुत आसान है।
• प्रतिक्रियाशीलता ऑफ़लाइन / ऑनलाइन के बारे में नहीं है। यह वास्तुकला के बारे में है। कुछ सरल मामलों में भी इसका उपयोग करने के लिए अतिरिक्त कक्षाओं में प्रवेश नहीं करना चाहिए।
• प्रतिक्रियाशीलता सहानुभूति यूआई, त्वरित चौड़ी कार्यात्मक, सभी प्रकार की परतों पर कोड का सुरुचिपूर्ण विभाजन है: MVC, MVP, MVI, MVVM, MVU - जो भी आप चाहते हैं।

→ कोड: (शाखा iter_0004_rxdart )

कोडिंग में गुड लक।