از Pista Academy حمایت کنید
خلاصه آموزشی
مرور سریع مفاهیم اصلی پیش از تماشای کامل یا برای جمعبندی بعد از آموزش.
در جلسه 45 آموزش فلاتر، مدرس به بررسی نحوه ایجاد یک لیست غذاهای مرتبط با کتگوریهای مختلف میپردازد. ابتدا نحوه تپیبل کردن باکسها برای نمایش لیست غذاهای مرتبط با هر کتگوری به صورت تعاملی توضیح داده میشود. سپس، ایجاد یک صفحه جدید برای نمایش لیست غذاها و تعریف مدل دادهای مربوط به غذا به عنوان یک مدل جدید با ویژگیهای مختلف مانند نام، عکس، مواد اولیه، ویژگیهای غذایی و غیره توضیح داده میشود. در نهایت، نحوه استفاده از این مدل در صفحه جدید برای نمایش لیست غذاها به صورت یک لیست از این مدل توضیح داده میشود.
نکات کلیدی
تپیبل کردن باکسها برای نمایش لیست غذاهای مرتبط با هر کتگوری
تعریف مدل دادهای مربوط به غذا با ویژگیهای مختلف
ایجاد صفحه جدید برای نمایش لیست غذاها
استفاده از مدل دادهای در صفحه جدید برای نمایش لیست غذاها
متن ویدیو
متن زمان‌بندی‌شده این جلسه برای مرور، جستجو و دسترسی سریع‌تر.
سلام عرض می‌کنم خدمت دوستان عزیز. خب بریم سراغ ادامه کارمون. ما صفحه
کتگوریها رو درست کردیم. حالا می‌خوایم
کاری که بکنیم چیه؟ ما می‌خوایم وقتی
مثلاً روی چه می‌دونم مثلاً آسیایی
می‌زنیم
لیست غذاهای آسیایی رو به ما نشون بده. پس
چند تا مرحله داره کارمون. مرحله اول
اینکه این باکسا حالت چیزی داشته باشه
اینکه شما بتونی بزنی روش اصطلاحاً بهش
میگن تپیبل باشه میشه تپش کرد خب
پس یه حالت یه استپمون اینه استپ دوم اینه که وقتی روش می‌زنیم میخواد بره تو صفحه
بعدی تو اسکرین بعدی بره دیتای متناسب با
این کتگوری رو از اون دیتابیسمون بگیره
بیاره خب حالا اینجا ما دیتابیس نداریم
فعلاً داریم از دیتایی که دستی خودمون
منویسیم استفاده میکنیم
خب بریم سراغ استپ اصطلاً تپیبل کردن اینا
خب چهجوری این کارو انجام بدیم
برای این کار فقط کافیه که این باکس رو
ورپ بکنیم داخل یک چیزی به نام اینک ول
الان بریم با هم ببینیم خب
من بذارید اینا رو ببندم اضافه‌ها رو هرچی
که دارم
خب توی اسکرین کتگوریز من یه چیزی دارم به
نام اسکفولد درسته یه کانتینر دارم کوش
اینجا کتگوری گرید آیتم این که میره داخل کتگوری زمانش داده میشه اینو باید شما
تپور بکنی اصطلاحاً
خب پس باید من این کانتین رو ورب بکنم
داخل اینکول
میام چیکار می‌کنم؟ کلیک راست ریفکتور یه
ویجت میذارم بعد می‌نویسم اینکفر
خب اینکول چند تا نکته داره یکی اینکه شما باید یه فانکشن بهش بدی بگی که وقتی این
تب شد این فانکشن اجرا بشه این یه نکته
نکته دوم اینکه آیا می‌خواید وقتی تب میشه
مثلاً ظاهر
اون باک عوض بشه یا نه؟ خب دیدید وقتی شما
یه دکمه‌ای رو می‌زنید ظاهرش عوض میشه این
کارم اینجام شما می‌تونید انجام بدید
خب
اول برای اون که اون فانکشنه کی اجرا میشه
اون فانکشن زمانی که تپ میشه ما ایونتهای
دیگه هم داریما حالا ما این یه اینجا یه
دونهش آن مثلاً نگا کنید اینجا میبینید آن
هاورم داریم مثلاً لانگ پرسم مثلاً داریم
آن تپو داریم مثلاً حالا چیزای مختلف داره
که می‌تونید برید بخونید ببینید هر کدوم
دقیق چه قابلیت
میخوام بریم سراغ آن تپ
میگم تپ شد یه چیزی رو فراخونی کن یه فانکشنی رو حالا هر چیز مهم نیست
دومین اتفاقی که میخوام بیفته چیه میخوام یه ذره رنگ
یه رنگی بهش بده خب برای این کار یه چیز
داره به نام اسپلش کالر
میگم برو توی امآف
رنگ پرایمری کالررو باید بیار خب
دوم میخوام چیکار کنم میخوام برد ردیوس
بهش بدم
یعنی می‌زنم اون لبه‌هاش یه ذره گرد بشه
در سیلکولار می‌زنم سلکولار ۱۶ میذارم خب دیگه چی بریم تا همین جاشو ببینیم
خب نگاه کنید من می‌زنم این لبه‌ها رو ببینید و رنگشو
میبینید الان رنگش یه ذره عوض شد.
میبینید یه ذره روشن‌تر میشه. اون لبه‌ها
رم اگه دقت بکنید
یه معلوم چیز شده. فقط چون خود باکس
برد ردیوس نداره اون وقتی شما تبد می‌کنید
یه لبه‌ها رو اگه نگاه بکنید یه ذره
کمرنگ‌تر برد ردیوس داره. خب برای اینکه
اینو کامل ببینیم میایم برد ردیسو
به این کانتینرم میدیم که دیگه اصلاً دغدغه‌ای نشه برامون
توی آها اینجا نباید می‌زنم ببخشید باید میذارم بغل گریت
تو باکس دکوریشن
اه الان بهتر شد. الان وقتی کلیکو نگه
می‌دارم روش انگار که دارم فشارش میدم
می‌بینی رنگش یه ذره عوض میشه. خب پس این
قسمت اول کارمون انجام شد.
حالا بریم سراغ قسمت دوم.
من میخوام اینو می‌زنم برم تو یه صفحه
دیگه دیگه تو صفحه غذاها برم. پس میام یه
اسکرین جدید درست می‌کنم.
این اسکرینیه که در حقیقت مربوط میشه به صفحه‌ایه که من غذاها رو قرار نشون بدم
اینجا.
خب بیام کارای اولیهشو انجام بدم.
پکیج دو نقطه فلاتر
متریال.
یه کلس به نام میل
اسکرین
اکستند می‌کنه.
استیت لس اینم
رو دیگه توضیح نمیدم چون دیگه هی داریم تکرار میکنیم اینا رو.
خب تا اینجا فعلاً باشه ما قراره اینجا چی نشون بدیم؟ یه لیستی از
در حقیقت غذاها درسته؟ پس ما باید بریم یه
مدل جدید تعریف بکنیم مدل غذامون این مدل
کتگوری بود یه مدل جدید به نام غذا میده
دت خب
مدل غذای ما چیا خواهد داشت کلی ویژگی و اتریبیوت داره حالا من نمی‌خوام الان دونه
دونه بنویسم آمادهشو الان کپی می‌کنم
میارم اجازه بدید
خب این کلیتشه من یه بار از بالا تو پایین نشون بدم اگه
خواستید بنویسید
اینه
خب این از این که میشه مدل در حقیقت غذا
حالا چه ویژگیهایی داریم ما اینجا
یه آیدی داره خب اوکی کتگوری امکان داره
جزء چند تا کتگوری باشه یه غذا اسم عکسش
مواد اولیهش استپس دیورشنش کامپلکسیتی
افوردیبلیتی
و یه سری بولینم اینجا داریم فلگن آیا
گلوتون فری هستن لوکتوز فری هست در جز
مثلاً وگن حساب میشه وجترینه فلانه ومان
حالا ویژگیهای مختلفی که برای غذا میشه
گفت حالا ما اینا رو اینجا لیست کردیم
بعد د تا اینا هم داریم
کامپلکسیتی این سه تا گزینه رو داریم
سیمپل چلنجینگ هارد و اینم افوردیبل
پرایسی و حالا بعضیاش مثلاً غذای لوکس
قیمتش مناسبه و اینا منظورش اینه حالا
کاری نداره
خب اینم میشه مشخصات غذامون مدلی که برای
غذامون در نظر گرفتیم بریم یه سری دیتای
در حقیقت خامم لازم داریم خب توی دامی
دیتا اضافه کنیم کنار این کتگوریها یه سری
دیتایی برای میلز اینم بذارید بیارم من
خب اولین کاری که بکنم مدل چیزو بیارم
مدل میلزو بیارم میلو بیارم مدلش اینجا
بیاد. خب این مدلش مال. خب من این پروژه
رو که درست کردم این اسمشو یادم رفته
می‌ستم هی هر دفعه خطا میده بعد
خود اینا ارم بذارید بیارم
بذارید من کپی کنم از اینور بیارم حالا اینو
لینک گیتهاپ این دوره هست توی توضیحات ویدیو بچه‌ها برید اونجا خب بعد برید توی
این فصل این دور این فصل خب فصل بند شده
قشنگ این فایلو اصلاً بردارید کپی پیست
کنید خیلی راحت یعنی نیاز نیست من خود
فایلو حتماً بهتون بدم کل فایل اتمام هر
پروژه هر فصل داخل گیتاب هست می‌تونید
بیاید اون فایلو از اینجا بردارید
خب اینم حالا هر غذایی که میبینید یه سری
مشخصات داره حالا کاری نداره مثلاً این
چیه از کجا اومده مهم نیست
و
ما قراره با این کار داشته باشیم الان قراره بریم روی این یه دونه حلقه بزنیم به
ازای هر کدوم یه دونه غذا درست کنیم خب و
نشون بدیم تو صفحه خب
خب ما قراره اینو کجا نشون بدیم
تو اسکرین میلز قراره نشون بدیم دیگه
درسته
خب پس میام چیکار می‌کنم میام توی میلز تو
اسکرین میرز اینا رو ببندم اینا که
اضافهست و قاطی نکنیم میام تو اسکرین میرز
خب اینجا من به عنوان ورودی چی باید بگیرم
توی میلز؟ یک لیستی از غذا درسته پس
اینجا میگم فاینال
لیست
از میل ها یعنی مدل میل اسمشم هست میلز
این به عنوان ورودی داره میاد پس تو
کانستراکتورشم باید بنویسم
ریکواد
میز خب اینو آها مدلشو نیاوردم خب بذارید مدلپورت کنم
دو نقطه میل
مدل میل بیا
خب بیایم داخل
میگم ریترن کن یه اسکفورد
خب یه دونه
اپبار میذارم
خب داخلش یه تایتل میذارم ا چ اینجور شد اپار اکشن چیه
اپار [موسیقی]
خب توی تکست خب طبیعتاً چیو باید نشون بدیم؟ اون تایتلی که به عنوان ورودی اومده
که میشه تایتل این قسمت این در حقیقت
کتگوریمونه
توی بادی
این تایتل عبارمون بود بذار یه ذره اینو چیز کنم اینجوری نشون
نده ای نشون میده خب اشکال نداره میام
میگم که اسکپ فولد
این بیاد اینجا بعد
اینم بیاد اینجا حالا لاین بعدی
[موسیقی]
این بیاد اینجا یه ویلگولم اینجا میذارم
یه ویلگولم اینجا میذارم یه بار دیگه
ب
این ویرگولا رو وقتی می‌ذاری باید بفهمه
دیگه منظور ما چیه
یه مخیه ویرگول اینجا میذارم یه ویرگول اینجا میذارم باید بفهم منظورم نیو لاینه
حالا
خب بعد از ابار تو اینجا اینجا
یه بادی دارم
تو نقطه
خب تو این بادی قراره چی نشون بدیم
قراره که اون لیست غذاها رو بگیرم
به ازای هر کدوم یه دونه غذا نشون بدم
درسته
که اینو اجازه بدید
بریم بیایم جلسه بعدی انجامش بدیم چون
خیلی طولانی میشه ویدیومون فعلاً خداحافظ
پرسشهای رایج
پاسخ کوتاه و مستقیم به پرسشهایی که معمولاً هنگام یادگیری این موضوع مطرح میشوند.
در این جلسه، نحوه تپیبل کردن باکسها برای نمایش لیست غذاهای مرتبط با هر کتگوری به صورت تعاملی توضیح داده میشود.
مدل غذا شامل ویژگیهای مختلفی مانند نام، عکس، مواد اولیه، ویژگیهای غذایی و غیره است.
در نهایت، نحوه استفاده از این مدل در صفحه جدید برای نمایش لیست غذاها به صورت یک لیست از این مدل توضیح داده میشود.
آخرین بهروزرسانی محتوای متنی:
در این دوره جامع و پروژه‌محور با فلاتر و دارت از صفر تا صد آشنا می‌شوید و با ساخت هشت اپلیکیشن واقعی که هر کدام نکات کلیدی و پرکاربرد فلاتر را پوشش می‌دهد، مهارت‌های خود را به سطح بعدی می‌برید. آنچه در این دوره یاد می‌گیرید: مقدمه و نصب ابزارها: آشنایی با فلاتر، دارت و راه‌اندازی محیط توسعه مبانی دارت و فلاتر: یادگیری سینتکس دارت و ساخت ویجت‌های پایه با اپ «تاس‌انداز (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 🔔 همین حالا سابسکرایب کنید تا ویدیوهای آینده را از دست ندهید و یادگیری فلاتر را با هم شروع کنیم!
