📞 🧜🏼 🤹🏻 स्पंदन के बारे में, संक्षेप में: मूल बातें 👧🏿 👨🏿‍🚒 🤱🏿

स्पंदन के बारे में, संक्षेप में: मूल बातें

Yura Luchaninov की रिपोर्ट के बाद, मैंने अपने लिए Flutter आज़माने का फैसला किया। मस्तिष्क को फैलाने के लिए, और इसलिए रसोई में पुरुषों के साथ चिल करने के लिए कुछ था। बातें हो गई हैं। मैंने देखना शुरू किया, फिर पढ़ा, फिर लिखा। और सब कुछ बाहर काम करने लगता है, एप्लिकेशन लॉन्च किए जाते हैं, और जो वे समझाते हैं वह समझ में आता है, सब कुछ सरल है। लेकिन बिना "लेकिन" के नहीं - हर कोई नहीं समझाता है। और चूंकि प्लेटफ़ॉर्म, पीएल, एप्रोच और यहां तक कि विषय क्षेत्र भी मेरे लिए नया है, इस तरह का कष्टप्रद, क्योंकि आप "शुरू नहीं करते हैं", और आपको यह भी पता नहीं है कि Google को क्या पता: डार्ट / फ़्लटर / विंडो / स्क्रीन / रूट / विजेट?

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

गाइड के बारे में

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

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

मैं संक्षेप में रूपरेखा तैयार करने की कोशिश करूंगा ताकि देरी न हो। और सबसे उत्सुक के लिए, मैं चर्चा किए गए विषयों पर उपयोगी लिंक छोड़ दूंगा।

मंच के बारे में

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

आज के कई प्रसिद्ध मोबाइल प्लेटफ़ॉर्म के विपरीत, फ़्लटर किसी भी रूप में जावास्क्रिप्ट का उपयोग नहीं करता है । स्पंदन के लिए एक प्रोग्रामिंग भाषा के रूप में, डार्ट को चुना गया था, जिसे बाइनरी कोड में संकलित किया गया है, जिससे ऑब्जेक्टिव-सी, स्विफ्ट, जावा, या कोटलिन के बराबर संचालन की गति प्राप्त की जा सकती है।
स्पंदन देशी घटकों का उपयोग नहीं करता है , फिर से, किसी भी रूप में, इसलिए आपको उनके साथ संचार के लिए किसी भी परत को लिखने की आवश्यकता नहीं है। इसके बजाय, गेम इंजन की तरह (और आप जानते हैं कि गेम में बहुत गतिशील UI है), यह पूरे इंटरफ़ेस को अपने आप खींचता है। बटन, पाठ, मीडिया तत्व, पृष्ठभूमि - यह सब फ़्लटर में ग्राफिक्स इंजन के अंदर खींचा गया है। उपरोक्त के बाद, यह ध्यान देने योग्य है कि फ़्लटर पर "हैलो वर्ल्ड" एप्लिकेशन बहुत कम जगह लेता है: iOS and 2.5Mb और Android M 4Mb।
यूआई का निर्माण करने के लिए स्पंदन, विजेट्स (वेब की दुनिया में घटक कहा जाता है) के आधार पर ReactJS वेब फ्रेमवर्क से प्रेरित एक घोषणात्मक दृष्टिकोण का उपयोग करता है । इंटरफ़ेस की गति में और भी अधिक वृद्धि के लिए, विगेट्स को आवश्यकतानुसार फिर से तैयार किया जाता है - केवल जब उनमें कुछ बदल गया हो (ठीक उसी तरह जैसे वर्चुअल डोम वेब के फ्रंट-एंड की दुनिया में करता है)।
इसके अलावा, फ्रेमवर्क में एक अंतर्निहित हॉट-रीलोड है , जो वेब से इतना परिचित है, और अभी भी देशी प्लेटफार्मों पर उपलब्ध नहीं है।

इन कारकों के व्यावहारिक लाभों पर, मैं अत्यधिक एंड्रॉइड डेवलपर के लेख को पढ़ने की सलाह देता हूं जिन्होंने जावा से डार्ट के अपने आवेदन को फिर से लिखा और अपने छापों को साझा किया। यहाँ मैं उनके द्वारा नामित (जावा में लिखित) - 179/12176 से पहले और बाद में (डार्ट में फिर से लिखा गया) - 31/1735 कोड की फ़ाइलों / लाइनों की संख्या निकालता हूँ। प्रलेखन में आप मंच की तकनीकी विशेषताओं का विस्तृत विवरण पा सकते हैं। और यहाँ एक और कड़ी है, यदि आप काम करने वाले अनुप्रयोगों के अन्य उदाहरणों को देखना चाहते हैं।

डार्ट के बारे में

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

मैंने डार्ट के बारे में एक समीक्षा लेख लिखने की कोशिश की, स्पंदन सीखने के लिए केवल न्यूनतम आवश्यक वर्णन करने की कोशिश की। लेकिन इस भाषा में इतनी बारीकियां हैं कि इस तरह के लेख को लिखने के कई प्रयासों के बावजूद, मैं अभी भी इसे पूरी तरह से और एक ही समय में छोटा नहीं बना सका। दूसरी ओर, ए टूर ऑफ़ द डार्ट लैंग्वेज के लेखकों ने इसका एक उत्कृष्ट कार्य किया।

प्रशिक्षण के बारे में

यह विषय, डार्ट की तरह, आधिकारिक गाइड में बहुत अच्छी तरह से वर्णित है। मैं इसे केवल यहाँ कॉपी कर सकता था, लेकिन मैंने ऐसा नहीं किया।

किसी भी चीज की प्रतीक्षा किए बिना, हम इंस्टॉलेशन गाइड पेज पर जाते हैं, प्लेटफॉर्म का चयन करते हैं और हमारे सिस्टम पर प्लेटफॉर्म को इंस्टॉल करने के लिए चरणों का पालन करते हैं। हमारे संपादक में, हम प्लगइन्स को कनेक्ट करेंगे । उसी गाइड में वीएस कोड और इंटेलीज स्थापित करने के लिए एक निर्देश है। आपके संपादक के लिए डार्ट और फ़्लटर के लिए प्लगइन्स भी हैं (आमतौर पर आपको दो स्थापित करने की आवश्यकता होती है)। हम एप्लिकेशन लॉन्च करते हैं और इसके प्रदर्शन की जांच करते हैं ।

OSX उपयोगकर्ताओं के लिए संकेत। आईओएस एमुलेटर में फोन के पेंट किए गए फ्रेम द्वारा कब्जा किए गए स्थान के लिए मुझे खेद है, इसलिए मैंने उन्हें बंद कर दिया और आईफोन 8 पर स्विच कर दिया (यह "लंबा" नहीं है):

Hardware → Device → iOS # → iPhone 8
Window → Show Device Bezels

आप बटन के बिना रह सकते हैं, क्योंकि हॉटकीज़ हैं: Shift + Cmd + H - यह घर है, Cmd + Right - और यह फोन को चालू करने के लिए है, बाकी Hardware मेनू में पाए जा सकते हैं। लेकिन मैं आपको ऑन-स्क्रीन कीबोर्ड चालू करने की सलाह देता हूं, क्योंकि यह समझना महत्वपूर्ण है कि क्या एप्लिकेशन के साथ काम करना संभव है, जब कीबोर्ड द्वारा आधी स्क्रीन को नियमित रूप से अवरुद्ध किया जाता है: Cmd + K (जब कुछ इनपुट क्षेत्र पर ध्यान केंद्रित किया जाता है)।

फ्रेम के साथ iPhone 8 और iPhone X

iPhone 8 और iPhone X बॉर्डरलेस
iPhone 8 और iPhone X बॉर्डरगेम्स

संरचना के बारे में

हम उत्पन्न एप्लिकेशन के साथ फ़ोल्डर में जाएंगे और देखेंगे कि हमारे पास क्या है। सब कुछ के साथ नहीं, लेकिन सही के साथ:

lib/ - पब (डार्ट्स पैकेज मैनेजर) के सिद्धांतों के अनुसार, सभी कोड इस सबफ़ोल्डर में निहित हैं;
pubspec.yml - यह वह जगह है जहां एप्लिकेशन की निर्भरताएँ लिखी जाती हैं कि आपको इसे चलाने के लिए इंस्टॉल करने की आवश्यकता है, जैसे package.json , लेकिन एक अति सूक्ष्म अंतर है, आपको उन्हें ऊपर वर्णित मानक डार्ट उपयोगिता के माध्यम से स्थापित करने की आवश्यकता नहीं है, लेकिन स्पंदन कमांड के माध्यम से: flutter pub get <package_name> ;
test/ - क्या आप जानते हैं कि क्या है? आप उन्हें flutter test कहकर चला सकते हैं;
ios/ & android/ - प्रत्येक प्लेटफॉर्म के लिए सेटिंग्स वाले फ़ोल्डर्स, यह इंगित करता है कि एप्लिकेशन को चलाने के लिए कौन से अधिकार आवश्यक हैं (स्थान, ब्लूटूथ तक पहुंच), आइकन और वह सब कुछ जो प्लेटफॉर्म के लिए विशिष्ट है।

हमने संरचना का पता लगाया, उस lib/ फ़ोल्डर पर जाएं जहां main.dart फ़ाइल हमारी प्रतीक्षा कर रही है। यह, जैसा कि आप अनुमान लगा सकते हैं, यह वही फ़ाइल है जिसमें हमें अपना एप्लिकेशन चलाना होगा। और यह main() फ़ंक्शन को कॉल करके सी (और यहां तक कि दूसरों के टन) की तरह शुरू होता है।

विगेट्स के बारे में (हैलो वर्ल्ड यहाँ)

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

Main.dart से सब कुछ निकालें। निम्नलिखित कोड को ध्यान से पढ़कर टिप्पणी पेस्ट करें:

 import 'package:flutter/widgets.dart'; //     //  Dart      main() main() => runApp( //   runApp  Flutter Text( //  ,   ,   <span> 'Hello, World!!!', //   —     textDirection: TextDirection.ltr, //       ), );

runApp(…) एक एकल तर्क लेता है - एक विजेट जो पूरे प्रोजेक्ट के लिए रूट होगा। वैसे, हॉट-रीलोड इसे नहीं उठा सकता है, इसलिए आपको एप्लिकेशन को पुनरारंभ करना होगा।
Text(…) - स्पंदन केवल स्क्रीन पर एक स्ट्रिंग प्रदर्शित नहीं कर सकता है। पाठ प्रदर्शित करने के लिए, आपको Text निर्दिष्ट करना होगा। textDirection । और यह text-align संरेखण की तरह पाठ संरेखण नहीं है, जब वेब के साथ तुलना की जाती है, तो यह direction का एक एनालॉग है। किसी एप्लिकेशन का अंतर्राष्ट्रीयकरण करने के लिए एपीआई का हिस्सा। Text तब तक काम नहीं करेगा जब तक उसे दिशा का पता नहीं चल जाता, लेकिन आपको इसे हर जगह निर्दिष्ट नहीं करना होगा - इसके बाद हम विश्लेषण करेंगे कि पाठ की दिशा को पूरे अनुप्रयोग के लिए कैसे समायोजित किया जाए।

पहले से ऐप लॉन्च किया है? "हैलो वर्ल्ड!" वास्तव में रची! ऐसा लगता है ... हाँ? लेकिन कुछ स्पष्ट रूप से गलत हो गया।

एप्लिकेशन को सक्रिय कर रहा है

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

 import 'package:flutter/widgets.dart'; main() => runApp( Center( // ,      child: Text( 'Hello, World!', textDirection: TextDirection.ltr, ), ), );

Center(…) एक विजेट है जो आपको केंद्र में क्षैतिज और लंबवत रूप से child तर्क में पारित एक और विजेट रखने की अनुमति देता है। आप अक्सर स्पंदन अनुप्रयोगों में child और children को देखेंगे, क्योंकि लगभग सभी विजेट्स इन नामों का उपयोग उन विजेट्स को व्यक्त करने के लिए करते हैं जिन्हें बुलाया विजेट के अंदर खींचा जाना चाहिए।

UI को रेंडर करने, लुक बदलने और यहां तक कि डेटा ट्रांसफर करने के लिए भी फ़्लटर में विजेट कंपोज़िशन का इस्तेमाल किया जाता है। उदाहरण के लिए, Directionality(…) विजेट Directionality(…) सभी बाल विजेट के लिए पाठ दिशा निर्धारित करता है:

 import 'package:flutter/widgets.dart'; main() => runApp( Directionality( textDirection: TextDirection.ltr, child: Center( child: Text('Hello, World!'), ), ), );

आइए एक और बहुत ही महत्वपूर्ण विजेट देखें और उसी समय हमारे आवेदन के रूप को बदल दें:

 import 'package:flutter/widgets.dart'; main() => runApp( Directionality( textDirection: TextDirection.ltr, child: Container( //  ! <div>   Flutter' //   Container  color    color: Color(0xFF444444), child: Center( child: Text( 'Hello, World!', style: TextStyle( //     ,    color: Color(0xFFFD620A), //     fontSize: 32.0, //    ), ), ), ), ), );

हेलोवर्ल्ड थ्योरी

Color(…) - रंग। दस्तावेज़ीकरण इसे स्थापित करने के विभिन्न तरीकों को इंगित करता है, लेकिन मुख्य बात यह है कि संख्या को कक्षा निर्माता को पास करना है। ऊपर दिए गए उदाहरण में, हम कंस्ट्रक्टर को हेक्साडेसिमल रूप में लिखे एक नंबर से गुजारते हैं, जो कि HEX के समान है, केवल शुरुआत में हमने दो और वर्ण जोड़े, जो रंग की पारदर्शिता की डिग्री को दर्शाता है, जहां 0x00 बिल्कुल पारदर्शी है, और 0xFF बिल्कुल भी पारदर्शी नहीं है।

TextStyle(…) एक और भी दिलचस्प विजेट है, इसके साथ आप रंग, आकार, मोटाई, लाइन रिक्ति, अंडरलाइन और अधिक सेट कर सकते हैं।

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

प्रो स्टेटलेस विजेट्स

विजेट्स का उपयोग कैसे करें - हम समझ गए हैं, अब आइए जानें कि उन्हें कैसे बनाया जाए। यह पहले से ही ऊपर उल्लेख किया गया था कि ऐसे विगेट्स हैं जिनके पास एक राज्य है और यह नहीं है। अब तक, हमने केवल स्टेटलेस विजेट्स का उपयोग किया है। इसका मतलब यह नहीं है कि उनके पास यह बिल्कुल नहीं है, क्योंकि विगेट्स सिर्फ कक्षाएं हैं, और उनके गुणों को बदला जा सकता है। विजेट के प्रस्तुत होने के बाद, इसकी स्थिति बदलने से UI में इस विजेट को अपडेट नहीं किया जाएगा। उदाहरण के लिए, यदि हमें स्क्रीन पर पाठ को बदलने की आवश्यकता है, तो हमें एक और Text विजेट उत्पन्न करना होगा और नई सामग्री को निर्दिष्ट करना होगा जिसे हम प्रदर्शित करना चाहते हैं। इस तरह के विजेट को स्थिर कहा जा सकता है, यदि आप जानते हैं कि मेरा क्या मतलब है। और वे सरल हैं, तो चलो उनके साथ शुरू करते हैं।

एक स्टेटलेस विजेट बनाने के लिए, आपको चाहिए:

नए वर्ग के लिए एक सुंदर नाम के साथ आओ;
StatelessWidget से एक वर्ग इनहेरिट;
एक build() पद्धति को लागू करें जो BuildContext को एक तर्क के रूप में लेती है और किसी प्रकार का Widget लौटाती है।

 import 'package:flutter/widgets.dart'; main() => runApp( Directionality( textDirection: TextDirection.ltr, child: Center( child: MyStatelessWidget() ), ), ); class MyStatelessWidget extends StatelessWidget { //  @override   ,    , //         //  ,       @override Widget build(BuildContext context) { // [context]    return Text('Hello!'); } }

उदाहरण एक तर्क के साथ विजेट:

 // … class MyStatelessWidget extends StatelessWidget { //   Stateless      final,   const final String name; //   MyStatelessWidget(this.name); //   @override Widget build(BuildContext context) { // [context]     return Text('Hello, $name!'); } }

स्टेटलेस के बारे में, और कुछ नहीं जोड़ना है ...

हॉट रीलोड के बारे में

कृपया ध्यान दें कि हमारे विजेट की सामग्री बदलते समय, एप्लिकेशन स्वचालित रूप से फिर से तैयार हो जाएगा। जब हमने main() फ़ंक्शन से विजेट हटा दिया, तो हॉट-रीलोड ने हमारी मदद करना शुरू कर दिया।

यह समझना भी महत्वपूर्ण है कि हॉट स्वैपिंग के लिए लॉन्च किए गए मॉड्यूल के कारण, एप्लिकेशन एक परिमाण धीमा करने का क्रम चलाता है।

GestureDetector के बारे में

कार्रवाई GestureDetector विजेट

अगले भाग में, हम StatefulWidget (उन विजेट्स के साथ व्यवहार करेंगे जो उनके राज्य बदलते हैं)। इसके लिए दिलचस्प होने के लिए, हमें किसी तरह इस राज्य को बदलने की आवश्यकता है, सहमत हैं? हम स्क्रीन पर छूने के जवाब में विजेट की स्थिति को बदल देंगे। ऐसा करने के लिए, हम GestureDetector(…) उपयोग करेंगे - एक विजेट जो कुछ भी नहीं खींचता है, लेकिन मॉनिटर स्मार्टफोन की स्क्रीन पर छूता है और इसके बारे में रिपोर्ट करता है कि इसे स्थानांतरित किए गए फ़ंक्शन को कॉल कर रहा है।

स्क्रीन के केंद्र में एक बटन बनाएँ, जब क्लिक किया जाता है, एक संदेश कंसोल में प्रदर्शित होगा:

 import 'package:flutter/widgets.dart'; main() => runApp( Directionality( textDirection: TextDirection.ltr, child: Container( color: Color(0xFFFFFFFF), child: App(), ), ), ); class App extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: GestureDetector( //     onTap: () { //    GestureDetector //    ,      print('You pressed me'); }, child: Container( //     decoration: BoxDecoration( //   shape: BoxShape.circle, //     color: Color(0xFF17A2B8), //      ), width: 80.0, height: 80.0, ), ), ); } }

नीले बटन पर क्लिक करें और कंसोल में संदेश देखें। हम बार-बार क्लिक करते हैं और हम संदेश को कंसोल में देखते हैं। एक बार फिर से ... ठीक है, चिपकना बंद करो।

स्टेटफुल विजेट

StatefulWidget - StatelessWidget की तुलना में सरल, सरल भी। लेकिन एक अति सूक्ष्म अंतर है: वे खुद से मौजूद नहीं हैं, उनके काम के लिए हमें एक और वर्ग की आवश्यकता है जो इस विजेट की स्थिति को संग्रहीत करेगा। उसी समय, इसका दृश्य भाग (इसमें शामिल विजेट्स) भी इसका राज्य बन जाता है।

आरंभ करने के लिए, विजेट वर्ग देखें:

 // … class Counter extends StatefulWidget { //      ,     , //   createState() @override State<Counter> createState() => _CounterState(); //        State, //   State<> }

ऊपर, हमने एक "रिक्त" विजेट बनाया, जिसने एक बहुत ही सरल createState() पद्धति को लागू किया। प्रस्तुति और स्थिति का यह पृथक्करण फ़्लटर को अनुप्रयोग का अनुकूलन करने की अनुमति देता है।

राज्य वस्तु पूरी तरह से सीधी है। इसके अलावा, यह लगभग हमारे द्वारा लिखित StatelessWidget समान है। इसका मुख्य अंतर माता-पिता वर्ग है।

 // … class _CounterState extends State<Counter> { //    -    , //      . //   ,     int counter = 0; //     ,       //   ,      Stateless . @override Widget build(BuildContext context) { //          , //     —  : return Center( child: GestureDetector( onTap: () { //  ,   ,    //  counter. setState(() { // setState()   ,    //      ,    ++counter; }); }, child: Container( decoration: BoxDecoration( shape: BoxShape.circle, color: Color(0xFF17A2B8), ), width: 80.0, child: Center( child: Text( //    counter '$counter', //      style: TextStyle(fontSize: 30.0), ), ), ), ), ); } }

काउंटर अप हो रहा है

ध्यान दें कि वर्ग का नाम नीचे के नीचे से शुरू होता है। डार्ट में, अंडरस्कोर से शुरू होने वाले सभी नाम निजी मूल्यों की पहचान करते हैं। और स्पंदन में विगेट्स की स्थिति आमतौर पर निजी छोड़ दी जाती है, हालांकि यह आवश्यक नहीं है।

हमने क्या शानदार आवेदन किया है! यह एक शानदार परिणाम है। लेकिन इससे पहले कि आप पाठ्यक्रम के इस हिस्से को समाप्त करें, आइए एक जोड़े को और अधिक दिलचस्प विगेट्स देखें। केवल इस बार हम अधिक कोड लिखेंगे, बस इसे और अधिक रोचक बनाने के लिए। आवेदन के अधिकांश आप के लिए परिचित होना चाहिए, और बाकी आप पहले से ही समझने के लिए सीखना चाहिए था:

 import 'package:flutter/widgets.dart'; main() => runApp(App()); class App extends StatelessWidget { @override Widget build(BuildContext context) { return Directionality( textDirection: TextDirection.ltr, child: Container( padding: EdgeInsets.symmetric( vertical: 60.0, horizontal: 20.0, ), color: Color(0xFFFFFFFF), child: Content(), ), ); } } class Content extends StatelessWidget { @override Widget build(BuildContext context) { return Column( children: [ Counter('Manchester United'), Counter('Juventus'), ], ); } } class Counter extends StatefulWidget { final String _name; Counter(this._name); @override State<Counter> createState() => _CounterState(); } class _CounterState extends State<Counter> { int count = 0; @override Widget build(BuildContext context) { return Container( margin: EdgeInsets.only(bottom: 10.0), padding: EdgeInsets.all(4.0), decoration: BoxDecoration( border: Border.all(color: Color(0xFFFD6A02)), borderRadius: BorderRadius.circular(4.0), ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ // widget —    State,    //      ,      _CounterLabel(widget._name), _CounterButton( count, onPressed: () { setState(() { ++count; }); }, ), ], ), ); } } class _CounterLabel extends StatelessWidget { static const textStyle = TextStyle( color: Color(0xFF000000), fontSize: 26.0, ); final String _label; _CounterLabel(this._label); @override Widget build(BuildContext context) { return Text( _label, style: _CounterLabel.textStyle, ); } } class _CounterButton extends StatelessWidget { final _count; final _onPressed; _CounterButton(this._count, {@required this._onPressed}); @override Widget build(BuildContext context) { return GestureDetector( onTap: () { _onPressed(); }, child: Container( padding: EdgeInsets.symmetric(horizontal: 6.0), decoration: BoxDecoration( color: Color(0xFFFD6A02), borderRadius: BorderRadius.circular(4.0), ), child: Center( child: Text( '$_count', style: TextStyle(fontSize: 20.0), ), ), ), ); } }

स्पंदन पर एक और काउंटर प्रति

हमारे पास दो नए विजेट हैं: Column() और Row() । यह पता लगाने की कोशिश करें कि वे क्या कर रहे हैं। अगले लेख में, हम उन्हें और अधिक विस्तार से विचार करेंगे, साथ ही एक से अधिक विजेट को देखेंगे जो आपको अन्य विजेट्स को एक साथ बनाने की अनुमति देता है, और फ़्लटर लाइब्रेरी नामक सामग्री का उपयोग करके एक अच्छा अनुप्रयोग बनाता है।

होमवर्क के बारे में

यदि आप अपने अवकाश में कुछ और पढ़ना चाहते हैं, तो यहां दिलचस्प लिंक की एक सूची है:

https://flutter.io/docs/get-started/flutter-for/web-devs
वीएस कोड और इंटेलीज से कोड के साथ काम करना
विगेट्स के बारे में अधिक
कोड को पुनरारंभ नहीं होने पर समझने के लिए आपको हॉट रीलोड के बारे में भी पढ़ना चाहिए।