MDC-102: مادی ساخت اور ترتیب

مادی ڈیزائن نیویگیشن فارمیٹس پیش کرتا ہے جو استعمال میں آسانی کی ضمانت دیتا ہے. سب سے زیادہ دکھائے جانے والے اجزاء میں سے ایک اوپری درخواست بار ہے.

گوگل پلے ڈویلپر اکاؤنٹ بنائیں

اپنی ذاتی معلومات ، اپنی پسند کا پتہ اور اپنے پاس ورڈ سے آگاہ کریں.

فروخت کی عمومی شرائط (جی ٹی سی) کو قبول کریں.

اپنے آپ کی ایک اچھی تصویر شامل کریں.

گوگل پلے ڈویلپر اکاؤنٹ بنائیں

گوگل پلے ڈویلپر اکاؤنٹ بنانے کا طریقہ کار ایپل کے مقابلے میں بہت آسان ہے.

اپنے Gmail ایڈریس سے رابطہ کریں.

جی ٹی سی کو قبول کریں.

رجسٹریشن فیس ایڈجسٹ کریں: اپنی پسند کی تمام درخواستوں کو شائع کرنے کے لئے 25 یورو کی ایک ہی ادائیگی !

اپنے اکاؤنٹ سے متعلق معلومات سے آگاہ کریں: ڈویلپر کا نام ، ای میل ایڈریس اور ٹیلیفون نمبر.

اس نے آپ کے سوال کا جواب دیا ہے ?

تبصرے کے لئے آپ کا شکریہ کہ آپ کے تبصرے پیش کرنے میں ایک مسئلہ تھا. براہ کرم کچھ دیر بعد کوشش کریں.

9 نومبر 2021 کو آخری تازہ کاری

وابستہ مضامین

• گوگل پلے کنسول پر ایک ایپلی کیشن بنائیں
• Android P12 سرٹیفکیٹ تیار کریں
• APK یا AAB فائل برآمد کریں
• اینڈروئیڈ ایپلی کیشن شائع کریں
• پلے اسٹور کے باہر ایک اینڈروئیڈ ایپ شائع کریں
• گوگل پلے اسٹور پر شائع کریں

MDC-102: مادی ساخت اور ترتیب

مادی اجزاء (MDC) ڈویلپرز کو مادی ڈیزائن کو نافذ کرنے میں مدد کرتا ہے. گوگل میں انجینئرز اور صارف کے تجربے کے ماہرین کی ایک ٹیم کے ذریعہ ڈیزائن کیا گیا ، ایم ڈی سی درجنوں خوبصورت اور فنکشنل صارف انٹرفیس اجزاء پیش کرتا ہے. یہ اینڈروئیڈ ، آئی او ایس ، ویب اور پھڑپھڑ کے لئے دستیاب ہے.مواد.io/ترقی.

MDC-101 پروگرامنگ ورکشاپ میں ، آپ نے کنکشن کا صفحہ بنانے کے لئے دو مادی اجزاء کے عناصر کا استعمال کیا: ٹیکسٹ فیلڈز اور بٹن “سیاہی” متحرک تصاویر پر مشتمل. ان اڈوں پر ، آئیے نیویگیشن ، ڈھانچہ اور ڈیٹا شامل کرکے اپنی درخواست کو تقویت دیں.

ورکشاپ کے مقاصد

اس پروگرامنگ ورکشاپ میں ، آپ کے لئے ہوم اسکرین بنائیں گے مزار, گھر کے لئے لباس اور اشیاء کی فروخت کے لئے ایک ای کامرس درخواست. اس اسکرین پر مشتمل ہوگا:

• ایک اعلی درخواست بار
• گرڈ کی شکل میں مصنوعات کی ایک فہرست

براہ کرم نوٹ کریں کہ اس پروگرامنگ ورکشاپ کی جگہ اسکرین شاٹس کے استثنا کے ساتھ ، مواد 3 نے لے لی تھی. اس کے باوجود وہ وہی معلومات فراہم کرتے ہیں.

یہ پروگرامنگ ورکشاپ چار ورکشاپس میں سے دوسرا ہے جو آپ کو سینکوریری نامی مصنوعات کے لئے ایپلی کیشن بنانے میں مدد فراہم کرے گا۔. ہمارا مشورہ ہے کہ آپ پروگرامنگ کی تمام ورکشاپس کی پیروی کریں ، تاکہ بہت کم کاموں میں آگے بڑھیں. آپ کو اپنی پروگرامنگ ورکشاپس یہاں ملیں گی:

• MDC-101 پھڑپھڑ: مادی اجزاء کے بنیادی اصول
• MDC-103 پھڑپھڑاتے ہیں: مادی ڈیزائن کے موضوعات کا استعمال (رنگ ، شکلیں ، بلندی اور قسم)
• MDC-104 پھڑپھڑانا: جدید ترین مادی ڈیزائن کے اجزاء

اس پروگرامنگ ورکشاپ میں مادی پھڑپھڑ مٹیریل اجزاء اور سب سسٹم

• اوپری
• گرڈ
• کارڈز

اس پروگرامنگ ورکشاپ میں ، آپ مادی پھڑپھڑ کے ذریعہ فراہم کردہ پہلے سے طے شدہ اجزاء استعمال کریں گے. آپ انہیں MDC-103 سیکشن میں اپنی مرضی کے مطابق بنانا سیکھیں گے: مادی ڈیزائن کے موضوعات کا استعمال (رنگ ، شکلیں ، بلندی اور قسم).

پھڑپھڑ کے ساتھ آپ ترقی میں اپنے تجربے کی سطح کا اندازہ کیسے کریں گے ?

2. پھڑپھڑ کے ترقی کے ماحول کو تشکیل دیں

اس ورکشاپ کے ل you ، آپ کو دو سافٹ ویئر کی ضرورت ہے: فلٹر ایس ڈی کے اور ایک ناشر.

آپ مندرجہ ذیل آلات میں سے کسی ایک پر پروگرامنگ ورکشاپ چلا سکتے ہیں:

• آپ کے کمپیوٹر سے منسلک ایک Android یا جسمانی iOS ڈیوائس اور ڈویلپر موڈ میں سیٹ.
• iOS سمیلیٹر (انسٹال کرنے کے لئے ایکس کوڈ ٹولز).
• اینڈروئیڈ ایمولیٹر (جس کو اینڈروئیڈ اسٹوڈیو میں تشکیل دینا ضروری ہے).
• ایک براؤزر (ڈیبگنگ کے لئے کروم کی ضرورت ہے).
• ونڈوز ، لینکس یا میکوس ڈیسک ٹاپ کے طور پر. آپ کو اپنی درخواست کو اس پلیٹ فارم پر تیار کرنا ہوگا جہاں آپ اسے تعینات کرنے کا ارادہ رکھتے ہیں. مثال کے طور پر ، اگر آپ ونڈوز ڈیسک ٹاپ ایپلی کیشن تیار کرنا چاہتے ہیں تو ، مناسب تالیف چین تک رسائی کے ل you آپ کو ونڈوز پر کرنا ہوگا. آپریٹنگ سسٹم کی مخصوص ضروریات کے بارے میں بھی جانیں ، جو دستاویزات پر تفصیل سے ہیں.پھڑپھڑاتے ہیں.دیو/ڈیسک ٹاپ.

3. پروگرامنگ ورکشاپ کے لئے روانگی ایپ ڈاؤن لوڈ کریں

آپ نے پہلے ہی MDC-101 ورکشاپ کی پیروی کی ہے ?

اگر آپ نے MDC-101 پروگرامنگ ورکشاپ ختم کردی ہے تو ، آپ کا کوڈ اس ورکشاپ کو شروع کرنے کے لئے تیار ہونا چاہئے. اگلے مرحلے میں جائیں: ایک اعلی درخواست بار شامل کریں.

آپ شروع سے شروع کرتے ہیں ?

ابتدائی ورکشاپ روانگی کی درخواست ڈاؤن لوڈ کریں

شروعاتی ایپلی کیشن ماد con ثر-فلٹر-کوڈیلیبس -102-اسٹارٹر_ند_101- مکمل/MDC_100_SERIES میں ہے .

… یا گٹ ہب سے ورکشاپ کلون کریں

گٹ ہب سے اس پروگرامنگ ورکشاپ کو کلون کرنے کے لئے ، مندرجہ ذیل احکامات چلائیں:

گٹ کلون https: // گٹ ہب.com/مواد کے اجزاء/مواد کے اجزاء-فلٹر-کوڈیلیبس.گٹ سی ڈی میٹریل-اجزاء-فلٹر-کوڈیلیبس/MDC_100_SERIES GIT چیک آؤٹ 102-اسٹارٹر_ند_101- مکمل

مدد کے لئے ، گٹ ہب سے کلوننگ سیکشن دیکھیں

صحیح شاخ کا انتخاب کریں

MDC-101 پروگرامنگ ورکشاپس 104 پر ایک دوسرے پر انحصار کرتے ہیں. لہذا جب آپ MDC-102 ورکشاپ کا کوڈ ختم کرتے ہیں تو ، یہ MDC-103 ورکشاپ کا ابتدائی کوڈ بن جاتا ہے. کوڈ کو کئی شاخوں میں تقسیم کیا گیا ہے ، جسے آپ اس کمانڈ کا استعمال کرتے ہوئے فہرست کو ظاہر کرسکتے ہیں:

گٹ برانچ -فہرست

تیار شدہ کوڈ کو ظاہر کرنے کے لئے ، 103-اسٹارٹر_ند_102-مکمل برانچ میں جائیں .

پروجیکٹ کھولیں اور درخواست پر عملدرآمد کریں

1. اپنی پسند کے ناشر میں پروجیکٹ کو کھولیں.
2. آپ نے منتخب کردہ ناشر سے متعلق ہدایات پر عمل کریں. وہ “ایپ کو چلائیں” پیراگراف (درخواست پر عملدرآمد) کے لئے قابل رسائی ہیں> ٹیسٹ ڈرائیو پیج (پہلے قدم> ٹیسٹ) پر گیٹ شروع کریں۔.

کامیاب آپریشن. MDC-101 پروگرامنگ ورکشاپ سے سینکوریری کنکشن کا صفحہ آپ کے آلے پر ظاہر ہونا چاہئے.

اب چونکہ کنکشن اسکرین اپنی جگہ پر ہے ، آئیے درخواست میں کچھ مصنوعات شامل کریں.

4. ایک اعلی درخواست بار شامل کریں

اس لمحے کے لئے ، اگر آپ “اگلا” بٹن پر کلک کرتے ہیں تو ، ہوم اسکرین اس پیغام کے ساتھ ظاہر ہوتا ہے “آپ نے یہ کیا ہے!”(آپ کامیاب ہوگئے.). مکمل. تاہم ، ہمارے صارف کے پاس کچھ کرنا نہیں ہے اور وہ نہیں جانتا ہے کہ وہ درخواست میں کہاں ہے. آپ کی مدد کرنے کے لئے ، نیویگیشن کو شامل کرنے کا وقت آگیا ہے.

وہاں سمت شناسی اجزاء ، تعامل ، بصری اشارے اور انفارمیشن فن تعمیر سے مراد ہے جو صارفین کو کسی درخواست میں تشریف لے جانے کی اجازت دیتے ہیں. یہ آپ کو مواد اور خصوصیات کو دریافت کرنے ، اور آسانی سے کام انجام دینے کی اجازت دیتا ہے.

مزید معلومات کے ل. ، مادی ڈیزائن کی ہدایات میں نیویگیشن کے لئے وقف کردہ مضمون سے مشورہ کریں.

مادی ڈیزائن نیویگیشن فارمیٹس پیش کرتا ہے جو استعمال میں آسانی کی ضمانت دیتا ہے. سب سے زیادہ دکھائے جانے والے اجزاء میں سے ایک اوپری درخواست بار ہے.

آپ کو اس عنصر کو iOS کے تحت “نیویگیشن بار” ، یا محض “ایپلی کیشن بار” یا “ہیڈر” کے نام سے معلوم ہوسکتا ہے۔.

صارفین کو دوسرے اعمال تک فوری رسائی کی پیش کش کے ل let ، آئیے ایک اعلی درخواست بار شامل کریں.

ایک اپبر ویجیٹ شامل کریں

گھر میں.ڈارٹ ، “سہاروں” میں ایک اپبر شامل کریں ، پھر نمایاں کردہ کانسٹ کو حذف کریں:

واپس کنسٹ سکافولڈ (// ٹوڈو: ایپ بار (102) شامل کریں اپبر: اپبر (// ٹوڈو: بٹن اور عنوان شامل کریں (102)), 

کے اضافےاپبر اپبر فیلڈ میں: سہاروں کی مدد سے ہمیں ایک کامل اور مفت ترتیب حاصل کرنے کی اجازت ملتی ہے ، جس میں صفحہ کے اوپری حصے اور جسم کے نیچے درخواست بار چھوڑ دیا جاتا ہے۔.

سہاروں مادی ایپ میں ایک اہم ویجیٹ ہے. یہ ہر طرح کے موجودہ معاملات کے اجزاء ، جیسے پینلز ، “سنیک بار” نوٹیفکیشن بار اور نیچے شیٹ عناصر کو ظاہر کرنے کے لئے عملی APIs مہیا کرتا ہے. یہاں تک کہ یہ فلوٹنگ ایکشن بٹن کی جگہ کی سہولت فراہم کرتا ہے.

سہاروں کے بارے میں مزید معلومات کے ل the پھڑپھڑ کے دستاویزات سے مشورہ کریں.

پروجیکٹ کو ریکارڈ کریں. ایک بار جب مزار کی تازہ کاری ہوجائے تو ، کلک کریں اگلے (مندرجہ ذیل) ہوم اسکرین کو ظاہر کرنے کے لئے.

عنصر اچھی طرح سے پوزیشن میں ہے ، لیکن اس میں عنوان کا فقدان ہے.

ایک ٹیکسٹ ویجیٹ شامل کریں

گھر میں.ڈارٹ ، اپبر ایپلی کیشن بار میں ایک عنوان شامل کریں:

// ٹوڈو: ایپ بار (102) شامل کریں اپبر: اپبر (// ٹوڈو: بٹن اور عنوان شامل کریں (102) عنوان: کانسٹ ٹیکسٹ ('مزار') ، // ٹوڈو: ٹریلنگ بٹن شامل کریں (102) 

پروجیکٹ کو ریکارڈ کریں.

ہوسکتا ہے کہ آپ نے ہر پلیٹ فارم میں مختلف حالتوں کو دیکھا ہو. مادی ڈیزائن سسٹم اس بات کو مدنظر رکھتا ہے کہ ہر پلیٹ فارم (Android ، iOS ، ویب) مختلف ہے اور صارف کی توقعات مختلف ہیں. مثال کے طور پر ، iOS پر ، عنوانات تقریبا ہمیشہ مرکز ہوتے ہیں. یہ UIKIT کے ذریعہ فراہم کردہ پہلے سے طے شدہ سلوک ہے. اینڈروئیڈ پر ، وہ بائیں طرف کھڑے ہیں. لہذا ، اگر آپ کسی ایمولیٹر یا اینڈروئیڈ ڈیوائس کا استعمال کرتے ہیں تو ، آپ کے عنوان کو بائیں طرف منسلک کیا جانا چاہئے. کسی سمیلیٹر یا آئی او ایس ڈیوائس کی صورت میں ، اسے مرکز ہونا ضروری ہے.

مزید معلومات کے ل ، ، مادی ڈیزائن کے ساتھ مختلف پلیٹ فارمز کے موافقت سے متعلق اس مضمون سے مشورہ کریں.

بہت سے درخواست بارز کے عنوان کے ساتھ ہی ایک بٹن ہوتا ہے. ہماری درخواست میں ایک مینو آئیکن شامل کریں.

لائن کے آغاز پر آئیکن بٹن کا بٹن شامل کریں

ہمیشہ گھر میں.ڈارٹ ، معروف فیلڈ کے لئے آئکن بٹن عنصر کی وضاحت کریں: اپبر ایپلی کیشن بار کا. (اسے ٹائٹل فیلڈ سے پہلے رکھیں: شروع سے لائن کے اختتام تک شروع کے مطابق):

 // ٹوڈو: بٹن اور عنوان شامل کریں (102) معروف: آئیکن بٹن (آئیکن: کانسٹ آئیکن (شبیہ).مینو ، سیمنٹلیبل: 'مینو' ،) ، آن پریسڈ: () < print('Menu button'); >, ), 

پروجیکٹ کو ریکارڈ کریں.

مینو آئیکن (جسے “ہیمبرگر” بھی کہا جاتا ہے) ، مطلوبہ مقام پر ظاہر ہوتا ہے.

کلاس آئکن بٹن آپ کی درخواست میں مادی شبیہیں کو مربوط کرنے کا ایک عملی طریقہ ہے. وہ ایک ویجیٹ استعمال کرتی ہے آئیکن. پھڑپھڑ کے پاس کلاس روم میں شبیہیں کا ایک مکمل مجموعہ ہے شبیہیں. شبیہیں خود بخود “کانسٹ” چینل میپنگ کے مطابق درآمد ہوجاتی ہیں.

شبیہیں کلاس کے بارے میں مزید معلومات کے ل the ، پھڑپھڑاتی دستاویزات دیکھیں. آئیکن ویجیٹ کے بارے میں مزید معلومات کے ل the ، پھڑپھڑاتی دستاویزات دیکھیں.

آپ لائن کے آخر میں بٹن بھی شامل کرسکتے ہیں. پھڑپھڑ میں ، ان بٹنوں کو “ایکشن” کہا جاتا ہے۔.

شرائط شروعات اور آخر متعلقہ زبان سے قطع نظر پڑھنے کے معنی کا اظہار کریں. جب آپ زبان پڑھنے میں بائیں سے دائیں ، جیسے انگریزی میں کام کرتے ہیں, شروعات مطلب ہے بائیں اور آخر مطلب ہے دائیں طرف. ایسی زبان میں جو عربی کی طرح دائیں سے بائیں پڑھتی ہے شروعات مطلب ہے دائیں طرف, اور آخر مطلب ہے بائیں.

یوزر انٹرفیس کے الٹ جانے کے بارے میں مزید معلومات کے ل bi ، دو طرفہ عمل سے متعلق مادی ڈیزائن کی ہدایات سے مشورہ کریں.

اعمال شامل کریں

آئکن بٹن کے دو دیگر عناصر کے لئے کافی گنجائش ہے.

ان کو عنوان کے بعد اپبر مثال میں شامل کریں:

// ٹوڈو: ٹریلنگ بٹن (102) کے اعمال شامل کریں: [آئیکن بٹن (آئیکن: کانسٹ آئیکن (شبیہ).تلاش ، سیمنٹلیبل: 'تلاش' ،) ، اونٹ پریسڈ: () < print('Search button'); >, ) ، آئیکن بٹن (آئیکن: کانسٹ آئیکن (شبیہیں).دھن ، سیمنٹلیبل: 'فلٹر' ،) ، آن پریسڈ: () < print('Filter button'); >, ) ،], 

پروجیکٹ کو ریکارڈ کریں. آپ کی ہوم اسکرین مندرجہ ذیل طور پر پیدا ہونی چاہئے:

ایپلی کیشن میں اب لائن کے آغاز پر ایک بٹن ، ایک عنوان اور دائیں طرف دو اعمال ہیں. ایپلیکیشن بار کا بھی اثر ہوتا ہےبلندی ہلکے سایہ کی وجہ سے یہ ظاہر ہوتا ہے کہ یہ مواد سے مختلف سطح پر ہے.

آئیکن کلاس میں ، فیلڈ سیمنٹلیبل پھڑپھڑ میں قابل رسائی معلومات کو شامل کرنے کا ایک عام طریقہ ہے. یہ ایک ایسا نظام ہے جو iOS Accessibitylabelbel پر Android مواد کے الفاظ اور UIAcessify فعالیت کے بہت قریب ہے . آپ کو یہ بہت سے کورسز میں مل جائے گا.

اس فیلڈ میں شامل معلومات اس بٹن کے کردار پر اسکرین ریڈرز کے بارے میں معلومات فراہم کرنا ممکن بناتی ہے.

اگر ویجیٹ میں سیمنٹلیبل فیلڈ نہیں ہے: ، آپ اسے ویجیٹ میں گھیر سکتے ہیں Semantics. سیمنٹکس ویجیٹ کے بارے میں مزید معلومات کے ل the ، پھڑپھڑاتی دستاویزات دیکھیں.

5. ایک گرڈ میں شیٹ شامل کریں

اب جب ہماری درخواست قدرے زیادہ ساختی ہے ، آئیے اس کے مواد کو فائلوں میں رکھ کر ان کو منظم کریں.

کارڈز آزاد عناصر ہیں جو کسی دیئے گئے مضمون سے وابستہ مواد اور افعال کو ظاہر کرتے ہیں. وہ اسی طرح کے مواد کو کسی مجموعہ کی شکل میں پیش کرنے کا لچکدار طریقہ پیش کرتے ہیں.

مزید معلومات کے ل. ، مادی ڈیزائن ہدایات میں فائلوں کے لئے وقف کردہ مضمون دیکھیں.

کارڈ ویجیٹ (شیٹ) کے بارے میں مزید معلومات کے ل ، ، پھڑپھڑ میں لے آؤٹ کی تشکیل سے متعلق مضمون سے مشورہ کریں.

ایک گرڈ ویو ویجیٹ شامل کریں

آئیے اوپری درخواست بار کے تحت شیٹ شامل کرکے شروع کریں. فی الحال ، ویجیٹ کارڈ (شیٹ) میں اپنے آپ کو مرئی طور پر پوزیشن کے ل enough اتنی معلومات نہیں ہوتی ہے. لہذا ہم اسے ایک ویجیٹ میں گھیرے میں رکھیں گے جالی دار نظارہ.

اسکافولڈ عنصر کے جسم میں مرکز کو ایک گرڈ ویو ویجیٹ سے تبدیل کریں:

// ٹوڈو: ایک گرڈ ویو (102) جسم: گرڈ ویو شامل کریں.گنتی (کراسیکس اسکائونٹ: 2 ، بھرتی: کنسڈ ایجنسٹ.تمام (16.0) ، چائلڈ اسپیکٹریو: 8.0/9.0 ، // ٹوڈو: کارڈز کی ایک گرڈ بنائیں (102) بچوں: [کارڈ ()] ،) ،) ،), 

آئیے اس کوڈ کا تجزیہ کریں. گریور ویجیٹ نے کارخانہ دار کی گنتی () کو کال کی ہے ، کیونکہ جس عناصر کی اسے دکھاتا ہے اس کی گنتی کی جاسکتی ہے اور یہ لامحدود نہیں ہے. لیکن اسے اپنی ترتیب کی وضاحت کے لئے اضافی معلومات کی ضرورت ہے.

کراسیکس اسکائونٹ متغیر: فی لائن عناصر کی تعداد کی نشاندہی کرتا ہے. ہم دو کالم حاصل کرنا چاہتے ہیں.

l ‘transversal محور پھڑپھڑ میں محور سے مساوی ہے کہ ہم اسکرول نہیں کرتے ہیں. طومار کرنے کا احساس کہا جاتا ہے اہم محور. اگر آپ عمودی سکرولنگ کا استعمال کرتے ہیں ، جیسا کہ گرڈ ویو کے ساتھ پہلے سے طے شدہ معاملہ ہے تو ، ٹرانسورس محور افقی ہے.

مزید معلومات کے ل ، ، صفحہ دیکھیں جو ترتیب پیدا کرنے کے لئے وقف ہے.

پیڈنگ فیلڈ: گرڈ ویو ویجیٹ کے چاروں اطراف ایک مفت جگہ کی وضاحت کرتا ہے. یقینا ، یہ مارجن عنصر کے نتیجے میں یا اس کے تحت نظر نہیں آتا ہے ، کیوں کہ ابھی تک اس عنصر کے ساتھ کوئی چائلڈ گرڈ ویو نہیں رکھا گیا ہے۔.

چائلڈ اسپیکٹو فیلڈ: تناسب کی شکل میں عناصر کے سائز کی نشاندہی کرتا ہے (اونچائی پر چوڑائی).

پہلے سے طے شدہ طور پر ، گرڈ ویو ایک جیسے سائز کے بلاکس بناتا ہے.

ہمارے پاس ایک چادر ہے ، لیکن یہ خالی ہے. اس شیٹ میں بچوں کے ویجٹ شامل کریں.

مندرجات ڈالیں

چادروں میں شبیہہ کے لئے علاقے ، عنوان اور ثانوی متن شامل ہونا چاہئے.

گرڈ ویو ویجیٹ سے بچوں کو اپ ڈیٹ کریں:

// ٹوڈو: کارڈز کا گرڈ بنائیں (102) بچوں: [کارڈ (کلپ بیہویئر: کلپ.اینٹیئیلیاس ، بچہ: کالم (کراسیکسسیلائنمنٹ: کراسیکسیلائنمنٹ.شروع کریں ، بچے: [ایسپیکٹریو (ایسپیکٹراٹیو: 18.0/11.0 ، بچہ: تصویر.اثاثہ ('اثاثے/ہیرا.png ') ،) ، پیڈنگ (بھرتی: کونسڈ ایجنسٹ.fromltrb (16.0 ، 12.0 ، 16.0 ، 8.0) ، چائلڈ: کالم (کراسیکسسالائنمنٹ: کراسیکسیلائنمنٹ.شروع کریں ، بچے: [متن ('عنوان') ، کنسٹڈ باکس (اونچائی: 8.0) ، متن ('ثانوی متن') ،] ،) ،] ،) ،)]]]], 

اس کوڈ میں کالم ویجیٹ (کالم) شامل کیا گیا ہے جو آپ کو بچوں کے ویجٹ کو عمودی طور پر رکھنے کی اجازت دیتا ہے.

کراسیکسیلائنمنٹ پیرامیٹر: فیلڈ کراسیکسیلائنمنٹ ویلیو کی وضاحت کرتا ہے.شروع کریں ، جس کا مطلب ہے “لکیر کے آغاز پر متن کو سیدھ کریں ‘” سائیڈ “.

ویجیٹ پہلو کا تناسب فراہم کردہ تصویر کی قسم سے قطع نظر ، ظاہر کردہ شبیہہ کے تناسب کی وضاحت کرتا ہے.

عنصر بھرتی متن کے لئے ایک مارجن کی وضاحت کرتا ہے.

دو ویجٹ متن ایک کے اوپر ایک دوسرے کو آٹھ خالی خلائی پوائنٹس (کے ذریعہ رکھا اور الگ کیا گیا ہے (سائز کا باکس). ہم ایک اور عنصر بناتے ہیں کالم انہیں داخلہ مارجن دینے کے لئے.

پروجیکٹ کو ریکارڈ کریں.

اس جائزہ میں ، آپ دیکھ سکتے ہیں کہ چادر کو مارجن کے ساتھ رکھا گیا ہے ، اس کے کونے گول ہیں اور یہ سایہ پیش کرتا ہے (اس کی بلندی کی نمائندگی کرتا ہے). مادی ڈیزائن سسٹم میں پوری شکل کو “کنٹینر” کہا جاتا ہے (کنٹینر نامی ویجیٹ کلاس کے ساتھ الجھن میں نہ پڑنا).

کنٹینر کے علاوہ ، چادروں کے تمام عناصر مواد میں اختیاری ہیں. آپ ہیڈر ٹیکسٹ ، ایک اسٹیکر یا اوتار ، ایک سب ٹائٹل ٹیکسٹ ، جداکار ، اور یہاں تک کہ دلال اور شبیہیں شامل کرسکتے ہیں.

چادروں کے مواد کے بارے میں مزید معلومات کے ل material ، مادی ڈیزائن ہدایات میں اس مضمون سے مشورہ کریں.

چادریں عام طور پر دوسری چادروں کے ساتھ ایک مجموعہ میں دکھائی جاتی ہیں. انہیں گرڈ میں ایک مجموعہ کی شکل میں بندوبست کریں.

6. فائلوں کا ایک مجموعہ بنائیں

جب اسکرین پر کئی شیٹس موجود ہوتی ہیں تو ، ان کو ایک یا زیادہ مجموعوں میں گروپ کیا جاتا ہے. ایک مجموعہ کی فائلیں کوپلانار ہیں: ان کی تمام تر بلندی باقی ہے (یعنی یہ کہنا ہے کہ جب وہ منتخب نہیں ہوئے یا منتقل نہیں ہوتے ہیں ، جو ہم یہاں نہیں کریں گے).

فائلوں کا ایک مجموعہ بنائیں

اس لمحے کے لئے ، ہماری شیٹ بچوں کے میدان میں رکھی گئی ہے: گرڈ ویو گرڈ. اس سے نیسٹڈ کوڈ کی ایک بڑی مقدار کی طرف جاتا ہے جسے پڑھنا مشکل ہوسکتا ہے. آئیے ہم کوڈ کے اس حصے کو ایک فنکشن میں تبدیل کریں جس میں ضرورت کے مطابق زیادہ سے زیادہ خالی شیٹ پیدا کرنے اور فائلوں کی فہرست واپس کرنے کی اجازت دی جائے۔.

بلڈ () فنکشن کے اوپر ایک نجی فنکشن بنائیں (یاد رکھیں کہ انڈر لائننگ لائن سے شروع ہونے والے افعال نجی API ہیں):

// ٹوڈو: کارڈز کا ایک مجموعہ بنائیں (102) فہرست _ بلڈ گرڈ کارڈز (انٹنٹ سینٹ) < 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'), ], ), ), ], ), ); >, ) ؛ واپسی کارڈز ؛ > 

گرڈ ویو ویجیٹ کے بچوں کے میدان میں تیار کردہ فائلوں کو تفویض کریں. کرنا مت بھولنا گرڈ ویو ویجیٹ میں موجود تمام عناصر کو اس نئے کوڈ کے ساتھ تبدیل کریں ::

// ٹوڈو: ایک گرڈ ویو (102) جسم: گرڈ ویو شامل کریں.گنتی (کراسیکس اسکائونٹ: 2 ، بھرتی: کنسڈ ایجنسٹ.تمام (16.0) ، چائلڈ اسپیکٹریو: 8.0/9.0 ، بچے: _ بلڈ گرڈ کارڈز (10) // تبدیل کریں), 

پروجیکٹ کو ریکارڈ کریں.

کارڈ موجود ہیں ، لیکن وہ اس لمحے کے لئے کچھ بھی ظاہر نہیں کرتے ہیں. وقت آگیا ہے کہ مصنوع کا ڈیٹا شامل کیا جائے.

پروڈکٹ کا ڈیٹا شامل کریں

ایپلی کیشن میں کچھ مصنوعات شامل ہیں جن میں تصاویر ، نام اور قیمتیں ہیں. اسے فائل میں پہلے سے موجود ویجٹ میں شامل کریں

پھر گھر میں.ڈارٹ ، ایک نیا پیکیج درآمد کریں اور ڈیٹا ماڈل کے لئے فراہم کردہ کچھ فائلیں:

درآمد 'پیکیج: پھڑپھڑ/مواد.ڈارٹ '؛ درآمد 'پیکیج: انٹیل/انٹیل.ڈارٹ '؛ درآمد 'ماڈل/پروڈکٹ.ڈارٹ '؛ امپورٹ 'ماڈل/مصنوعات_ ریپوسیٹری.ڈارٹ '؛ 

آخر میں ، مصنوعات کی معلومات کو بازیافت کرنے اور فائلوں میں اس ڈیٹا کو استعمال کرنے کے لئے _ بلڈ گرڈ کارڈز () میں ترمیم کریں:

// ٹوڈو: کارڈز کا ایک مجموعہ بنائیں (102) // اس پورے طریقہ کار کی فہرست کو تبدیل کریں _ بلڈ گرڈ کارڈز (بلڈکونٹیکسٹ سیاق و سباق) < Listproducts = ProductsRepository.loadProducts(Category.all); if (products.isEmpty) < return const []; > حتمی تھیمیڈاٹا تھیم = تھیم.(سیاق و سباق) ؛ حتمی نمبر فارمیٹ فارمیٹر = نمبر فارمیٹ.آسان (مقامی: احاطے.لوکلوف (سیاق و سباق).tostring ()) ؛ مصنوعات لوٹائیں.نقشہ ((مصنوع) < 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, ), ], ), ), ), ], ), ); >).ٹولسٹ () ؛ > 

محسوس کیا : تالیف اور عمل درآمد شروع کرنے سے پہلے انتظار کریں. بنانے کے لئے ایک ترمیم باقی ہے.

متن کو فارمیٹ کرنے کے ل we ، ہم تھیم ڈیٹا استعمال کرتے ہیں تھیمیڈاٹا قدر سے buildContext موجودہ.

متن کی فارمیٹنگ کے بارے میں مزید معلومات کے ل material ، مادی ڈیزائن ہدایات میں نوع ٹائپ سے متعلق مضمون سے مشورہ کریں. کسی تھیم سے فارمیٹنگ کے بارے میں مزید معلومات کے ل M ، MDC-103 کے ساتھ اس پروگرامنگ ورکشاپ کے بعد جاری رکھیں: مادی ڈیزائن کے موضوعات کا استعمال (رنگ ، شکلیں ، بلندی اور قسم).

قدر کو منتقل کرنے کے لئے بلڈ () فنکشن میں بھی ترمیم کریں buildContext تالیف شروع کرنے سے پہلے _ بلڈ گرڈ کارڈز () پر:

// ٹوڈو: ایک گرڈ ویو (102) جسم: گرڈ ویو شامل کریں.گنتی (کراسیکس اسکائونٹ: 2 ، بھرتی: کنسڈ ایجنسٹ.تمام (16.0) ، چائلڈ اسپیکٹریو: 8.0/9.0 ، بچے: _ بلڈ گرڈ کارڈز (سیاق و سباق) // کوڈ تبدیل کریں), 

گرم ایپلی کیشن کو دوبارہ شروع کریں.

آپ دیکھ سکتے ہیں کہ ہم فائلوں کے مابین عمودی جگہ شامل نہیں کرتے ہیں. کیونکہ ان کے پاس اوپر اور نیچے چار مارجن ہیں.

پروجیکٹ کو ریکارڈ کریں.

تیار کردہ اعداد و شمار کو ظاہر کیا جاتا ہے ، لیکن تصاویر کو ایک غیر ضروری جگہ سے گھیر لیا جاتا ہے. پہلے سے طے شدہ طور پر ، تصاویر فیلڈ کے ساتھ تیار کی جاتی ہیں Boxfit وضاحت .اسکیل ٹاؤن (اس معاملے میں). اس قدر کو تبدیل کریں .فٹ وڈتھ تاکہ وہ زوم ان ہو اور غیر ضروری جگہ کو دور کرسکے.

ایک فٹ فیلڈ شامل کریں: جیسے باکسفٹ ویلیو.فٹ وڈتھ:

 // ٹوڈو: باکس سائز (102) کو ایڈجسٹ کریں: باکس فٹ.فٹ وڈتھ, 

ہماری مصنوعات اب ایپلی کیشن میں بالکل ظاہر ہیں.

7. مبارک ہو !

ہماری ایپلی کیشن بنیادی آپریشن پیش کرتی ہے جس سے صارف کو کنکشن اسکرین سے ہوم اسکرین پر جانے کی اجازت ملتی ہے جہاں مصنوعات کو ظاہر کیا جاتا ہے. کوڈ کی کچھ لائنیں ایک اعلی ایپلی کیشن بار (عنوان اور تین بٹنوں کے ساتھ) اور فائلوں (ہماری درخواست کا مواد پیش کرنے کے لئے) شامل کرنے کے لئے کافی تھیں. حاصل کردہ ہوم اسکرین آسان اور فعال ہے ، اور اس میں ایک بنیادی ڈھانچہ اور قابل استعمال مواد ہے.

MDC-102 ایپلی کیشن کا مکمل ورژن 103-اسٹارٹر_ اور_102-مکمل برانچ میں دستیاب ہے .

آپ اپنے ورژن کو صفحہ پر اس برانچ کی درخواست کے ساتھ موازنہ کرسکتے ہیں.

مندرجہ ذیل اقدامات

ایپلیکیشن بار ، شیٹ ، ٹیکسٹ فیلڈ اور صفحے کے اوپری حصے میں واقع بٹن کے ساتھ ، اب ہم نے مٹیریل فلٹر لائبریری کے چار اہم اجزاء استعمال کیے ہیں۔. مزید معلومات کے ل. ، مادی اجزاء کی کیٹلاگ دیکھیں.

یہاں تک کہ اگر ہماری ایپلی کیشن بالکل کام کرتی ہے تو ، یہ برانڈ کی شناخت یا کسی خاص نقطہ نظر کی عکاسی نہیں کرتی ہے. MDC-103 ورکشاپ میں: مادی ڈیزائن (رنگ ، شکلیں ، بلندی اور قسم) کے موضوعات کا استعمال ، ہم جدید اور متحرک برانڈ کے اظہار کے لئے ان اجزاء کے انداز کو ذاتی نوعیت دیں گے۔.

اس پروگرامنگ ورکشاپ کے ادراک نے مجھ سے وقت اور معقول کوششوں کے لئے پوچھا

مکمل طور پر اتفاق کرتا ہوں

نہ ہی اتفاق کریں ، اور نہ ہی اتفاق کریں

بالکل متفق نہیں

میں مادی اجزاء کا استعمال جاری رکھنا چاہتا ہوں

مکمل طور پر اتفاق کرتا ہوں

نہ ہی اتفاق کریں ، اور نہ ہی اتفاق کریں

بالکل متفق نہیں

جب تک کہ دوسری صورت میں اس کی نشاندہی نہیں کی جاتی ہے ، اس صفحے کے مواد پر تخلیقی العام اسائنمنٹ 4 لائسنس کے زیر انتظام ہوتا ہے.0 ، اور کوڈ کے نمونے اپاچی 2 لائسنس کے ذریعہ چلتے ہیں.0. مزید معلومات کے لئے ، گوگل ڈویلپرز سائٹ کے قواعد دیکھیں. جاوا اوریکل اور/یا اس سے وابستہ کمپنیوں کا رجسٹرڈ ٹریڈ مارک ہے.