از Pista Academy حمایت کنید
مرور سریع مفاهیم اصلی پیش از تماشای کامل یا برای جمعبندی بعد از آموزش.
در جلسه 42 آموزش فلاتر، مدرس به بررسی مفهوم اسکرین و ویجت میپردازد. ابتدا مدل داده کتگوری ایجاد میشود و سپس ویجتی برای نمایش هر کتگوری در صفحه اسکرین طراحی میگردد. این ویجت شامل یک باکس با رنگ و تکست نمایش دهنده نام کتگوری است. در نهایت، این ویجت به صورت لوپی در صفحه اسکرین استفاده میشود تا تمام کتگوریها نمایش داده شوند.
نکات کلیدی
اسکرین در فلاتر صفحه‌ای است که لیست کتگوری نمایش داده میشود و ویجت اجزای داخلی این صفحه هستند.
ویجت کتگوری گرید آیتم با استفاده از مدل داده کتگوری ایجاد میشود و در صفحه اسکرین با استفاده از لوپ نمایش داده میشود.
هر ویجت شامل یک باکس با رنگ و تکست نمایش دهنده نام کتگوری است.
استفاده از لوپ در فلاتر به نمایش تمام کتگوریها در صفحه اسکرین کمک می‌کند.
متن ویدیو
متن زمان‌بندی‌شده این جلسه برای مرور، جستجو و دسترسی سریع‌تر.
سلام عرض میکنم خدمت دوستان عزیز. خب بریم سراغ ادامه پروژه‌ای که داشتیم
انجام می‌دادیم و رسیدیم به این صفحه
کتگوری. میخوایم اینو الان دیگه تکمیلش
کنیم این جلسه.
خب اولین کاری که باید بکنیم اول یه
نکته‌ای رو من بگم. یه سؤالی رو الان مطرح
میکنم آخر این ویدیو جوابشو با همدیگه
می‌بینیم.
تفاوت بین اسکرین و ویجت چیه؟ ما یه
اصطلاحی داریم به نام اسکرین. یک صفحه‌ای
از یک برنامه و ویجت تفاوت این د تا بریم
جلوتر راجع بهش صحبت می‌کنیم خب
من قراره یه سری کتگوری داشته باشم دیگه
درسته میام برای این کتگوریها یه مدل درست
میکنم خب پس توی
لیب من یه دایرکتور درست میکنم به نام
مدلز
هر کتگوری بچه‌ها یه سری ویژگیها داره یه اسم داره یه آیدی داره طبیعتاً و یک رنگی
هم خواهد داشت که تو اون صفحه کتگوری هر
کتگوری یه رنگی بهخصوص خودشو داره
یه دونه از جنس استرینگ آیدی داره یه دونه باز از جنس استرینگ تایتل یا
اسمشه
یه دونه از جنس کالر کالر
خب یه ان یهکتورم نیاز داریم برای اینکه
این بخواد اینا رو اینشالز بکنه کتگوری
ریکورد افتاده
بعد اسمشم همچنین
خب و اما رنگ ریکویر نیست. اینو می‌تونم یه مقدار پیشفرض همینجا بهش بدم. میگم اگر
رنگی نداده بودم بهش رنگ
پرتقالی استفاده کن.
این میشه در حقیقت مدل کتگوری ما. خب حالا
یه دیتای فیکی هم درست میکنم اینجا. فیک
که نه دیتای واقعی هم هست یه جورایی
برای کتگوریام اول یه دونه دایرکتوری درست
کنم به نام دیتا.
داخلش یه چیزی درست میکنم
کو دیتا
پریت
یه کتگوری به نام یا دایرکتوری داخلش یه
دونه همون دامی دیتای معروفو اینجا درست
میکنم
خب این فایل آمادهشو دارم اجازه بدید
بیارمش
خب اینم از دیتامون
چرا داری ارور میدی؟ به خاطر اینکه اجازه بدین من یه بار از اول بنویسم
میل
توی
مدل کتگوری الان درست شد خب خودتونم
می‌تونید بچه‌ها اینو درست کنید چیز خاصی
نیست یه زیادم نیست اینو خودتون درست کنید
هر رنگی دوست داشتید به هر کدوم از این
کتگوریا بدید این هر کدوم یه سری لیست
کتگوری غذاهای مختلفه مثلاً خب و بریم ازش
استفاده کنیم. خب اینم از لیست کتگوریمون.
حالا
نکته چیه؟ ما قراره که
آها یادتون باشه من یه سؤالی پرسیدم گفتم که ما یه چیزی داریم به نام اسکرین
یه چیزی داریم به نام ویجت.
درسته؟ من تو این لیپ یه دایرکتوری درست
میکنم به نام ویجت.
سؤالی که پیش میاد بچه‌ها به نظرتون این صفحه کتگوری اسکرینه یا ویجته؟
ما یه صفحه‌ای داریم که قراره لیست کتگوری داخلش نشون بدیم که اینجا یه سری کتگوری
اینجوری به کنارم چیتا شده.
بچه‌ها به این صفحه میگن اسکرین. این المان‌هایی که داخلش هستو میگن ویجت.
خب این تفاوتشه.
ما الان قراره همین اسکرینه رو درست کنیم
که قبلاً درست کردیم به نام کتگوریز. الان
باید بیم این ویجتا رو درست کنیم. هر کدوم
از این یه دونه یه دونه میشه ویجت الان
اینجا این یه حکم ویجتو دارم
که داخل اسکرین کتگورزه پس من اینو می‌برم
داخل اسکرینز
اوکی
حالا بریم چیو درست کنیم اینو درست کنیم به عنوان یک ویجت تک ویجت درست کنم
اینجوری کدشو ننویسم اینو میخوام یه
حالتی باشه بتونیم مرتب ازش استفاده بکنیم
خب حالا
اسمشو چی بذاریم
یه سش بذاریم مثلاً کتگوری گرید آیتم مثلاً داخل ویجت یه فایلی درست میکنم به
نام
کتگوری
گریدم.
دت من نمیدونم چرا پمپ خارج افتاده یه جای
مکس میکنم به خاطر اینه. خب حالا بریم
سراغ درست کردن این ویجت که فقط کارش چیه؟
نمایش همون یه دونه کتگوری هست اون باکس
مربعیاست
چیزایی که لازم داریمو ایمپورت کنم
فلاتر این
پکج دقه میل برو توی
مدل
این کتگوری رو بیاد خب حالا ببینید
یک کلاس داریم به نام کتگوری
گرید آیتم
اکستند میکنه استیت لسه یعنی قرار نیست
اینجا استیتی ما داشته باشیم
کانست خب این به عنوان ورودی بچه‌ها چی باید
بگیره یه دونه کتگوری باید به عنوان ورودی
بگیره که نمایش بده پس من اینجا یه چیزی
چیزی دارم از جنس کتگوری
اسمشم کتگوریه
کانستراکتورشم اضافه کنم
خب اد اوررای
ویجت بیلد
کانتکست خب
این ویجت به عنوان ورودی یه کتگوری
می‌گیره بعد اون کتگوری نمایش میده درسته؟
خب حالا اینجا چیزی یادم رفت ریکاردشو
یادم رفت
خب این از این یه ذره خوشگلش کنیم
توی بیلد من قراره یه باکس برگردونم درسته
یه باکسی که یه رنگی داره و یه تکستی هم
داخلش که اسمون کتگوری هست برای اینکه
بخوام یه باکس داشته باشم که یه شکل و
ظاهری داشته باشه باشه خوشگل باشه بشه روش
یه سری تغییرات داد میام از کانتینر
استفاده میکنم بچه‌ها پس اینجا داخل این
بیلدر میام میگم که
ریترن بکنم یه کانتنر
کانتنر قابلیتی به ما میده که ما میتونیم
دیزاینش بکنیم خب
نه الاینمنتو فعلاً کاری ندارم بیا پایین
یه دکوریشن بهش میدم یعنی چون می‌تونید
دکور براش درست بکنید از جنس باکس دکوریشن
این باکس دکوریشن قراره یه رنگی داشته
باشه گردینت بهش میدم یه رنگ تک رنگ
نمی‌خوام باشه میخوام یه طیف رنگی داشته
باشم با لاینر گرادینت
بعد میگه رنگا رو به من بده یه آرایی از
رنگا بهش میدم
اون کتگوری که به عنوان ورودی گرفتی یه
رنگی داره درسته درسته
اون رنگه رو با اپسیتی
الاین مثلاً میخوام بگم که از بالا چپ شروع شد
تاپ لفت
از این باکس رکورشن میام بیرون یه چیزی رو باید نشون بده دیگه یه چایلدی باید داشته
باشه این ظاهرش بود خب برای چایلدشم چیکار
میکنم یه تکست باید نشون بدید کهه چیز
دیگه که نداره داخل خودش خب یه تکسته فقط
تکستم یه تمی داره خب میایم اینجا اینجا
داخل چال میگم تو قراره یک تکستیو نشون
بدی
که دقیقاً شبیه همین که اینجا داریم نگاه می‌کنید یه استایلی داره با یه تکست تکست
میشه همون تایتلی که از کتگوری میاد
استایلشم اینجا باید تعریف بکنم برای
استایلش
اول بذار تکستشو بدم میگم تو اون کتگوریه
یه تایتلی هست اونو نشون بده
خب حالا حالا برای استایل
میگم برو داخل تم.
آف کانتک تمی که تو این کانتکست تعریف
کرده بودم
برو توی تکست تنس
دو نقطه کپی ویت
اینجا میگم رنگش از تم.آف
کتکست برو تو کالر اسکیما
آن
بک گراند
بک گراند درست نوشتم
اون تمی که تعریف کردیم برید این داخلش
هست خب از اون دارم استفاده میکنم اینجا
یه پدینگم بذار بهش بدیم که از لبه‌ها یه
مقدار نوشتمون فاصل فاصله بگیره توی
کانتنر یه پدینگم میتونیم بدیم خیلی
کانتنر چیز خوبیه همه کار میشه روش کرد
اج
اینسرت آ از همه جهت ۱۶ تا
خب من ویجتمو درست کردم دیگه فقط کافیه که الان بیام به ازای هر کدوم از این کتگوریا
یه دونه ویجت درست بکنم.
پس میام توی کتگوریز اینجا اینو
برمی‌دارم.
خب میگم که به ازای هر کتگوری که داخل
در حقیقت اون دامی دیتا هست و دامی دیتا
بذار ایمپورت کنم.
اینم بیارم میگم به ازای هر
کتگوری که این داخل این هست بیایم اینجا
یه لوپ میخوام بزنیم
توی کتگوری توی چیلدرن
بیا بذار هر کدوم یه دونه کتگوری گرید
آیتم برا من درست کن به همین سادگی پس
میام اینجا میگم که فور
فاینال کتگوری
این تو این خب بذار هر کتگوری که داخل این هست
چیکار کن
گرید آیتم کتگوری به عنوان ورودی
این کتگوریهایی که داخل این هست دوباره
ورودی میدم به این این برای من یه دونه
خودش درست میکنه به همین سادگی
خب
نکته دیگه
تو این گرید ویو من یه پدینگم میدم که یه ذره این از ل فاصله بگیره
مثلاً اس شارت حالا بریم ببینیم خروج کارمونو
این صفحه ببینیم چهجوری میشه
هر کدوم از اینا یه دونه کتگورید آیتم از بالا سمت چپ یه گردینت گرفته تا این
پایین رنگشم که تعریف کرده بودیم تو اون
دیتایی که داشتیم شیم این تایتلشه این کل
این صفحه میشه اسکرین در حقیقت کتگوری
خب نکته دیگه نمی‌مونه بریم بیایم جلسه
ادامهشو جلسه بعدی صحبت کنیم فعلاً
خداحافظ
پرسشهای رایج
پاسخ کوتاه و مستقیم به پرسشهایی که معمولاً هنگام یادگیری این موضوع مطرح میشوند.
اسکرین صفحه‌ای است که لیست کتگوری نمایش داده میشود و ویجت اجزای داخلی این صفحه هستند.
ویجت کتگوری گرید آیتم با استفاده از مدل داده کتگوری ایجاد میشود و در صفحه اسکرین با استفاده از لوپ نمایش داده میشود.
هر ویجت شامل یک باکس با رنگ و تکست نمایش دهنده نام کتگوری است.
آخرین بهروزرسانی محتوای متنی:
در این دوره جامع و پروژه‌محور با فلاتر و دارت از صفر تا صد آشنا می‌شوید و با ساخت هشت اپلیکیشن واقعی که هر کدام نکات کلیدی و پرکاربرد فلاتر را پوشش می‌دهد، مهارت‌های خود را به سطح بعدی می‌برید. آنچه در این دوره یاد می‌گیرید: مقدمه و نصب ابزارها: آشنایی با فلاتر، دارت و راه‌اندازی محیط توسعه مبانی دارت و فلاتر: یادگیری سینتکس دارت و ساخت ویجت‌های پایه با اپ «تاس‌انداز (Roll Dice)» غوطه‌وری در فلاتر: پیاده‌سازی اپ «کوئیز (Quiz)» برای مسلط شدن بر ساختار و چرخه حیات ویجت‌ها دیباگ و رفع اشکال: تکنیک‌های عیب‌یابی و ابزارهای Flutter DevTools واکنش‌گرایی و تمینگ: ساخت «Expense Tracker» برای یادگیری ویجت‌های تعاملی، موضوع‌بندی (Theming) و طراحی ریسپانسیو مدیریت وضعیت (State Management): از Provider تا روش‌های داخلی دارت با اپ «TODO» و «Meals» مسیر‌یابی بین صفحات: ناوبری پیشرفته با «Meals App» و انتقال داده بین صفحات انیمیشن‌ها و جلوه‌های بصری: افزودن حرکات پویا و تراکیب انیمیشنی در «Meals App» فرم‌ها و ورودی کاربر: دریافت و اعتبارسنجی اطلاعات با «Shopping List» ارتباط با سرور: ارسال و دریافت HTTP، کار با JSON و REST API در «Shopping List» دسترسی به امکانات بومی دستگاه: استفاده از دوربین و ذخیره‌سازی در «Favorite Places» فراخوانی پوش نوتیفیکیشن و چت زنده: ترکیب فلاتر با Firebase برای ساخت اپ چت با اعلان لحظه‌ای به‌روزرسانی‌ها و چشم‌انداز آینده: نکات پایانی، منابع پیشرفته و مسیر یادگیری ادامه‌دار چرا این دوره؟ پروژه‌محور و گام‌به‌گام، مناسب برای تازه‌کارها و افراد با تجربه متوسط پوشش تمام جنبه‌های کلیدی: از طراحی رابط کاربری و انیمیشن تا اتصال به سرور و مدیریت وضعیت پیاده‌سازی چندین اپلیکیشن واقعی که می‌توانید به سادگی برای نمونه‌کار شخصی یا پروژه‌های شغلی استفاده کنید لینک گیت هاب دوره جهت دسترسی به کد پروژه های هر فصل https://github.com/pistaacademy/flutter 🔔 همین حالا سابسکرایب کنید تا ویدیوهای آینده را از دست ندهید و یادگیری فلاتر را با هم شروع کنیم!
