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