MDC-102: ساختار و طرح مواد

طراحی مواد قالب های ناوبری را ارائه می دهد که سهولت استفاده زیادی را تضمین می کند. یکی از مشهودترین مؤلفه ها نوار برنامه فوقانی است.

یک حساب توسعه دهنده Google Play ایجاد کنید

اطلاعات شخصی خود ، آدرس مورد نظر و رمز عبور خود را آگاه کنید.

شرایط عمومی فروش (GTC) را بپذیرید.

یک عکس خوب از خود اضافه کنید.

یک حساب توسعه دهنده Google Play ایجاد کنید

روش ایجاد یک حساب توسعه دهنده Google Play بسیار ساده تر از اپل است.

با آدرس gmail خود ارتباط برقرار کنید.

GTC را بپذیرید.

هزینه های ثبت نام را تنظیم کنید: یک پرداخت واحد 25 یورو برای انتشار کلیه برنامه های مورد نظر خود !

اطلاعات مربوط به حساب خود را اطلاع دهید: نام توسعه دهنده ، آدرس ایمیل و شماره تلفن.

این به سوال شما پاسخ داده است ?

با تشکر از شما برای نظرات مشکلی برای ارسال نظرات شما وجود داشت. لطفا بعداً دوباره امتحان کنید.

آخرین بروزرسانی در 9 نوامبر 2021

مقالات مرتبط

• برنامه ای در کنسول Google Play ایجاد کنید
• گواهی Android P12 را تولید کنید
• پرونده APK یا AAB را صادر کنید
• یک برنامه اندرویدی منتشر کنید
• یک برنامه Android را در خارج از فروشگاه Play منتشر کنید
• انتشار در فروشگاه Google Play

MDC-102: ساختار و طرح مواد

اجزای مواد (MDC) به توسعه دهندگان کمک می کند تا طراحی مواد را اجرا کنند. MDC که توسط تیمی از مهندسین و متخصصان تجربه کاربر در Google طراحی شده است ، ده ها مؤلفه رابط کاربری زیبا و کاربردی ارائه می دهد. این برای Android ، iOS ، وب و flutter در دسترس است.مادی.io/توسعه.

در کارگاه برنامه نویسی MDC-101 ، شما از دو عنصر مؤلفه مواد برای ایجاد یک صفحه اتصال استفاده کرده اید: فیلدها و دکمه های متن شامل انیمیشن های “جوهر”. در این پایه ها ، اجازه دهید با افزودن ناوبری ، ساختار و داده ها ، برنامه خود را غنی کنیم.

اهداف کارگاه

در این کارگاه برنامه نویسی ، شما یک صفحه اصلی را برای آن ایجاد خواهید کرد حرم, یک برنامه تجارت الکترونیکی برای فروش لباس و وسایل خانه. این صفحه شامل:

• نوار برنامه بالاتر
• لیستی از محصولات به صورت یک شبکه

لطفاً توجه داشته باشید که این کارگاه برنامه نویسی به استثنای تصاویر ، با مواد 3 جایگزین شده است. آنها با این وجود همان اطلاعات را منتقل می کنند.

این کارگاه برنامه نویسی دومین کارگاه آموزشی است که به شما در ایجاد یک محصول برای محصولی به نام Sanctuary کمک می کند. ما توصیه می کنیم که به ترتیب تمام کارگاه های برنامه نویسی را دنبال کنید تا در کارها کم کم پیشرفت کنید. کارگاه های برنامه نویسی خود را در اینجا پیدا خواهید کرد:

• MDC-101 Flutter: اصول اساسی اجزای ماده
• MDC-103 Flutter: استفاده از مضامین طراحی مواد (رنگ ، شکل ، ارتفاع و نوع)
• MDC-104 Flutter: مؤلفه های طراحی مواد پیشرفته

اجزای مواد و زیر سیستم های مواد در این کارگاه برنامه نویسی

• فوقانی
• شبکه
• کارت

در این کارگاه برنامه نویسی ، از اجزای پیش فرض ارائه شده توسط مواد فلوتر استفاده خواهید کرد. شما یاد خواهید گرفت که آنها را در بخش MDC-103 سفارشی کنید: استفاده از مضامین طراحی مواد (رنگ ، شکل ، ارتفاع و نوع).

چگونه می توانید سطح تجربه خود را در توسعه با Flutter ارزیابی کنید ?

2. محیط توسعه Flutter را پیکربندی کنید

برای این کارگاه ، به دو نرم افزار نیاز دارید: Flutter SDK و یک ناشر.

می توانید کارگاه برنامه نویسی را در یکی از دستگاه های زیر اجرا کنید:

• یک دستگاه iOS Android یا فیزیکی که به رایانه شما متصل است و در حالت توسعه دهنده تنظیم می شود.
• iOS Simulator (Xcode Tools برای نصب).
• Android Emulator (که باید در Android Studio پیکربندی شود).
• یک مرورگر (کروم برای اشکال زدایی لازم است).
• به عنوان ویندوز ، لینوکس یا دسک تاپ MACOS. شما باید درخواست خود را بر روی بستری که قصد دارد آن را مستقر کنید ، توسعه دهید. به عنوان مثال ، اگر می خواهید یک برنامه دسک تاپ ویندوز تهیه کنید ، برای دسترسی به زنجیره تدوین مناسب باید این کار را در ویندوز انجام دهید. همچنین در مورد الزامات خاص برای سیستم عامل ها ، که در اسناد به تفصیل است ، بیاموزید.بال بال زدن.دسک تاپ.

3. برنامه عزیمت را برای کارگاه برنامه نویسی بارگیری کنید

شما قبلاً کارگاه MDC-101 را دنبال کرده اید ?

اگر کارگاه برنامه نویسی MDC-101 را به پایان رسانده اید ، کد شما باید برای شروع این کارگاه آماده باشد. به مرحله بعدی بروید: یک نوار برنامه بالاتر اضافه کنید.

شما از ابتدا شروع می کنید ?

برنامه خروج کارگاه شروع را بارگیری کنید

برنامه شروع در مواد-کامپوننت-فلوتر-Codelabs-102-Starter_and_101-complete/mdc_100_series است .

… یا کارگاه از Github را کلون کنید

برای کلون کردن این کارگاه برنامه نویسی از GitHub ، دستورات زیر را اجرا کنید:

git کلون https: // github.com/materi.git cd materi

برای کمک ، به بخش کلونینگ از GitHub مراجعه کنید

شاخه صحیح را انتخاب کنید

کارگاه های برنامه نویسی MDC-101 با 104 متکی به یکدیگر هستند. بنابراین وقتی کد کارگاه MDC-102 را تمام می کنید ، به کد شروع کارگاه MDC-103 تبدیل می شود. کد به چندین شاخه تقسیم می شود ، که می توانید لیست را با استفاده از این دستور نمایش دهید:

شعبه git -لیست

برای نمایش کد تمام شده ، به شاخه کامل 103-starter_and_102 بروید .

پروژه را باز کرده و برنامه را اجرا کنید

1. پروژه را در ناشر مورد نظر خود باز کنید.
2. دستورالعمل های مربوط به ناشر را که انتخاب کرده اید دنبال کنید. آنها برای بند “اجرا برنامه” (برنامه را اجرا کنید) در صفحه شروع> صفحه درایو تست (مراحل اول> تست) در دسترس هستند.

عمل موفق. صفحه اتصال Sanctuary از کارگاه برنامه نویسی MDC-101 باید در دستگاه شما نمایش داده شود.

اکنون که صفحه اتصال در جای خود قرار دارد ، بیایید برخی از محصولات را به برنامه اضافه کنیم.

4. یک نوار برنامه بالاتر اضافه کنید

برای لحظه ای ، اگر روی دکمه “بعدی” کلیک کنید ، صفحه اصلی با پیام نمایش داده می شود “!”(شما موفق شدید.). کامل. با این حال ، کاربر ما هیچ کاری برای انجام دادن ندارد و نمی داند که در آن برنامه است. برای کمک به شما ، وقت آن است که ناوبری را اضافه کنید.

آنجا جهت یابی اشاره به مؤلفه ها ، تعامل ها ، شاخص های بصری و معماری اطلاعاتی است که به کاربران امکان حرکت در یک برنامه را می دهد. این امکان را به شما می دهد تا محتوا و ویژگی ها را کشف کنید و به راحتی کارها را انجام دهید.

برای کسب اطلاعات بیشتر ، با مقاله اختصاص داده شده به ناوبری در دستورالعمل های طراحی مواد مشورت کنید.

طراحی مواد قالب های ناوبری را ارائه می دهد که سهولت استفاده زیادی را تضمین می کند. یکی از مشهودترین مؤلفه ها نوار برنامه فوقانی است.

شما ممکن است این عنصر را با نام “نوار ناوبری” تحت iOS یا به سادگی “نوار برنامه” یا “هدر” بدانید.

برای ارائه دسترسی سریع به کاربران به سایر اقدامات ، بیایید یک نوار برنامه بالاتر اضافه کنیم.

ویجت AppBar را اضافه کنید

در خانه.دارت ، یک AppBar را به “داربست” اضافه کنید ، سپس const برجسته را حذف کنید:

Return Const Scaffold (// TODO: اضافه کردن نوار برنامه (102) APPBAR: APPBAR (// TODO: اضافه کردن دکمه ها و عنوان (102)), 

افزودن ازقوطی در قسمت AppBar: داربست به ما امکان می دهد یک طرح کامل و رایگان بدست آوریم و نوار برنامه را در بالای صفحه و زیر بدن قرار دهیم.

داربست ویجت مهمی در MaterialApps است. این برنامه API های عملی را برای نمایش انواع مؤلفه های فعلی مانند پانل ها ، میله های اعلان “Snackbar” و عناصر ورق های پایین فراهم می کند. حتی قرار دادن یک دکمه اکشن شناور را تسهیل می کند.

برای کسب اطلاعات بیشتر در مورد داربست ، با مستندات Flutter مشورت کنید.

پروژه را ضبط کنید. پس از بروزرسانی حرم ، روی کلیک کنید بعد (زیر) برای نمایش صفحه اصلی.

این عنصر به خوبی موقعیت دارد ، اما فاقد یک عنوان است.

ویجت متنی اضافه کنید

در خانه.دارت ، عنوانی را به نوار برنامه AppBar اضافه کنید:

// TODO: اضافه کردن نوار برنامه (102) AppBar: AppBar (// TODO: اضافه کردن دکمه ها و عنوان (102) عنوان: متن const ("حرم") ، // TODO: اضافه کردن دکمه های دنباله دار (102) 

پروژه را ضبط کنید.

ممکن است برای هر سیستم عامل متوجه تغییرات شده باشید. سیستم طراحی مواد در نظر می گیرد که هر پلتفرم (Android ، iOS ، وب) متفاوت است و انتظارات کاربر متفاوت است. به عنوان مثال ، در iOS ، عناوین تقریباً همیشه محور هستند. این رفتار پیش فرض ارائه شده توسط Uikit است. در Android ، آنها در سمت چپ قرار گرفته اند. بنابراین ، اگر از یک شبیه ساز یا دستگاه Android استفاده می کنید ، عنوان شما باید در سمت چپ تراز شود. در مورد شبیه ساز یا دستگاه iOS ، باید محور باشد.

برای کسب اطلاعات بیشتر ، با این مقاله در مورد سازگاری با سیستم عامل های مختلف با طراحی مواد مشورت کنید.

بسیاری از میله های برنامه یک دکمه در کنار عنوان دارند. یک نماد منو به برنامه ما اضافه کنید.

در ابتدای خط یک دکمه IconButton اضافه کنید

همیشه در خانه.دارت ، یک عنصر IconButton را برای قسمت پیشرو تعریف کنید: نوار برنامه AppBar. (آن را قبل از قسمت عنوان قرار دهید: مطابق با شروع از ابتدا تا انتهای خط):

 // TODO: اضافه کردن دکمه ها و عنوان (102) پیشرو: IconButton (نماد: نماد const (نمادها.منو ، معنایی: "منو" ،) ، onpressed: () < print('Menu button'); >, ), 

پروژه را ضبط کنید.

نماد منو (که به آن “همبرگر” نیز گفته می شود) ، در مکان مورد نظر ظاهر می شود.

کلاس نماد یک روش عملی برای ادغام نمادهای مادی در برنامه شما است. او از ویجت استفاده می کند آیکون. Flutter یک مجموعه کامل از نمادها در کلاس دارد نماد. نمادها به طور خودکار مطابق نقشه های کانال “const” وارد می شوند.

برای کسب اطلاعات بیشتر در مورد کلاس Icons ، به مستندات Flutter مراجعه کنید. برای کسب اطلاعات بیشتر در مورد ویجت نماد ، به مستندات Flutter مراجعه کنید.

همچنین می توانید دکمه ها را در انتهای خط اضافه کنید. در Flutter ، این دکمه ها “اقدامات” نامیده می شوند.

مقررات شروع وت پایان معنای خواندن را صرف نظر از زبان مورد نظر بیان کنید. هنگامی که شما در یک زبان از چپ به راست کار می کنید ، مانند انگلیسی, شروع به معنای به سمت چپ وت پایان به معنای به سمت راست. به زبانی که از راست به چپ خوانده می شود ، مانند عربی ، اصطلاح شروع به معنای به سمت راست, وت پایان به معنای به سمت چپ.

برای کسب اطلاعات بیشتر در مورد وارونگی رابط کاربری ، با دستورالعمل طراحی مواد در مورد دو طرفه مشورت کنید.

اقدامات را اضافه کنید

فضای کافی برای دو عنصر نماد دیگر وجود دارد.

بعد از عنوان آنها را به نمونه AppBar اضافه کنید:

// TODO: اضافه کردن دکمه های دنباله دار (102) اقدامات: [IconButton (نماد: نماد const (نمادها.جستجو ، معنایی: "جستجو" ،) ، ontpresd: () < print('Search button'); >, ) ، IconButton (نماد: نماد const (نمادها.Tune ، SemanticLabel: 'Filter' ،) ، onPRESD: () < print('Filter button'); >, ) ،], 

پروژه را ضبط کنید. صفحه اصلی شما باید به شرح زیر باشد:

اکنون برنامه در شروع خط ، یک عنوان و دو عمل در سمت راست دارای یک دکمه است. نوار برنامه نیز تأثیر داردارتفاع به دلیل سایه اندک نشان می دهد که در سطح دیگری از محتوا قرار دارد.

در یک کلاس نماد ، قسمت معنایی یک روش متداول برای افزودن اطلاعات قابل دسترسی به Flutter است. این سیستمی است که بسیار نزدیک به متن محتوای Android و قابلیت UIACCESSIBLE در IOS AccessIbilityLabelbel است . آن را در بسیاری از دوره ها پیدا خواهید کرد.

اطلاعات موجود در این زمینه امکان ارائه اطلاعات در مورد خوانندگان صفحه را در مورد نقش این دکمه فراهم می کند.

اگر یک ویجت یک قسمت معنایی ندارد: ، می توانید آن را در ویجت محصور کنید مفاهیم. برای کسب اطلاعات بیشتر در مورد ویجت معنایی ، به مستندات Flutter مراجعه کنید.

5. یک ورق را در یک شبکه اضافه کنید

اکنون که برنامه ما کمی ساختار یافته تر است ، به ما اجازه دهید محتوای آن را با قرار دادن آنها در پرونده ها سازماندهی کنیم.

در کارت عناصر مستقلی هستند که محتوا و اقدامات مرتبط با یک موضوع خاص را نشان می دهند. آنها یک روش انعطاف پذیر برای ارائه محتوای مشابه در قالب یک مجموعه ارائه می دهند.

برای کسب اطلاعات بیشتر ، به مقاله اختصاص داده شده به پرونده ها در دستورالعمل های طراحی مواد مراجعه کنید.

برای کسب اطلاعات بیشتر در مورد ویجت کارت (برگه) ، با مقاله در مورد ایجاد طرح بندی در Flutter مشورت کنید.

ویجت GridView را اضافه کنید

بیایید با اضافه کردن یک ورق در زیر نوار برنامه فوقانی شروع کنیم. در حال حاضر ، ویجت کارت (برگه) حاوی اطلاعات کافی برای موقعیت مکانی خود نیست. بنابراین ما آن را در ویجت محصور خواهیم کرد نمایشگاه.

مرکز را در بدنه عنصر داربست با ویجت Gridview جایگزین کنید:

// TODO: یک نمای شبکه (102) بدنه اضافه کنید: GridView.شمارش (crossaxiscount: 2 ، padding: const edgeinsts.همه (16.0) ، ChildAspectratio: 8.0/9.0 ، // TODO: ساخت یک شبکه کارت (102) کودکان: [کارت ()] ،) ،), 

بیایید این کد را تجزیه و تحلیل کنیم. ویجت Griver با تولید کننده () تولید کننده را صدا می کند ، زیرا تعداد عناصری که نمایش داده می شود قابل شمارش است و بی نهایت نیست. اما او برای تعریف طرح خود به اطلاعات اضافی نیاز دارد.

متغیر crossaxiscount: تعداد عناصر در هر خط را نشان می دهد. ما می خواهیم دو ستون بگیریم.

منمحور عرضی در Flutter با محوری که ما پیمایش نمی کنیم مطابقت دارد. حس پیمایش نامیده می شود محور اصلی. اگر از پیمایش عمودی استفاده می کنید ، همانطور که مورد پیش فرض با GridView است ، محور عرضی افقی است.

برای کسب اطلاعات بیشتر ، به صفحه اختصاص داده شده برای ایجاد طرح بندی مراجعه کنید.

قسمت بالشتک: فضای آزاد را در چهار طرف ویجت Gridview تعریف می کند. البته این حاشیه در نتیجه عنصر یا زیر آن قابل مشاهده نیست ، زیرا هنوز هیچ شبکه ای از کودک در حال حاضر در کنار این عنصر قرار نگرفته است.

زمینه Childaspecto: اندازه عناصر را به صورت نسبت ها (عرض در ارتفاع) مشخص می کند.

به طور پیش فرض ، GridView بلوک هایی با اندازه یکسان ایجاد می کند.

ما یک ورق داریم اما خالی است. ویجت های کودکان را به این برگه اضافه کنید.

مطالب را قرار دهید

برگه ها باید شامل مناطقی برای یک تصویر ، عنوان و متن ثانویه باشند.

کودکان را از ویجت GridView به روز کنید:

// Todo: ساخت یک شبکه کارت (102) کودکان: [کارت (Clipbehavior: Clip.Antialias ، Child: ستون (crossaxisalignment: crossaxisalignment.شروع ، کودکان: [aspectratio (aspectratio: 18.0/11.0 ، کودک: تصویر.دارایی (دارایی/الماس.png ') ،) ، padding (padding: const edgeinsts.Fromltrb (16.0 ، 12.0 ، 16.0 ، 8.0) ، کودک: ستون (crossaxisalignment: crossaxisalignment.شروع ، کودکان: [متن (عنوان ") ، جعبه اندازه (ارتفاع: 8.0) ، متن ('متن ثانویه') ،] ،) ،) ،] ،) ،)]]], 

این کد ویجت ستونی (ستون) را اضافه می کند که به شما امکان می دهد ویجت های کودکان را به صورت عمودی داشته باشید.

پارامتر Crossaxisalignment: Field مقدار Crossaxisalignment را مشخص می کند.شروع ، این به معنی “تراز کردن متن در” شروع خط “” طرف “است.

ویجت ابپراطوری بدون توجه به نوع تصویر ارائه شده ، نسبت تصویر نمایش داده شده را تعریف می کند.

عنصر لایه گذاری حاشیه ای را برای متن تعریف می کند.

دو ابزارک متن یکی بالاتر از دیگری با هشت نقطه فضای خالی قرار می گیرد و از هم جدا می شود (جعبه اندازه). ما یک عنصر دیگر ایجاد می کنیم ستون تا حاشیه های داخلی آنها را به آنها بدهد.

پروژه را ضبط کنید.

در این نمای کلی ، می بینید که این ورق با حاشیه قرار گرفته است ، گوشه های آن گرد شده و سایه ای را نشان می دهد (نشان دهنده ارتفاع آن). کل فرم در سیستم طراحی مواد “ظرف” نامیده می شود (با کلاس ویجت به نام کانتینر اشتباه گرفته نمی شود).

جدا از ظرف ، تمام عناصر ورق ها از نظر مواد اختیاری هستند. می توانید متن هدر ، برچسب یا نماد ، متن زیرنویس ، جداکننده و حتی جوش ها و نمادها را اضافه کنید.

برای کسب اطلاعات بیشتر در مورد محتوای برگه ها ، در دستورالعمل طراحی مواد با این مقاله مشورت کنید.

ورق ها به طور کلی در یک مجموعه با ورق های دیگر نمایش داده می شوند. آنها را به صورت یک مجموعه در یک شبکه ترتیب دهید.

6. مجموعه ای از پرونده ها را ایجاد کنید

هنگامی که چندین برگ روی صفحه نمایش وجود دارد ، آنها در یک یا چند مجموعه گروه بندی می شوند. پرونده های یک مجموعه Coplanar هستند: آنها در حالت استراحت یکسان هستند (یعنی می گویند وقتی آنها انتخاب نمی شوند یا جابجا نمی شوند ، که ما در اینجا انجام نخواهیم داد).

مجموعه ای از پرونده ها را ایجاد کنید

در حال حاضر ، ورق ما در قسمت کودکان قرار دارد: Gridview Grid. این منجر به مقدار زیادی کد تو در تو می شود که خواندن آن دشوار است. بگذارید این قسمت از کد را به یک عملکرد تبدیل کنیم که به شما امکان می دهد تعداد زیادی ورق های خالی را در صورت لزوم تولید کنیم و لیستی از پرونده ها را برگردانیم.

یک تابع خصوصی را در بالای عملکرد BUILD () ایجاد کنید (به یاد داشته باشید که توابع شروع شده از یک خط زیرین API های خصوصی هستند):

// 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'), ], ), ), ], ), ); >, ) ؛ کارتهای برگشتی ؛ > 

پرونده های تولید شده در زمینه کودکان ویجت GridView را اختصاص دهید. فراموش نکن تمام عناصر موجود در ویجت GridView را با این کد جدید جایگزین کنید ::

// TODO: یک نمای شبکه (102) بدنه اضافه کنید: GridView.شمارش (crossaxiscount: 2 ، padding: const edgeinsts.همه (16.0) ، ChildAspectratio: 8.0/9.0 ، کودکان: _buildgridcards (10) // جایگزین), 

پروژه را ضبط کنید.

کارت ها حضور دارند ، اما آنها برای لحظه ای چیزی نشان نمی دهند. زمان افزودن داده های محصول فرا رسیده است.

داده های محصول را اضافه کنید

برنامه شامل برخی از محصولات با تصاویر ، نام و قیمت است. این مورد را به ویجت هایی که قبلاً در پرونده موجود است اضافه کنید

سپس در خانه.DART ، یک بسته جدید و برخی از پرونده های ارائه شده برای یک مدل داده را وارد کنید:

بسته وارد کردن: flutter/مواد.دارت '؛ بسته وارد کردن: intl/intl.دارت '؛ وارد کردن مدل/محصول.دارت '؛ وارد کردن مدل/محصولات_پوزیتوری.دارت '؛ 

سرانجام ، برای بازیابی اطلاعات محصول و استفاده از این داده ها در پرونده ها ، _buildgridcards () را اصلاح کنید:

// TODO: مجموعه ای از کارت ها را بسازید (102) // این لیست کل روش _buildgridcards (زمینه buildContext) را جایگزین کنید < Listproducts = ProductsRepository.loadProducts(Category.all); if (products.isEmpty) < return const []; > موضوع نهایی موضوع = موضوع.از (متن) ؛ NumberFormat Formatter = NumberFormat.SimpleCurrent (محلی: محل.localof (زمینه).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, ), ], ), ), ), ], ), ); >).به لیست ()؛ > 

مورد توجه : قبل از راه اندازی تدوین و اجرا صبر کنید. برای ایجاد اصلاح باقی مانده است.

برای قالب بندی متن ، ما از داده های تم استفاده می کنیم مضمون از مقدار متن جاری.

برای کسب اطلاعات بیشتر در مورد قالب بندی متن ، در دستورالعمل های طراحی مواد با مقاله در مورد تایپوگرافی مشورت کنید. برای کسب اطلاعات بیشتر در مورد قالب بندی از یک موضوع ، پس از این کارگاه برنامه نویسی با MDC-103 ادامه دهید: استفاده از مضامین طراحی مواد (رنگ ، شکل ، ارتفاع و نوع).

همچنین عملکرد ساخت () را برای انتقال مقدار اصلاح کنید متن در _buildgridcards () قبل از راه اندازی تدوین:

// TODO: یک نمای شبکه (102) بدنه اضافه کنید: GridView.شمارش (crossaxiscount: 2 ، padding: const edgeinsts.همه (16.0) ، ChildAspectratio: 8.0/9.0 ، کودکان: _BuildGridCards (زمینه) // تغییر کد), 

برنامه داغ را مجدداً راه اندازی کنید.

ممکن است متوجه شوید که ما فضای عمودی بین پرونده ها اضافه نمی کنیم. زیرا آنها چهار حاشیه در بالا و پایین دارند.

پروژه را ضبط کنید.

داده های تولید شده نمایش داده می شوند ، اما تصاویر توسط یک فضای غیر ضروری احاطه شده اند. به طور پیش فرض ، تصاویر با قسمت ترسیم می شوند با صندوق تعریف شده است .Scaledown (در این مورد). این مقدار را جایگزین کنید .Fitwidth به طوری که او بتواند بزرگنمایی کرده و فضای غیر ضروری را از بین ببرد.

یک قسمت مناسب اضافه کنید: مانند مقدار BoxFit.fitwidth:

 // TODO: اندازه جعبه (102) را تنظیم کنید: BoxFit.عرض, 

محصولات ما اکنون کاملاً در برنامه نمایش داده می شوند.

7. تبریک می گویم !

برنامه ما عملیاتی اساسی را ارائه می دهد که به کاربر اجازه می دهد از صفحه اتصال به صفحه اصلی که در آن محصولات نمایش داده می شود ، برود. چند خط کد برای اضافه کردن یک نوار برنامه بالاتر (با عنوان و سه دکمه) و پرونده ها کافی بود (برای ارائه محتوای برنامه ما). صفحه اصلی به دست آمده ساده و کاربردی است و دارای یک ساختار اساسی و محتوای قابل استفاده است.

نسخه تکمیل شده برنامه MDC-102 در شعبه کامل 103-starter_and_102 در دسترس است .

می توانید نسخه خود را در صفحه با کاربرد این شعبه مقایسه کنید.

مراحل زیر

با استفاده از نوار برنامه ، صفحه ، قسمت متن و دکمه واقع در بالای صفحه ، اکنون از چهار مؤلفه اصلی کتابخانه Flutter Material استفاده کرده ایم. برای کسب اطلاعات بیشتر ، به فهرست اجزای مواد مراجعه کنید.

حتی اگر برنامه ما کاملاً کار کند ، هویت برند یا دیدگاه خاصی را منعکس نمی کند. در کارگاه MDC-103: استفاده از مضامین طراحی مواد (رنگ ، شکل ، ارتفاع و نوع) ، ما سبک این اجزای را برای بیان یک برند مدرن و پویا شخصی سازی خواهیم کرد.

تحقق این کارگاه برنامه نویسی از من خواستار وقت و تلاش معقول شد

کاملا موافق

نه موافق نیست ، و نه موافق

اصلاً موافق نیست

من می خواهم به استفاده از اجزای مادی ادامه دهم

کاملا موافق

نه موافق نیست ، و نه موافق

اصلاً موافق نیست

مگر اینکه در غیر این صورت مشخص شده باشد ، محتوای این صفحه توسط مجوز Creative Commons Assignment 4 اداره می شود.0 و نمونه های کد توسط مجوز Apache 2 اداره می شوند.0. برای اطلاعات بیشتر ، به قوانین سایت توسعه دهندگان Google مراجعه کنید. جاوا یک علامت تجاری ثبت شده از شرکت های اوراکل و/یا شرکت های وابسته آن است.