MDC-102: सामग्री संरचना और लेआउट

सामग्री डिजाइन नेविगेशन प्रारूप प्रदान करता है जो उपयोग में बहुत आसानी की गारंटी देता है. सबसे अधिक दिखाई देने वाले घटकों में से एक ऊपरी अनुप्रयोग बार है.

एक Google Play डेवलपर खाता बनाएँ

अपनी व्यक्तिगत जानकारी, अपनी पसंद और अपने पासवर्ड का पता सूचित करें.

बिक्री की सामान्य शर्तों को स्वीकार करें (GTC).

खुद की एक अच्छी तस्वीर जोड़ें.

एक Google Play डेवलपर खाता बनाएँ

Google Play डेवलपर खाता बनाने की प्रक्रिया Apple की तुलना में बहुत सरल है.

अपने जीमेल पते से कनेक्ट करें.

GTC स्वीकार करें.

पंजीकरण शुल्क समायोजित करें: अपनी पसंद के सभी अनुप्रयोगों को प्रकाशित करने के लिए 25 यूरो का एकल भुगतान !

अपने खाते से संबंधित जानकारी को सूचित करें: डेवलपर नाम, ईमेल पता और टेलीफोन नंबर.

इसने आपके प्रश्न का उत्तर दिया है ?

टिप्पणियों के लिए धन्यवाद, आपकी टिप्पणी प्रस्तुत करने के लिए एक समस्या थी. कृपया बाद में पुन: प्रयास करें.

9 नवंबर, 2021 को अंतिम अद्यतन

संबद्ध लेख

• Google Play कंसोल पर एक एप्लिकेशन बनाएं
• Android P12 प्रमाणपत्र उत्पन्न करें
• APK या AAB फ़ाइल निर्यात करें
• एक Android एप्लिकेशन प्रकाशित करें
• प्ले स्टोर के बाहर एक एंड्रॉइड ऐप प्रकाशित करें
• Google Play Store पर प्रकाशित करें

MDC-102: सामग्री संरचना और लेआउट

सामग्री घटक (एमडीसी) डेवलपर्स को सामग्री डिजाइन को लागू करने में मदद करता है. Google में इंजीनियरों और उपयोगकर्ता अनुभव विशेषज्ञों की एक टीम द्वारा डिज़ाइन किया गया, MDC दर्जनों सुरुचिपूर्ण और कार्यात्मक उपयोगकर्ता इंटरफ़ेस घटक प्रदान करता है. यह Android, iOS, वेब और स्पंदन के लिए उपलब्ध है.सामग्री.Io/विकास.

MDC-101 प्रोग्रामिंग वर्कशॉप में, आपने एक कनेक्शन पेज बनाने के लिए दो सामग्री घटकों के तत्वों का उपयोग किया: “स्याही” एनिमेशन युक्त पाठ फ़ील्ड और बटन. इन ठिकानों पर, हम नेविगेशन, संरचना और डेटा जोड़कर अपने आवेदन को समृद्ध करते हैं.

कार्यशाला उद्देश्य

इस प्रोग्रामिंग वर्कशॉप में, आप के लिए एक होम स्क्रीन बनाएंगे मंदिर, घर के लिए कपड़ों और वस्तुओं की बिक्री के लिए एक ई-कॉमर्स आवेदन. इस स्क्रीन में शामिल होंगे:

• एक उच्च अनुप्रयोग बार
• ग्रिड के रूप में उत्पादों की एक सूची

कृपया ध्यान दें कि इस प्रोग्रामिंग वर्कशॉप को स्क्रीनशॉट के अपवाद के साथ मटेरियल 3 द्वारा बदल दिया गया था. फिर भी वे एक ही जानकारी व्यक्त करते हैं.

यह प्रोग्रामिंग वर्कशॉप चार कार्यशालाओं में से दूसरा है जो आपको अभयारण्य नामक उत्पाद के लिए एक एप्लिकेशन बनाने में मदद करेगा. हम अनुशंसा करते हैं कि आप सभी प्रोग्रामिंग वर्कशॉप का अनुसरण करें, जो कि कम से कम कार्यों में आगे बढ़ने के लिए है. आपको यहां अपनी प्रोग्रामिंग वर्कशॉप मिलेंगे:

• MDC-101 स्पंदन: सामग्री घटकों के बुनियादी सिद्धांत
• एमडीसी -103 स्पंदन: सामग्री डिजाइन के विषयों का उपयोग (रंग, आकार, ऊंचाई और प्रकार)
• MDC-104 स्पंदन: उन्नत सामग्री डिजाइन घटक

इस प्रोग्रामिंग वर्कशॉप में सामग्री स्पंदन सामग्री घटक और सबसिस्टम

• अपर
• ग्रिड
• पत्ते

इस प्रोग्रामिंग वर्कशॉप में, आप सामग्री स्पंदन द्वारा प्रदान किए गए डिफ़ॉल्ट घटकों का उपयोग करेंगे. आप उन्हें MDC-103 अनुभाग में अनुकूलित करना सीखेंगे: सामग्री डिजाइन के विषयों का उपयोग (रंग, आकार, ऊंचाई और प्रकार).

आप स्पंदन के साथ विकास में अपने अनुभव के स्तर का आकलन कैसे करेंगे ?

2. स्पंदन विकास वातावरण को कॉन्फ़िगर करें

इस कार्यशाला के लिए, आपको दो सॉफ़्टवेयर की आवश्यकता है: द फ्लटर एसडीके और एक प्रकाशक.

आप निम्नलिखित उपकरणों में से एक पर प्रोग्रामिंग कार्यशाला चला सकते हैं:

• एक Android या भौतिक iOS डिवाइस आपके कंप्यूटर से जुड़ा है और डेवलपर मोड में सेट है.
• IOS सिम्युलेटर (स्थापित करने के लिए XCODE टूल).
• Android एमुलेटर (जिसे Android स्टूडियो में कॉन्फ़िगर किया जाना चाहिए).
• एक ब्राउज़र (डिबगिंग के लिए क्रोम की आवश्यकता है).
• विंडोज, लिनक्स या मैकओएस डेस्कटॉप के रूप में. आपको उस प्लेटफ़ॉर्म पर अपना एप्लिकेशन विकसित करना होगा जहां आप इसे तैनात करने की योजना बनाते हैं. उदाहरण के लिए, यदि आप विंडोज डेस्कटॉप एप्लिकेशन विकसित करना चाहते हैं, तो आपको उचित संकलन श्रृंखला तक पहुंचने के लिए इसे विंडोज पर करना होगा. ऑपरेटिंग सिस्टम के लिए विशिष्ट आवश्यकताओं के बारे में भी जानें, जो डॉक्स पर विस्तृत हैं.स्पंदन.देव/डेस्कटॉप.

3. प्रोग्रामिंग वर्कशॉप के लिए प्रस्थान ऐप डाउनलोड करें

आपने पहले ही MDC-101 कार्यशाला का पालन किया है ?

यदि आपने MDC-101 प्रोग्रामिंग कार्यशाला समाप्त कर ली है, तो आपका कोड इस कार्यशाला को शुरू करने के लिए तैयार होना चाहिए. अगले चरण में जाएं: एक उच्च एप्लिकेशन बार जोड़ें.

आप खरोंच से शुरू करते हैं ?

शुरुआती कार्यशाला प्रस्थान आवेदन डाउनलोड करें

शुरुआती एप्लिकेशन सामग्री-घटक-फ्लेटर-कॉडेलैब्स -102-starter_and_101-complete/mdc_100_series में है .

… या github से कार्यशाला को क्लोन करें

GitHub से इस प्रोग्रामिंग कार्यशाला को क्लोन करने के लिए, निम्नलिखित कमांड चलाएं:

Git क्लोन https: // github.Com/सामग्री-घटक/सामग्री-घटक-फूल-codelabs.GIT CD Material-Components-Flutter-Codelabs/MDC_100_SERIES GIT चेकआउट 102-STARTER_AND_101- पूर्ण

मदद के लिए, GitHub से क्लोनिंग अनुभाग देखें

सही शाखा चुनें

MDC-101 प्रोग्रामिंग कार्यशालाएं 104 पर एक दूसरे पर भरोसा करती हैं. इसलिए जब आप MDC-102 कार्यशाला के लिए कोड समाप्त करते हैं, तो यह MDC-103 कार्यशाला का शुरुआती कोड बन जाता है. कोड को कई शाखाओं में विभाजित किया गया है, जिसे आप इस कमांड का उपयोग करके सूची प्रदर्शित कर सकते हैं:

गिट शाखा -सूची

तैयार कोड प्रदर्शित करने के लिए, 103-starter_and_102- पूर्ण शाखा पर जाएं .

प्रोजेक्ट खोलें और एप्लिकेशन को निष्पादित करें

1. अपनी पसंद के प्रकाशक में परियोजना खोलें.
2. आपके द्वारा चुने गए प्रकाशक से संबंधित निर्देशों का पालन करें. वे “रन द ऐप” पैराग्राफ (एप्लिकेशन को निष्पादित करें) के लिए सुलभ हैं।.

सफल संचालन. MDC-101 प्रोग्रामिंग वर्कशॉप से ​​अभयारण्य कनेक्शन पृष्ठ आपके डिवाइस पर प्रदर्शित किया जाना चाहिए.

अब जब कनेक्शन स्क्रीन जगह में है, तो आइए कुछ उत्पादों को एप्लिकेशन में जोड़ें.

4. एक उच्च एप्लिकेशन बार जोड़ें

फिलहाल, यदि आप “अगला” बटन पर क्लिक करते हैं, तो होम स्क्रीन संदेश के साथ प्रदर्शित होती है “आपने किया था!” (आप सफल हुए.)). उत्तम. हालांकि, हमारे उपयोगकर्ता के पास कुछ नहीं करना है और यह नहीं जानता कि वह आवेदन में कहां है. आपकी मदद करने के लिए, यह नेविगेशन जोड़ने का समय है.

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

अधिक जानने के लिए, सामग्री डिजाइन निर्देशों में नेविगेशन के लिए समर्पित लेख से परामर्श करें.

सामग्री डिजाइन नेविगेशन प्रारूप प्रदान करता है जो उपयोग में बहुत आसानी की गारंटी देता है. सबसे अधिक दिखाई देने वाले घटकों में से एक ऊपरी अनुप्रयोग बार है.

आप IOS के तहत “नेविगेशन बार” नाम के तहत इस तत्व को जान सकते हैं, या बस “एप्लिकेशन बार” या “हेडर”.

उपयोगकर्ताओं को अन्य कार्यों के लिए त्वरित पहुंच प्रदान करने के लिए, आइए एक उच्च एप्लिकेशन बार जोड़ें.

एक ऐपबार विजेट जोड़ें

मेँ घर मेँ.डार्ट, “स्कैफोल्ड” में एक ऐपबार जोड़ें, फिर हाइलाइट किए गए कॉन्स्ट को हटा दें:

रिटर्न कांस्ट स्कैफोल्ड (// TODO: ऐप बार जोड़ें (102) Appbar: Appbar (// TODO: बटन जोड़ें और शीर्षक (102)), 

के अलावाऐपबार ऐपबार फ़ील्ड में: स्कैफोल्डिंग हमें एक आदर्श और मुफ्त लेआउट प्राप्त करने की अनुमति देता है, जिससे एप्लिकेशन बार को पृष्ठ के शीर्ष पर और शरीर के नीचे छोड़ दिया जाता है.

पाड़ MatterialApps में एक महत्वपूर्ण विजेट है. यह सभी प्रकार के वर्तमान मामलों के घटकों को प्रदर्शित करने के लिए व्यावहारिक एपीआई प्रदान करता है, जैसे कि पैनल, “स्नैकबार” अधिसूचना बार और नीचे शीट तत्व. यह एक फ्लोटिंग एक्शन बटन के प्लेसमेंट की सुविधा भी देता है.

स्कैफोल्ड के बारे में अधिक जानने के लिए स्पंदन प्रलेखन से परामर्श करें.

परियोजना को रिकॉर्ड करें. एक बार तीर्थ को अपडेट करने के बाद, पर क्लिक करें अगला (निम्नलिखित) होम स्क्रीन प्रदर्शित करने के लिए.

तत्व अच्छी तरह से तैनात है, लेकिन इसमें एक शीर्षक का अभाव है.

एक पाठ विजेट जोड़ें

मेँ घर मेँ.डार्ट, ऐपबार एप्लिकेशन बार में एक शीर्षक जोड़ें:

// TODO: ऐप बार जोड़ें (102) ऐपबार: ऐपबार (// टोडो: बटन और शीर्षक जोड़ें (102) शीर्षक: कॉन्स्ट टेक्स्ट ('श्राइन'), // TODO: ट्रेलिंग बटन जोड़ें (102) 

परियोजना को रिकॉर्ड करें.

आपने प्रत्येक प्लेटफ़ॉर्म के लिए भिन्नता देखी होगी. सामग्री डिज़ाइन सिस्टम इस बात को ध्यान में रखता है कि प्रत्येक प्लेटफ़ॉर्म (Android, iOS, वेब) अलग है और उपयोगकर्ता की उम्मीदें अलग हैं. उदाहरण के लिए, iOS पर, शीर्षक लगभग हमेशा केंद्रित होते हैं. यह UIKIT द्वारा प्रदान किया गया डिफ़ॉल्ट व्यवहार है. Android पर, वे बाईं ओर पंक्तिबद्ध हैं. इसलिए, यदि आप एक एमुलेटर या एंड्रॉइड डिवाइस का उपयोग करते हैं, तो आपका शीर्षक बाईं ओर संरेखित किया जाना चाहिए. एक सिम्युलेटर या आईओएस डिवाइस के मामले में, इसे केंद्रित होना चाहिए.

अधिक जानने के लिए, सामग्री डिजाइन के साथ विभिन्न प्लेटफार्मों के अनुकूलन पर इस लेख से परामर्श करें.

कई एप्लिकेशन बार में शीर्षक के बगल में एक बटन होता है. हमारे एप्लिकेशन में एक मेनू आइकन जोड़ें.

लाइन की शुरुआत में एक IconButton बटन जोड़ें

हमेशा घर में.डार्ट, अग्रणी क्षेत्र के लिए एक IConButton तत्व को परिभाषित करें: Appbar एप्लिकेशन बार के लिए. (इसे शीर्षक फ़ील्ड से पहले रखें: शुरू से लेकर लाइन के अंत तक शुरू के अनुसार):

 // TODO: बटन और शीर्षक जोड़ें (102) अग्रणी: IconButton (ICON: CONST ICON (आइकन (आइकन).मेनू, semanticlabel: 'मेनू',), onpressed: () < print('Menu button'); >, )), 

परियोजना को रिकॉर्ड करें.

मेनू आइकन (जिसे “हैमबर्गर” भी कहा जाता है), वांछित स्थान पर दिखाई देता है.

कक्षा इकोनबटन आपके एप्लिकेशन में सामग्री आइकन को एकीकृत करने का एक व्यावहारिक तरीका है. वह एक विजेट का उपयोग करती है आइकन. फ्लूट में कक्षा में आइकन का पूरा संग्रह है माउस. आइकन स्वचालित रूप से “कॉन्स्ट” चैनल मैपिंग के अनुसार आयात किए जाते हैं.

आइकन क्लास के बारे में अधिक जानने के लिए, स्पंदन प्रलेखन देखें. आइकन विजेट के बारे में अधिक जानने के लिए, स्पंदन प्रलेखन देखें.

आप लाइन के अंत में बटन भी जोड़ सकते हैं. स्पंदन में, इन बटन को “क्रिया” कहा जाता है.

शर्तें शुरुआत और अंत संबंधित भाषा की परवाह किए बिना पढ़ने का अर्थ व्यक्त करें. जब आप एक जीभ में काम करते हैं, तो बाएं से दाएं पढ़ते हैं, जैसे कि अंग्रेजी, शुरुआत मतलब बांई ओर और अंत मतलब दांई ओर. एक भाषा में जो दाएं से बाएं, अरबी की तरह, शब्द, शब्द में पढ़ती है शुरुआत मतलब दांई ओर, और अंत मतलब बांई ओर.

उपयोगकर्ता इंटरफ़ेस के उलट के बारे में अधिक जानने के लिए, द्विदिश पर सामग्री डिजाइन निर्देशों से परामर्श करें.

क्रियाएं जोड़ें

दो अन्य iconbutton तत्वों के लिए पर्याप्त जगह है.

शीर्षक के बाद उन्हें ऐपबार उदाहरण में जोड़ें:

// TODO: अनुगामी बटन जोड़ें (102) क्रियाएं: [IconButton (ICON: CONST ICON (आइकन (आइकन).खोज, semanticlabel: 'खोज',), ontpresd: () < print('Search button'); >, ), Iconbutton (ICON: CONST ICON (आइकन (आइकन).ट्यून, semanticlabel: 'फ़िल्टर',), onpresd: () < print('Filter button'); >, ),], 

परियोजना को रिकॉर्ड करें. आपकी होम स्क्रीन निम्नानुसार उत्पन्न होनी चाहिए:

अब एप्लिकेशन में लाइन की शुरुआत में एक बटन, एक शीर्षक और दाईं ओर दो क्रियाएं हैं. एप्लिकेशन बार का भी प्रभाव पड़ता हैऊंचाई थोड़ी सी छाया के कारण यह दर्शाता है कि यह सामग्री से एक अलग स्तर पर है.

एक आइकन वर्ग में, क्षेत्र सिमेंटिकलाबेल स्पंदन के लिए एक्सेसिबिलिटी जानकारी जोड़ने का एक सामान्य तरीका है. यह एक प्रणाली है जो एंड्रॉइड कंटेंट वर्डिंग और UIACCESSIBILITY कार्यक्षमता के बहुत करीब है . आप इसे कई पाठ्यक्रमों में पाएंगे.

इस क्षेत्र में निहित जानकारी इस बटन की भूमिका पर स्क्रीन पाठकों के बारे में जानकारी प्रदान करना संभव बनाती है.

यदि एक विजेट में एक semanticlabel फ़ील्ड नहीं है:, आप इसे एक विजेट में एनकैप्सुलेट कर सकते हैं अर्थ विज्ञान. शब्दार्थ विजेट के बारे में अधिक जानने के लिए, फ्लूट प्रलेखन देखें.

5. एक ग्रिड में एक शीट जोड़ें

अब जब हमारा एप्लिकेशन थोड़ा अधिक संरचित है, तो हमें फाइलों में रखकर इसकी सामग्री को व्यवस्थित करें.

पत्ते स्वतंत्र तत्व हैं जो किसी दिए गए विषय से जुड़ी सामग्री और कार्यों को प्रदर्शित करते हैं. वे एक संग्रह के रूप में समान सामग्री प्रस्तुत करने के लिए एक लचीला तरीका प्रदान करते हैं.

अधिक जानने के लिए, सामग्री डिजाइन निर्देशों में फ़ाइलों के लिए समर्पित लेख देखें.

कार्ड विजेट (शीट) के बारे में अधिक जानने के लिए, फ़्लटर में लेआउट के निर्माण पर लेख से परामर्श करें.

एक ग्रिडव्यू विजेट जोड़ें

आइए ऊपरी एप्लिकेशन बार के नीचे एक शीट जोड़कर शुरू करें. वर्तमान में, विजेट कार्ड (शीट) में अपने आप को दृष्टिहीन स्थिति के लिए पर्याप्त जानकारी नहीं है. इसलिए हम इसे एक विजेट में एनकैप्सुलेट करेंगे जालक दृश्य.

एक ग्रिडव्यू विजेट के साथ पाड़ तत्व के शरीर में केंद्र को बदलें:

// TODO: एक ग्रिड दृश्य जोड़ें (102) बॉडी: ग्रिडव्यू.काउंट (क्रॉसएक्सिसाउंट: 2, पैडिंग: कॉन्स्ट एजइन्स्ट्स.सभी (16.0), ChildaspectRatio: 8.0/9.0, // TODO: कार्ड का एक ग्रिड बनाएं (102) बच्चे: [कार्ड ()],),),), 

इस कोड का विश्लेषण करते हैं. ग्राइवर विजेट निर्माता की गिनती () को कॉल करता है, क्योंकि इसके द्वारा प्रदर्शित तत्वों की संख्या को गिना जा सकता है और यह अनंत नहीं है. लेकिन उसे अपने लेआउट को परिभाषित करने के लिए अतिरिक्त जानकारी की आवश्यकता है.

Crossaxiscount चर: प्रति पंक्ति तत्वों की संख्या को इंगित करता है. हम दो कॉलम प्राप्त करना चाहते हैं.

L ‘ट्रांसवर्सल अक्ष स्पंदन में उस अक्ष से मेल खाता है जिसे हम स्क्रॉल नहीं करते हैं. स्क्रॉलिंग की भावना को कहा जाता है मुख्य अक्ष. यदि आप ऊर्ध्वाधर स्क्रॉलिंग का उपयोग करते हैं, जैसा कि ग्रिडव्यू के साथ डिफ़ॉल्ट मामला है, तो अनुप्रस्थ अक्ष क्षैतिज है.

अधिक जानने के लिए, लेआउट बनाने के लिए समर्पित पृष्ठ देखें.

पैडिंग फ़ील्ड: ग्रिडव्यू विजेट के चार किनारों पर एक खाली स्थान को परिभाषित करता है. बेशक, यह मार्जिन तत्व के परिणामस्वरूप या उसके नीचे दिखाई नहीं देता है, क्योंकि इस समय इस तत्व के बगल में कोई बच्चा ग्रिडव्यू नहीं रखा गया है.

Childaspepto फ़ील्ड: अनुपात के रूप में तत्वों के आकार की पहचान करता है (ऊंचाई पर चौड़ाई).

डिफ़ॉल्ट रूप से, ग्रिडव्यू समान आकार के ब्लॉक बनाता है.

हमारे पास एक शीट है, लेकिन यह खाली है. इस शीट में बच्चों के विजेट जोड़ें.

सामग्री रखो

चादरों में एक छवि, एक शीर्षक और माध्यमिक पाठ के लिए क्षेत्र शामिल होना चाहिए.

ग्रिडव्यू विजेट से बच्चों को अपडेट करें:

// TODO: कार्ड का एक ग्रिड बनाएं (102) बच्चे: [कार्ड (Clipbehavior: क्लिप.एंटीलियस, चाइल्ड: कॉलम (क्रॉसएक्सिसलिग्नमेंट: क्रॉसएक्सिसलिग्नमेंट.प्रारंभ, बच्चे: [raceptratio (raceptratio: 18.0/11.0, बच्चा: छवि.परिसंपत्ति ('संपत्ति/हीरा.png '),), पैडिंग (पैडिंग: कांस्टिंग एजिंस्ट्स.fromltrb (16).0, 12.0, 16.0, 8.0), चाइल्ड: कॉलम (CrossaxisAlignment: CrossaxisAlignment.प्रारंभ, बच्चे: [पाठ ('शीर्षक'), कॉन्स्ट आकार काबॉक्स (ऊंचाई: 8.0), पाठ ('माध्यमिक पाठ'),],),),],),)]]], 

यह कोड एक कॉलम विजेट (कॉलम) जोड़ता है जो आपको बच्चों के विजेट को लंबवत करने की अनुमति देता है.

CrossaxisAlignment पैरामीटर: फ़ील्ड CrossaxisAlignment मान निर्दिष्ट करता है.प्रारंभ करें, जिसका अर्थ है “लाइन की शुरुआत ‘” साइड “पर पाठ को संरेखित करें.

विजेट आस्पेक्ट अनुपात प्रदर्शित छवि के अनुपात को परिभाषित करता है, भले ही छवि के प्रकार की परवाह किए बिना.

तत्व गद्दी पाठ के लिए एक मार्जिन को परिभाषित करता है.

दो विजेट मूलपाठ एक के ऊपर एक को आठ खाली अंतरिक्ष बिंदुओं द्वारा रखा और अलग किया जाता है (आकार)). हम एक और तत्व बनाते हैं स्तंभ उन्हें आंतरिक मार्जिन देने के लिए.

परियोजना को रिकॉर्ड करें.

इस अवलोकन में, आप देख सकते हैं कि शीट एक मार्जिन के साथ तैनात है, इसके कोनों को गोल किया गया है और यह एक छाया (इसकी ऊंचाई का प्रतिनिधित्व करता है) प्रोजेक्ट करता है. पूरे फॉर्म को सामग्री डिजाइन प्रणाली में “कंटेनर” कहा जाता है (विजेट क्लास के साथ भ्रमित नहीं होना चाहिए जिसे कंटेनर कहा जाता है).

कंटेनर के अलावा, चादरों के सभी तत्व सामग्री में वैकल्पिक हैं. आप हेडर टेक्स्ट, एक स्टिकर या एक अवतार, एक उपशीर्षक पाठ, विभाजक और यहां तक ​​कि पिंपल्स और आइकन जोड़ सकते हैं.

चादरों की सामग्री के बारे में अधिक जानने के लिए, सामग्री डिजाइन निर्देशों में इस लेख से परामर्श करें.

चादरें आम तौर पर अन्य चादरों के साथ एक संग्रह में प्रदर्शित की जाती हैं. उन्हें एक ग्रिड में एक संग्रह के रूप में व्यवस्थित करें.

6. फ़ाइलों का एक संग्रह बनाएं

जब कई चादरें एक स्क्रीन पर मौजूद होती हैं, तो उन्हें एक या अधिक संग्रह में समूहीकृत किया जाता है. एक संग्रह की फाइलें कोपलानर हैं: उनके पास आराम से सभी समान ऊंचाई है (यह कहना है कि जब वे चयनित या स्थानांतरित नहीं किए जाते हैं, जो हम यहां नहीं करेंगे).

फ़ाइलों का एक संग्रह बनाएं

फिलहाल, हमारी शीट चिल्ड्रन फील्ड के अंदर तैनात है: ग्रिडव्यू ग्रिड. यह बड़ी मात्रा में नेस्टेड कोड की ओर जाता है जिसे पढ़ना मुश्किल हो सकता है. आइए हम कोड के इस हिस्से को एक फ़ंक्शन में बदल दें, जिससे आवश्यक हो उतनी खाली चादरें उत्पन्न हो सकें और फाइलों की सूची वापस कर सकें.

बिल्ड () फ़ंक्शन के ऊपर एक निजी फ़ंक्शन बनाएं (याद रखें कि एक अंडरलाइनिंग लाइन के साथ शुरू होने वाले फ़ंक्शन निजी एपीआई हैं):

// TODO: कार्ड का एक संग्रह बनाएं (102) सूची _BuildGridCards (INT CENT) < Listcards = List.generate( count, (int index) < return Card( clipBehavior: Clip.antiAlias, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ AspectRatio( aspectRatio: 18.0 / 11.0, child: Image.asset('assets/diamond.png'), ), Padding( padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: const [ Text('Title'), SizedBox(height: 8.0), Text('Secondary Text'), ], ), ), ], ), ); >, ); रिटर्न कार्ड; > 

ग्रिडव्यू विजेट के बच्चों के क्षेत्र में उत्पन्न फ़ाइलों को असाइन करें. इसे मत भूलना इस नए कोड के साथ ग्रिडव्यू विजेट में निहित सभी तत्वों को बदलें ::

// TODO: एक ग्रिड दृश्य जोड़ें (102) बॉडी: ग्रिडव्यू.काउंट (क्रॉसएक्सिसाउंट: 2, पैडिंग: कॉन्स्ट एजइन्स्ट्स.सभी (16.0), ChildaspectRatio: 8.0/9.0, बच्चे: _BuildGridCards (10) // प्रतिस्थापित), 

परियोजना को रिकॉर्ड करें.

कार्ड मौजूद हैं, लेकिन वे फिलहाल कुछ भी प्रदर्शित नहीं करते हैं. उत्पाद डेटा जोड़ने का समय आ गया है.

उत्पाद डेटा जोड़ें

एप्लिकेशन में छवियों, नामों और कीमतों के साथ कुछ उत्पाद हैं. इसे फ़ाइल में पहले से मौजूद विजेट में जोड़ें

फिर घर में.डार्ट, एक नया पैकेज आयात करें और डेटा मॉडल के लिए प्रदान की गई कुछ फाइलें:

आयात 'पैकेज: स्पंदन/सामग्री.डार्ट '; आयात 'पैकेज: INTL/INTL.डार्ट '; आयात 'मॉडल/उत्पाद.डार्ट '; आयात 'मॉडल/products_repository.डार्ट '; 

अंत में, उत्पाद जानकारी प्राप्त करने के लिए _BuildGridCards () को संशोधित करें और फ़ाइलों में इस डेटा का उपयोग करें:

// TODO: कार्ड का एक संग्रह बनाएं (102) // इस संपूर्ण विधि सूची को बदलें < Listproducts = ProductsRepository.loadProducts(Category.all); if (products.isEmpty) < return const []; > अंतिम थीमडाटा थीम = थीम.(संदर्भ); अंतिम नंबरफॉर्मैट फॉर्मेटर = नंबरफॉर्मैट.Simplecurrent (स्थानीय: परिसर.लोकलॉफ़ (संदर्भ).स्ट्रिंग ()); वापसी उत्पाद.मानचित्र (उत्पाद) < return Card( clipBehavior: Clip.antiAlias, // TODO: Adjust card heights (103) child: Column( // TODO: Center items on the card (103) crossAxisAlignment: CrossAxisAlignment.start, children: [ AspectRatio( aspectRatio: 18 / 11, child: Image.asset( product.assetName, package: product.assetPackage, // TODO: Adjust the box size (102) ), ), Expanded( child: Padding( padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0), child: Column( // TODO: Align labels to the bottom and center (103) crossAxisAlignment: CrossAxisAlignment.start, // TODO: Change innermost Column (103) children: [ // TODO: Handle overflowing labels (103) Text( product.name, style: theme.textTheme.titleLarge, maxLines: 1, ), const SizedBox(height: 8.0), Text( formatter.format(product.price), style: theme.textTheme.titleSmall, ), ], ), ), ), ], ), ); >)).सूची बनाने के लिए (); > 

ध्यान दिया : संकलन और निष्पादन शुरू करने से पहले प्रतीक्षा करें. बनाने के लिए एक संशोधन रहता है.

पाठ को प्रारूपित करने के लिए, हम थीम डेटा का उपयोग करते हैं थैदाटा मूल्य से BuildContext मौजूदा.

पाठ के स्वरूपण के बारे में अधिक जानने के लिए, सामग्री डिजाइन निर्देशों में टाइपोग्राफी पर लेख से परामर्श करें. किसी थीम से फॉर्मेटिंग के बारे में अधिक जानने के लिए, एमडीसी -103 के साथ इस प्रोग्रामिंग वर्कशॉप के बाद जारी रखें: सामग्री डिजाइन के विषयों का उपयोग (रंग, आकार, ऊंचाई और प्रकार).

मान को प्रसारित करने के लिए बिल्ड () फ़ंक्शन को भी संशोधित करें BuildContext संकलन शुरू करने से पहले _BuildGridCards () पर:

// TODO: एक ग्रिड दृश्य जोड़ें (102) बॉडी: ग्रिडव्यू.काउंट (क्रॉसएक्सिसाउंट: 2, पैडिंग: कॉन्स्ट एजइन्स्ट्स.सभी (16.0), ChildaspectRatio: 8.0/9.0, बच्चे: _BuildGridCards (संदर्भ) // परिवर्तन कोड), 

हॉट एप्लिकेशन को पुनरारंभ करें.

आप देख सकते हैं कि हम फ़ाइलों के बीच ऊर्ध्वाधर स्थान नहीं जोड़ते हैं. क्योंकि उनके पास ऊपर और नीचे से चार मार्जिन हैं.

परियोजना को रिकॉर्ड करें.

उत्पादित डेटा प्रदर्शित किए जाते हैं, लेकिन छवियां एक अनावश्यक स्थान से घिरी हुई हैं. डिफ़ॉल्ट रूप से, चित्र फ़ील्ड के साथ तैयार किए जाते हैं बॉक्सफिट परिभाषित .स्केल्डाउन (इस मामले में). इस मूल्य को बदलें .FitWidth ताकि वह अनावश्यक स्थान को ज़ूम इन कर सके और हटा सके.

एक फिट फ़ील्ड जोड़ें: बॉक्सफिट मान की तरह.चौड़ाई पर फ़िट:

 // TODO: बॉक्स का आकार समायोजित करें (102) फिट: बॉक्सफिट.चौड़ाई पर फ़िट, 

हमारे उत्पाद अब एप्लिकेशन में पूरी तरह से प्रदर्शित हो गए हैं.

7. बधाई हो !

हमारा एप्लिकेशन बुनियादी ऑपरेशन प्रदान करता है जो उपयोगकर्ता को कनेक्शन स्क्रीन से होम स्क्रीन पर जाने की अनुमति देता है जहां उत्पाद प्रदर्शित होते हैं. कोड की कुछ पंक्तियाँ एक उच्च एप्लिकेशन बार (एक शीर्षक और तीन बटन के साथ) और फ़ाइलों को जोड़ने के लिए पर्याप्त थीं (हमारे एप्लिकेशन की सामग्री प्रस्तुत करने के लिए). प्राप्त होम स्क्रीन सरल और कार्यात्मक है, और एक बुनियादी संरचना और प्रयोग करने योग्य सामग्री है.

MDC-102 एप्लिकेशन का पूरा संस्करण 103-starter_and_102- पूर्ण शाखा में उपलब्ध है .

आप इस शाखा के आवेदन के साथ पृष्ठ पर अपने संस्करण की तुलना कर सकते हैं.

पीछे पीछे जाना

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

यहां तक ​​कि अगर हमारा एप्लिकेशन पूरी तरह से काम करता है, तो यह एक ब्रांड पहचान या किसी विशेष दृष्टिकोण को प्रतिबिंबित नहीं करता है. MDC-103 कार्यशाला में: सामग्री डिजाइन (रंग, आकार, ऊंचाई और प्रकार) के विषयों का उपयोग, हम एक आधुनिक और गतिशील ब्रांड को व्यक्त करने के लिए इन घटकों की शैली को निजीकृत करेंगे.

इस प्रोग्रामिंग वर्कशॉप की प्राप्ति ने मुझसे एक समय और उचित प्रयासों के लिए कहा

पूर्णतया सहमत

न तो सहमत, न ही सहमत

बिल्कुल भी सहमत नहीं है

मैं सामग्री घटकों का उपयोग जारी रखना चाहता हूं

पूर्णतया सहमत

न तो सहमत, न ही सहमत

बिल्कुल भी सहमत नहीं है

जब तक अन्यथा इंगित नहीं किया जाता है, इस पृष्ठ की सामग्री एक क्रिएटिव कॉमन्स असाइनमेंट 4 लाइसेंस द्वारा नियंत्रित होती है.0, और कोड के नमूने अपाचे 2 लाइसेंस द्वारा शासित होते हैं.0. अधिक जानकारी के लिए, Google डेवलपर्स साइट के नियम देखें. जावा ओरेकल और/या इसकी संबद्ध कंपनियों का एक पंजीकृत ट्रेडमार्क है.