क्या फ़्लटर ऐप्स प्लेटफ़ॉर्म-आधारित विजेट का सपना देखते हैं?

नमस्कार, हेब्र! मैं आपके लिए लेख का अनुवाद प्रस्तुत करता हूं "क्या प्लेटफ़ॉर्म एप्लिकेशन प्लेटफ़ॉर्म जागरूक विजेट का सपना देखते हैं?"

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

लेखक के बारे में: स्वाव कुलिंस्की - ऐप व्यवसाय में लीड एंड्रॉइड डेवलपर, स्पंदन जीडीई।
इसके बाद, हम लेखक की ओर से बात करेंगे।

स्पंदन एक क्रॉस-प्लेटफ़ॉर्म मोबाइल अनुप्रयोग विकास समाधान है जो प्लेटफ़ॉर्म की परवाह किए बिना उपयोगकर्ता इंटरफ़ेस बनाने में पूर्ण स्वतंत्रता का वादा करता है। यह इस तथ्य से प्राप्त होता है कि फ्रेमवर्क अपने स्वयं के रेंडरिंग इंजन का उपयोग विगेट्स बनाने के लिए करता है।

कई क्रॉस-प्लेटफ़ॉर्म समाधानों के साथ समस्या यह है कि वे iPhone और Android पर समान दिखते हैं। लेकिन उन कंपनियों के बारे में क्या है जिन्हें मंच की उपस्थिति बनाए रखने की आवश्यकता है? आईओएस के लिए एंड्रॉइड और ह्यूमन इंटरफेस के लिए मटेरियल डिज़ाइन का उपयोग करने की आवश्यकता किसे है? ऐसी कंपनियों के लिए, फ़्लटर उपयुक्त है, उन पैकेजों से सुसज्जित है जिनमें आईओएस और एंड्रॉइड के लिए कस्टम विजेट का एक सेट होता है, जिसे क्यूपर्टिनो और मटेरियल कहा जाता है।



स्पंदन प्रकृति में क्रॉस-प्लेटफ़ॉर्म है, लेकिन जब लेआउट यूआई की बात आती है, जो प्रत्येक प्लेटफॉर्म के मूल निवासी दिखना चाहिए, यह पूरी तरह से सच नहीं है। हमें दो समान लेआउट कार्यान्वयन करना होगा। यह इस तथ्य के कारण है कि, उदाहरण के लिए, iOS के लिए, CupertinoNavigationBar CupertinoPageScaffold और Android में, Scaffold के अंदर AppBar होना चाहिए। यह सुविधा फ़्लटर में क्रॉस-प्लेटफ़ॉर्म के लाभ को कम करती है, क्योंकि प्रत्येक प्लेटफ़ॉर्म के लिए आपको लेआउट के लिए अपना कोड लिखना होगा।

मैं एक दृष्टिकोण प्रस्तावित करना चाहता हूं जो आपको अमूर्त इंटरफेस बनाने और एप्लिकेशन के स्वरूप और व्यवहार को समायोजित करने की अनुमति देता है, जिसके आधार पर प्लेटफ़ॉर्म चलता है।

दो विजेट्स के लिए निम्नलिखित कंस्ट्रक्टर पर विचार करें जो एक शीर्ष एप्लिकेशन बार प्रदान करते हैं:

CupertinoNavigationBar ({ this.leading, this.middle, }) 

और

  AppBar ({ this.leading, this.title }) 

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

 import 'package:flutter/material.dart'; import 'dart:io' show Platform; abstract class PlatformWidget<I extends Widget, A extends Widget> extends StatelessWidget { @override Widget build(BuildContext context) { if (Platform.isAndroid) { return createAndroidWidget(context); } else if (Platform.isIOS) { return createIosWidget(context); } // platform not supported returns an empty widget return Container(); } I createIosWidget(BuildContext context); A createAndroidWidget(BuildContext context); } 

वास्तव में, उपरोक्त वर्ग एक प्लेटफ़ॉर्म-आश्रित विजेट फैक्ट्री है, जिसे लागू करने पर, एक कस्टम कंस्ट्रक्टर (या कई नामित कंस्ट्रक्टर) प्रदान कर सकते हैं जो दोनों विशिष्ट वर्गों की आवश्यकताओं का समर्थन करते हैं।

मैंने विशिष्ट कक्षाओं में लौटने के लिए जेनरिक को चुना, क्योंकि कभी-कभी माता-पिता विजेट को एक निश्चित प्रकार की आवश्यकता होती है, जिसे चाइल्ड विजेट से वापस करना होगा।

अब हम अपने पहले विजेट को लागू कर सकते हैं।

  class PlatformAppBar extends PlatformWidget<CupertinoNavigationBar, AppBar> { final Widget leading; final Widget title; PlatformAppBar({ this.leading, this.title, }); @override AppBar createAndroidWidget(BuildContext context) { return AppBar( leading: leading, title: title, ); } @override CupertinoNavigationBar createIosWidget(BuildContext context) { return CupertinoNavigationBar( leading: leading, middle: title, ); } } 

बहुत आसान है, है ना? कृपया ध्यान दें कि एप्लिकेशन पैनल में विगेट्स की सामग्री पर हमारा पूर्ण नियंत्रण है।

मान लीजिए कि हमने पाड़ और बटन को लागू किया।

 class PlatformScaffoldWidget extends PlatformWidget<CupertinoPageScaffold,Scaffold> { ... } class PlatformButton extends PlatformWidget<CupertinoButton,FlatButton> { ... } 

अब हम अपने प्लेटफ़ॉर्म-उन्मुख विजेट का उपयोग करने और पुन: उपयोग करने के लिए तैयार हैं।

 Widget build(BuildContext context) { return PlatformScaffoldWidget( appBar: PlatformAppBarWidget( leading: PlatformButton( child: Icon(Icons.ic_arrow_back), onClick: () => _handleBack() ), title: Text("I love my Platform"), ), content: ... ); } 

हो गया! उपरोक्त कोड दोनों प्लेटफ़ॉर्म पर एक प्लेटफ़ॉर्म-ओरिएंटेड एप्लिकेशन बार प्रदर्शित करेगा, और हमारा प्लेटफ़ॉर्मसैफोल्डवाइड किसी भी समस्या के बिना बाकी एप्लिकेशन में पुन: उपयोग करने के लिए तैयार है।

कोड को जीथब पर देखा जा सकता है ।