آموزش فلاتر - جلسه 43

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

و قراره که در حقیقت یاد بگیریم چهجوری

بتونیم بین صفحات جابهجا بشیم.

اپلیکیشنهایی که تا الان درست کرد همه تک

صفحه بودن. این صفحه‌بندی نداشت.

خب بریم سرو ک شروع بکنیم. می‌خوایم یه

برنامه درست کنیم برای مثلاً فرض کنید یه

رستوران که مثلاً لیست غذاهاشو داخلش

می‌ذاره

بعد شما هر غذایی رو انتخاب بکنید مشخصات

اون غذا باز میشه تو صفحه جدید. یه

صفحه‌ای هم می‌خوایم درست کنیم برای

کتگوری مثلاً بر اساس کتگوریهای مختلف

اونجا اسماش باشه بتونه بر اساس اون هم

سلکت بکنه.

مثلاً نمونهشو بخوام اینجا پیدا کنم الان

اینجا نیست عکسش مثلاً نشونتون بدم حالا

بگذریم

بریم شروع بکنیم از صفر

میام داخل ویس کد

یه پروژه درست می‌کنم فلاتر

خب یه مقدار صبر بکنیم تا پروژههمون جنریت بشه که

خب میور داخل سید دی می اوکی و فلاتر ران کن من حالا ویژو استو

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

خب اون قبلی رو می‌بندم تو مسیر پروژم باشم عالی

بعد گفته بود دستور فلاتر وانو بزنید.

چون اولین باری که داریم را می‌کنیم معمولاً یه مقدار زمان می‌بره تا این را

بشه.

کار شما نمیکردم اصلاً بذار ولش کن بذار من این استاپش کنم با کنترول سی می‌تونید

استاپ کنید خب میام داخل لیب. ارت من اینو

کامل پاک می‌کنم میخوام نسخه‌ای که مربوط

به خودمه رو بنویسم

و چون قرار از اول رو بنویسیم دیگه همه چی

خب می‌نویسم ایمپورت

پکج برو داخل فلاتر

خب من میخوام گوگل فونت استفاده بکنم تو این پروژه پس باید بیم گوگل فونتو نصبش

بکنیم. خب خب بریم اول یه گوگل بکنیم

ببینیم چهجوری باید نصبش کنیم.

خب توی گوگل که بزنید براتون میاد بزنید

گوگل فونت فلات اینستال همین صفحه براتون

میاد حالا آدیشم این بالا هست

توی اینستال میرید این دستورشو اینجا کپی

می‌کنم

میارم اینجا

اینتر خب این داره نصب میشه من این بالا پکیجشو

بیارم چی شد نصب شد خطایی داد فک حالا

اوکیه

پکج دو نقطه

گوگل فونز گوگل فونت دار خب

یه تم تعریف می‌کنم برای کل پروژهم چیزی

که ما توی فصل قبلی راجع بهش صحبت کردیم

خب

برای اینکه حالا یه مقد وقتمون نره من تمو

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

کردم تو این پروژه و اینم که حالا رنگیه

که انتخاب کردم می‌خوایم واردش بشیم

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

خب چیز خاصی چون نداره نکته‌ای نداره

خب

فعلاً تا همین اندازه کافیه بریم جلو ادامه بدیم کارمونو

می‌خوام

اولین صفحه‌ای که میرم سراغش صفحه در

حقیقت کتگوریم باشه

این اول می‌خوام برم سراغ صفحه کتگوری

اونو درست بکنم. صفحه کتگوری چهجوری

صفحه‌ایه؟

یه صفحه‌ایه که بالاش یه دونه اپ بار

داره. بذارید من اینجا اینو بکشم سیکرولشو

براتون.

خب یه همچین چیزی رو تصور کنید بچه‌ها. این فرض کنید صفحه کتگوریمونه.

خب اون بالای صفحه

یه دونه ابار دارم یه همچین چیزی. خب

این پایین قراره که کتگوری رو اینجوری

کنار همدیگه بچینم

مثلاً تو د تا ستونم خواهم داشت نه بیشتر و میاد تا پایین

این هر باکسا یه دونه کتگوری شما تصور

کنید مثلاً کتگوری غذای دریایی مثلاً چه

می‌دونم مثلاً غذای ایرانی مثلاً فست فود

و و چیزای دیگه خب

حالا می‌خوایم این سفر نفر دیزاین کنیم

بالا اب اپباره که خب قبلاً راجع بهش صحبت

کردیم اما این پایینیه چیه؟ این یه چیز

جدیده بهش میگن گرید ما توی حالا طراحی

وهم اینو داریم هم فلکسو داریم هم گریدو

داریم این گریده

بریم سراغ درست کردن این صفحه

اول میام چیکار می‌کنم یه دونه فایل جدید

توی لیب درست می‌کنم

اسمشو میذارم

کتگوریز

و شروع می‌کنم نوشتن کدش اول ایمپورت می‌کنم بذار منشو کپی کنم از اینور

متریالو میارم یه کلس تعریف می‌کنم اسمشو

میذارم کتگوریز

اکستند میکنه استیت لس ویجت استیتی نداریم تو این صفحه

خب

اینا رو من سریع ازش می‌گذرم چون قبلاً راجع بهش صحبت کردیم

کی خب

بعد میایم اینجا ادسا

اوررای

بیلد کانتکست خود کانتکست

[موسیقی]

و ریترن می‌کنم. خب حالا بریم اینجا

یه اسکول می‌ذارم

این تا اینجاست. ما گفتیم که یه دونه بالای صفحه اپار

داریم خب و یه دونه پایینش که در حقیقت

یه گلیده پس اینجا یه دونه

بار می‌ذارم

[موسیقی] داخل اخبار یه تایتل می‌ذارم فعلاً

کانست یه تکسته

مثلاً می‌ذارم اسمشو می‌ذارم پیک

یور

کتگوری کتگوری خودتون انتخاب کنید

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

ندارم میرم سراغ بادی صفحهم

توی بادی من میخوام چی داشته باشم یه

ساختاری شبیه گرید داشته باشم

و

اون چیزی که کشیدمو براتون درست بکنم خب

برای گرید میایم اینجا میگیم که گلی ویو

خب من فعلاً اینا رو پاک می‌کنم حالا میگم

اینا چین

گرید ویو بچه‌ها

د تا پارامتر خیلی مهم داره یکی گرید

دلیگیته که نشون میده که المان‌ها توی

گرید چهجوری قراره توی صفحه کنار هم قرار

بگیرن

مثلاً نشونتون دادم دیگه نگاه کنید اینجا

رو من گفتم د تا ستون داشته باشم تعداد

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

فاصله هست هم یه فاصله افقی هم یه فاصله

عمودی هم اینکه خود این باکسا یه ابعادی

داره اینم می‌تونید مشخص کنید بگید چهجوری

باشه ابعادش این میشه گرید دلیگیت

فعلاً کاری ندارم با گر دلیگیت میام پایین طبیعتاً یه سری چیزا م باید نشون بدم میشه

چیلرن من یه لیستی از المان‌ها که توی

صفحه باید نشون داده بشه خب

حالا بریم سراغ اول دلیگیتمون

توی گلیگیت خب باید همه تک تک این چیزایی

که بهتون گفتمو مشخص بکنیم

میام میگم که کانست

یه چیز داریم به نام

اسلیور

و فس کراس اکس کت خیلی خیلی اسم عجیب غریبی داره ولی با این می‌خوایم کار کنیم.

خب

حالا تکتک این پارامترهایی که من تو عکس

نشون دادم اینجا مشخص می‌کنیم. یک میگم د

تا ستون میخوام بچه‌ها به صورت پیش خب

محور اصلیمون میشه محور عمودی محور افقی

میشه محور کراس ما خب پس میگم در جهت کراس

اکسیز

کانت یعنی در جهت افقی من د تا ستون

میخوام د تا قسمتش بکن در جهت افقی رو

ابعاد باکسام چقدر باشه می‌خوام ابعاد

باکس سه در باشه یعنی طولش سه باشه عرضش د

پس میام میگم که چایلد اسپکت رشیوم سه در

دو باشه

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

می‌تونید بنویسید ولی خب اینجوری قشنگ‌تره

سه در د

فاصله در جهت محور افقیمون کراس اکسز اسپیسینگ میخوام باشه ۲۰ تا در

جهت افقی

در جهت عمودی یعنی مین اکس اسپیسینگم باشه

مثلاً ۲۰ تا

خب اینو اوکی کردیم پس ساختار گریدمون

مشخص شد حالا برای داخل چیلدرنم یه سری

تکست می‌ذارم که فقط یه چیزی گذاشته باشم

یعنی خیلی مهم نیست اینجا

یه سری تکست می‌ذارم فعلاً

یه چیزیهم داخلش می‌ذارم مثلاً می‌زارم

کتگوری روی وان

حالا فقط اینو کپی می‌کنم یه چند تا ازش

درست می‌کنم

میشه د این میشه سه این میشه ۴ خب حالا میرم داخلتم اینو باید بیارمش

اینجا تو هوم

میگم که

کتگوری

اسکرین

این بالا خودش ایمپورتم می‌کنه بچه‌ها.

خب بریم سفر رو ببینیم با همین من اینو رانش کنم میام توی ران رد این دیباگین

منتظر می‌بینم که اپلیکیشنم باز بشه. بذار

اینو بچرخونمش.

از فصل قبلی هم اینجوری مونده.

اروری داره میده حالا باید بریم نگاه کنیم که روش چیه.

خب اومد بالا متناش معلوم نیست بذار رنگشو من عوض کنم

بهتون مقدار رنگش

یه استایل اینجا بهش میدم دو نقطه تکست استیل

کر د نقطه کروا

فایت

اینو کپی می‌کنم.

اوکی د تا ستون داره فاصله همون چیزی که مدنظرمون بود اینم که تایتل ابارمونه بریم

بیایم ادامهشو جلسه بعدی صحبت کنیم فعلاً

خدانگهدارتون باشه ‏Yeah.