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