फ़्लटर मोबाइल एप्लिकेशन में MVVM आर्किटेक्चर

मैंने फ़्लटर सीखना शुरू कर दिया और हाल ही में पूरा दिन बिताया है कि मैं अपने फ़्लटर एप्लिकेशन में मॉडल-व्यू-व्यूमॉडल आर्किटेक्चर को शामिल करने की कोशिश कर रहा हूं। आमतौर पर मैं जावा में एंड्रॉइड के लिए लिखता हूं, मैं AndroidViewModel और LiveData / MutableLiveData का उपयोग करके MVVM को लागू करता हूं। यही है, प्रोग्रामिंग और पैटर्न को लागू करने में अनुभव है, आवेदन एक साधारण टाइमर है। इसलिए एक साधारण कार्य पर इतना समय व्यतीत करने से कुछ नहीं होता।

Flutter में MVVM पर लेखों और निर्देशों की खोज (RxDart का उपयोग किए बिना) ने एक उदाहरण दिया, जिसमें पूर्ण स्रोत का कोई संदर्भ नहीं है, इसलिए मैं उन लोगों के लिए इसे थोड़ा आसान बनाना चाहता हूं, जो फ़्लटर में इस पैटर्न का अध्ययन करने में रुचि रखते हैं।

परियोजना

MVVM के बिना एक प्रोजेक्ट एक सिंगल स्क्रीन है जिसमें काउंटडाउन टाइमर है। बटन दबाकर, टाइमर शुरू होता है या राज्य पर निर्भर करता है। जब समय समाप्त होता है, तो एक अधिसूचना जारी की जाती है या ध्वनि बजाई जाती है।

मॉडल विवरण

चलिए एमवीवीएम के कार्यान्वयन को शुरू करते हैं, पहले मैंने उस इंटरफ़ेस का वर्णन किया है जिसे मुझे विजेट और मॉडल (टाइमर_व्यू_मॉडल.डार्ट फ़ाइल बनाई गई थी) के बीच बातचीत करने की आवश्यकता है:

abstract class TimerViewModel { Stream<bool> get timerIsActive; Stream<String> get timeTillEndReadable; Stream<bool> get timeIsOver; void changeTimerState(); } 

यही है, मैं उन घटनाओं को प्राप्त करना चाहता हूं जो बटन की स्थिति को बदलते हैं (टाइमर को रोकें - जारी रखें), यह जानने के लिए कि टाइमर कब समाप्त हो गया है, उस समय को प्राप्त करने के लिए जिसे स्क्रीन पर प्रदर्शित करने की आवश्यकता है। मैं टाइमर को रोकना / शुरू करना भी चाहता हूं। कड़ाई से बोलते हुए, इस इंटरफ़ेस का वर्णन वैकल्पिक है, यहां मैं केवल यह दिखाना चाहता हूं कि मॉडल की आवश्यकता क्या है।

ViewModel कार्यान्वयन

मॉडल का आगे कार्यान्वयन टाइमर_व्यू_मॉडल_इम्पल.डार्ट फ़ाइल है

टाइमर वास्तव में एक सिंगल सब्सक्राइबर के साथ स्ट्रीमकंट्रोलर के रूप में काम करता है। कोड के लिए आधार इस लेख से लिया गया है। बस नियंत्रक का विवरण है, जो एक टाइमर पर काम करता है और इसे फिर से रोका जा सकता है और फिर से शुरू किया जा सकता है। सामान्य तौर पर, एक लगभग सही मैच। मेरे कार्य के लिए कोड बदल गया:

 static Stream<DateTime> timedCounter(Duration interval, Duration maxCount) { StreamController<DateTime> controller; Timer timer; DateTime counter = new DateTime.fromMicrosecondsSinceEpoch(maxCount.inMicroseconds); void tick(_) { counter = counter.subtract(oneSec); controller.add(counter); // Ask stream to send counter values as event. if (counter.millisecondsSinceEpoch == 0) { timer.cancel(); controller.close(); // Ask stream to shut down and tell listeners. } } void startTimer() { timer = Timer.periodic(interval, tick); } void stopTimer() { if (timer != null) { timer.cancel(); timer = null; } } controller = StreamController<DateTime>( onListen: startTimer, onPause: stopTimer, onResume: startTimer, onCancel: stopTimer); return controller.stream; } 

अब मॉडल काम के माध्यम से टाइमर की शुरुआत और ठहराव कैसे होता है:

 @override void changeTimerState() { if (_timeSubscription == null) { print("subscribe"); _timer = timedCounter(oneSec, pomodoroSize); _timerIsEnded.add(false); _timerStateActive.add(true); _timeSubscription = _timer.listen(_onTimeChange); _timeSubscription.onDone(_handleTimerEnd); } else { if (_timeSubscription.isPaused) { _timeSubscription.resume(); _timerStateActive.add(true); } else { _timeSubscription.pause(); _timerStateActive.add(false); } } } 

टाइमर को काम करना शुरू करने के लिए, आपको इसे _timeSubscription = _timer.listen(_onTimeChange); सदस्यता _timeSubscription = _timer.listen(_onTimeChange); । रोकें / जारी रखें को ठहराव / फिर से शुरू सदस्यता ( _timeSubscription.pause(); / _timeSubscription.resume(); ) के माध्यम से लागू किया जाता है। यहां, _timerStateActive टाइमर गतिविधि स्थिति स्ट्रीम में एक रिकॉर्ड है और टाइमर के चालू होने या नहीं होने के बारे में जानकारी की एक धारा _timerIsEnded है।

सभी प्रवाह नियंत्रकों को आरंभीकरण की आवश्यकता होती है। यह प्रारंभिक मूल्यों को जोड़ने के लायक भी है।

 TimerViewModelImpl() { _timerStateActive = new StreamController(); _timerStateActive.add(false); _timerIsEnded = new StreamController(); _timeFormatted = new StreamController(); DateTime pomodoroTime = new DateTime.fromMicrosecondsSinceEpoch(pomodoroSize.inMicroseconds); _timeFormatted.add(DateFormat.ms().format(pomodoroTime)); } 

इंटरफ़ेस में वर्णित धाराओं को प्राप्त करना:

 @override Stream<bool> get timeIsOver => _timerIsEnded.stream; @override Stream<bool> get timerIsActive { return _timerStateActive.stream; } @override Stream<String> get timeTillEndReadable => _timeFormatted.stream; 

यही है, स्ट्रीम में कुछ लिखने के लिए, आपको एक नियंत्रक की आवश्यकता है। वहां कुछ भी लेना और रखना असंभव है (एक फ़ंक्शन में स्ट्रीम उत्पन्न होने पर एक अपवाद है)। और पहले से ही विजेट तैयार प्रवाह को उठाता है, जो मॉडल नियंत्रकों द्वारा नियंत्रित किया जाता है।

विजेट और राज्य

अब विजेट के लिए। राज्य निर्माण में ViewModel को आरंभीकृत किया गया

 _MyHomePageState() { viewModel = new TimerViewModelImpl(); } 

फिर, आरंभीकरण में, थ्रेड के लिए श्रोताओं को जोड़ा जाता है:

  viewModel.timerIsActive.listen(_setIconForButton); viewModel.timeIsOver.listen(informTimerFinished); viewModel.timeTillEndReadable.listen(secondChanger); 

श्रोता लगभग पहले की तरह ही कार्य कर रहे हैं, केवल अशक्त जाँच जोड़ी गई है और _setIconForButton को थोड़ा बदल दिया गया है:

 Icon iconTimerStart = new Icon(iconStart); Icon iconTimerPause = new Icon(iconCancel); void _setIconForButton(bool started) { if (started != null) { setState(() { if (started) { iconTimer = iconTimerPause; } else { iconTimer = iconTimerStart; } }); } } 

Main.dart में बाकी बदलाव सभी टाइमर लॉजिक को हटाने का है - अब यह ViewModel में रहता है।

निष्कर्ष

मेरा MVVM कार्यान्वयन अतिरिक्त विजेट्स (जैसे कि स्ट्रीमब्यूलर) का उपयोग नहीं करता है, विजेट्स की संरचना समान रहती है। स्थिति यह है कि Android ViewModel और LiveData का उपयोग कैसे करता है। यही है, मॉडल को आरंभीकृत किया जाता है, फिर उन श्रोताओं को जोड़ा जाता है जो पहले से ही मॉडल परिवर्तनों पर प्रतिक्रिया करते हैं।

सभी परिवर्तनों के साथ परियोजना भंडार