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