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