स्पंदन प्लेटफ़ॉर्म व्यू: मूल दृश्यों से विजेट कैसे बनाएं

स्पंदन हाल ही में एक नया विजेट मिला जिसे PlatformView कहा जाता है जो डेवलपर्स को स्पंदन विजेट पदानुक्रम में एंड्रॉइड व्यू को एम्बेड करने की अनुमति देता है। यह पूरी तरह से एकीकृत नक्शे और वेबव्यू (https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/platform_view.dart) जैसी कई नई संभावनाओं के द्वार खोलता है।

इस ट्यूटोरियल में, हम एक TextViewPlugin कैसे बनाते हैं, के माध्यम से जाने वाले हैं, जहाँ हम एक मूल एंड्रॉइड TextView को फ़्लटर विजेट के रूप में उजागर करते हैं।

इससे पहले कि हम कोड में कूदें कुछ त्वरित बातें ध्यान दें:

  • वर्तमान में केवल Android के लिए समर्थित है (अगले कुछ हफ्तों में iOS के लिए आना चाहिए)
  • Android API स्तर 20 या उससे अधिक की आवश्यकता है।
  • एंड्रॉइड विचार एम्बेड करना एक महंगा ऑपरेशन है और जब एक स्पंदन समतुल्य संभव हो तो इसे टाला जाना चाहिए।
  • एम्बेडेड Android दृश्य किसी भी अन्य स्पंदन विजेट की तरह चित्रित किया गया है और रूपांतरों के साथ ही इस पर भी लागू होता है।
  • विजेट सभी उपलब्ध स्थान को भर देगा इसलिए इस ऑब्जेक्ट के माता-पिता को बाध्य लेआउट बाधाएं प्रदान करनी चाहिए।
  • अब के रूप में, आप के साथ पालन करने के लिए स्पंदन मास्टर चैनल पर स्विच करने की आवश्यकता है। आप यह कर सकते हैं कि फ़्लटर चैनल मास्टर चलाकर और सुनिश्चित करें कि आपका नया फ़्लटर प्रोजेक्ट फ़्लटर एसडीके की शाखा को इंगित कर रहा है।

कोडिंग शुरू करने का समय :)

पहली चीज जो हमें करने जा रही है वह है एक नया स्पंदन प्लगइन बनाना:

एंड्रॉइड स्टूडियो में एक नया स्पंदन प्रोजेक्ट बनाएंएक स्पंदन अनुप्रयोग के बजाय एक स्पंदन प्लगिन बनाएँ

Flutter Plugin बनने के बाद हम अपनी TextView कक्षा को ./lib/text_view.dart में बनाकर शुरू कर सकते हैं

ध्यान देने वाली एक महत्वपूर्ण बात यह है कि जब हम लाइन 24 पर AndroidView बनाते हैं तो हमें एक व्यू टाइप प्रदान करने की आवश्यकता होती है, जो हमें थोड़ा सा मिलेगा।

हम इसके अलावा एक onPlatformCompleted कार्यान्वयन प्रदान करते हैं, ताकि हम अपने TextView विजेट को TextViewController के साथ प्रदान कर सकें, जो तब सेटटैक् ट विधि का उपयोग करके इसे पाठ को अपडेट करने के लिए उपयोग कर सकता है।

पूर्ण AndroidView दस्तावेज़ के लिए https://docs.flutter.io/flutter/widgets/AndroidView-class.html देखें।

अगला हमें अपने TextViewPlugin के Android कार्यान्वयन पर काम करने की आवश्यकता है।

हम एक अन्य जेनरेट की गई फ़ाइल को खोलने के लिए शुरू करेंगे, जिसे /android/src/main/java/ पेनल्टीऑर्गनाइजेशन_नामक //extViewPlugin.java कहा जाता है। हम निम्नलिखित के साथ उस फ़ाइल की सामग्री को बदल सकते हैं:

हम जो कुछ भी कर रहे हैं वह रजिस्टरवॉच विधि को लागू कर रहा है जहां हम टेक्स्ट_व्यू.टार्ट में पहले से परिभाषित व्यू टाइप प्रदान करते हैं और साथ ही एक टेक्स्ट व्यूफैक्ट प्रदान करते हैं जो एक प्लेटफ़ॉर्म व्यू के रूप में हमारे मूल टेक्स्ट व्यू का निर्माण करेगा।

इसके बाद, हमें बनाने की आवश्यकता है ।/android/src/main/java/ तिरछेपन_नामेस / TextViewFactory.java और PlatformViewFactory का विस्तार करें।

हमारा TextViewFactory एक प्लेटफ़ॉर्म व्यू लौटाता है (जो हमारे मामले में यह एक FlutterTextView लौटेगा) विधि को लागू करता है।

अगला, हमें बनाने की जरूरत है ।/android/src/main/java/ अंतर्हृदयकरण_नामच / मेथ से एक MethodChannel के माध्यम से।

हमारा FlutterTextView एक नया TextView बनाता है और एक MethodChannel सेट करता है ताकि TextView डार्ट कोड से डेटा प्राप्त कर सके और अपडेट कर सके (इस मामले में टेक्स्ट अपडेट करें)।

PlatformView को लागू करने के लिए, हमें getView को ओवरराइड करने और अपने टेक्स्ट व्यू को वापस करने के साथ-साथ ओवरराइड डिस्पोज़ (जो कि इस मामले में कुछ नहीं करता है) को वापस करने की आवश्यकता है।

MethodCallHandler को लागू करने के लिए, हमें onMethodCall को ओवरराइड करने की आवश्यकता है और इस पद्धति के आधार पर, या तो हमारे आंतरिक सेटटेक्स्ट विधि को कॉल करें (टेक्स्टव्यू के टेक्स्ट को अपडेट करने के लिए) या परिणाम लौटाएं। अभी लागू नहीं किया गया है क्योंकि यह किसी अन्य तरीकों का समर्थन नहीं करता है।

अब हमारे नए TextView विजेट का परीक्षण करने का समय है!

./Example/lib/main.dart खोलें और इसे निम्न कोड से बदलें:

यह परिचित दिखना चाहिए। हम एक MaterialApp चला रहे हैं जो एक पाड़ रेंडर करता है। हमारे पास हमारा TextView विजेट एक कंटेनर विजेट (कुछ पैडिंग के साथ) के भीतर नेस्टेड है, जो एक केंद्र विजेट के भीतर एम्बेडेड है। सेंटर विजेट एक कॉलम विजेट का पहला बच्चा है। हमारे कॉलम का दूसरा बच्चा एक विस्तारित विजेट है और इसमें स्पंदन टेक्स्ट विजेट में निर्मित कंटेनर विजेट है।

हमारे पास onTextViewCreated के लिए हमारा कार्यान्वयन भी है जहां हम सेटटेक्स्ट विधि कहते हैं।

हमारे उदाहरण स्पंदन ऐप को चलाने का समय है और हमने जो भी बनाया है उस पर एक नज़र डालें।

बहुत बढ़िया! भले ही आप आम तौर पर इसे पूरा करने के लिए केवल स्पंदन पाठ विजेट में निर्मित का उपयोग करते हैं, लेकिन हमने साबित कर दिया है कि अब आप किसी भी मूल Android दृश्य को "विजेट" कर सकते हैं जो बहुत शक्तिशाली है।

यह उदाहरण स्पंदन ऐप दर्शाता है कि हमारा टेक्स्ट व्यू किसी अन्य फ़्लटर विजेट की तरह ही चित्रित किया गया है और इस पर रूपांतर भी लागू होते हैं।

उत्पादन के लिए तैयार होने के लिए हमें अभी भी अपने प्लगइन के लिए परीक्षण लिखने की आवश्यकता है ताकि हम एक अनुवर्ती लेख में ऐसा कर सकें। आप https://github.com/felangel/flutter_text_view_plugin पर पूर्ण स्रोत कोड देख सकते हैं।