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