امشب چشمم به AnimatedOpacity خورد و دقیقن همون نکته ای که میخواستم بگم رو داره...

نحوه ی استفاده ی مستقیم از Animation توی یه Render Object و دور زدن فاز build

پس این ویجت هم به مجموعه ویجت هایی که توی فصل ۱۳ بررسی میشن اضافه شد‌.

ویجت هایی که توی فصل 13 بررسی میشن.

روی Render object اشون خیلی زوم میکنیم.

البته با دانشی که از فصل های قبلی بدست میازید عملن این موارد رو خودتون میتونید تجزیه و تحلیل کنید ولی برای نمونه چند ویجت نکته دار رو بررسی کردیم

این ویجت ها شاید در ظاهر ساده باشن, ولی نکته دارن و هدف اموزشی دارن و در مورد Render object اشون بحث داریم...

فصل 12 و 13 به زودی تکمیل میشن

تا اینجای دوره با انواع ویجت ها و المنت ها اشنا شدیم به جز یکیشون🤔🤔

ParentDataWidget

توی فصل ۱۳ با این یکی هم کار میکنیم تا داستان ویجت ها و المنت ها تکمیل بشن.

🔥3 قسمت ابتدایی فصل 12 اماده شدن ...

توی فصل 13 قرار بود چنتا ویجت رو انتخاب کنیم و کدهای خودشون و RenderBox اشون رو کامل بررسی کنیم.

تصمیم گرفتم که به جای بررسی کدها و متد ها خودمون از ابتدا شروع به توسعه ی یه ویجت و RenderBox با اون ویژگی ها کنیم.

اینجوری هم با روند تجزیه و تحلیل ساخت یه RenderBox اختصاصی اشنا میشیم و هم اون ویجت ها رو کامل بررسی کردیم و با یه تیر دو نشون میزنیم.

جوری که نحوه ی توسعه ی Render Box اختصاصی و Render Object Widget توی دوره داره اموزش داده میشه تا حالا کسی در مورد stateless و stateful هم اینجوری صحبت نکرده😍😁

ویجت هایی مثل Positioned که توی Stack ازش استفاده میکنیم یا Expanded که توی Column و Row استفاده میکنیم از نوع ParentDataWidget ها هستن که ویژگی های جالبی رو بهمون میدن که قراره باهاشون اشنا بشیم و یه دونه از اون ها رو به صورت اختصاصی و از صفر بنویسیم...

میدونستید صفحه هایی که توی navigator پوش میکنیم هم توی یه ویجتی شبیه استک قرار میگیرن

فقط یه استک کاستومایز شده برای نویگیتور هست تا پرفرمنس بهتری نسبت به استک معمولی بده...

چرا؟ مگه استک معمولی چشه؟🤔

توی فصل ۱۲ خیلی مفصل در مورد Render Box ها صحبت میکنیم و میشه بهش به عنوان یه راهنما و داکیومنت جامع برای توسعه ی Render Box های اختصاصی و همچنین درک و تحلیل ویجت های خود فلاتر استفاده کرد.

توی فصل های بعدی از این دانش برای توسعه ی چندین Render Box اختصاصی استفاده میکنیم و اون رو در عمل میبینیم.

توی دوره در مورد همه چیز Render Box صحبت کردیم و چیزی رو باقی نگذاشتیم:

🔥در مورد
✅Wet layout
✅Dry layout
✅Baseline
✅Dry baseline
✅Intrinsic dimensions
✅Repaint Boundary
✅Paint

صحبت کردیم و از همشون کاربردی توی توسعه چندین Render Box استفاده کردیم.

دیگه فکر نکنم جایی باشه که با این جزییات اینارو گفته باشه، حتا این عناوین اسمشون هم به سختی توی اینترنت پیدا میشه، چه برسه به توضیح و تدریسشون.
@fluttery_journey
@purecoder_ir

خب دوره ی فلاترمون خیلی وقته که تکمیل شده و توی چند پست فصل های مختلفش رو‌ معرفی میکنیم تا برای دوستانی که تصمیم به شرکت دارن یه راهنما باشه.

این دوره شامل ۱۶ فصله که توی ۳ پارت تنظیم شده. فصل های ۱ تا ۷ توی پارت یک قرار دارن که از لینک زیر میتونید دنبالش گنید👇
https://purecoder.ir/course/flutterys-journey/

1⃣فصل اول

✅توی فصل اول یه مقدمه ی خیلی کوتاه در مورد درخت های مختلف فلاتر و معماری فلاتر میگیم.

✅در مورد call stack صحبت میکنیم. بعدش Recursive Function ها رو یاد میگیریم و نحوه ی مدیریتشون توی call stack رو با مثال عملی و شکل میبینیم.

همچنین یه مثال خوب دیگه از Recursive Function میزنیم و اونو با روش TDD حل میکنیم و unit test هاش رو تحلیل میکنیم و مرحله به مرحله جلو میبریمش.

✅در نهایت ولی با Event Loop توی دارت آشنا میشیم و میبینیم که در پشت پرده ی کدهای async ای که میزنیم چی میگذره.

🔥قرار بود توی فصل اول در مورد Composite Pattern هم صحبت کنیم، ولی در ادامه یه فصل کامل رو به این پترن اختصاص دادیم و توی فصل ۷ با دو تا مثال عملی به خوبی شرحش دادیم. یکی از این مثال ها Multi Currency Money بود که توش جمع و تفریق کردن واحد های مختلف پولی باهم و سپس تبدیلشون به یک واحد رو با Composite Pattern مدل کردیم.

5 Dollar + 10 Euro + 30 Dirham

توی این فصل همچنین ارتباط Composite Pattern با Recursive Function رو بررسی کردیم و نحوه ی مدیریتش توی Call Stack رو با شکل دیدیم.

@fluttery_journey

@purecoder_ir

2⃣فصل دوم: Dart UI

🔥خب dart ui یه library خیلی low level عه که فریمورک فلاتر رو به انجین متصل میکنه.

✅توی این فصل با این المان های Low Level از جمله Engine Layer ها آشنا میشیم.

✅با مفهوم Frame و نحوه ی schedule کردن Frame اشنا میشیم و API های مختلف Platform Dispatcher رو هم بررسی میکنیم.

✅بدون استفاده از هیچ ویجتی و با low-level ترین API هایی که dart ui در اختیارمون میگذاره یه دونه UI و یه دونه Animation ساده میسازیم تا با مفاهیم از پایه اشنا بشیم.

✅با Canvas اشنا میشیم و به ویژه مفاهیم save و restore کردن رو توی canvas یاد میگیریم‌.

🔥مفاهیم این فصل پایه ای برای ادامه دوره ایجاد میکنن و به ویژه موقع کار با Render Tree و Layer Tree و انیمیشن ها توی فصل های بعدی، کاربردشون رو به صورت عملی میبینیم و درک میکنیم.

🆔برای مشاوره یا ثبت نام در دوره به ایدی زیر پیام بدید👇
@PureCoder_support

@fluttery_journey

@purecoder_ir

3⃣فصل سوم

✅توی این فصل با مفهوم Widget و Element و Render Object اشنا میشیم. البته اینجا خیلی ساده با این مفاهیم آشنا میشیم و توی فصل های اینده به طور دقیق Element و Render Object رو بررسی میکنیم.

✅تناظر بین ویجت ها، المنت ها و رندر ابجکت ها رو‌ بررسی میکنیم و میبینیم که ایا به ازای هر ویجت توی widget tree یک المنت توی element tree و یک رندر ابجکت توی render tree داریم یا نه؟

✅ماهیت Value Object بودن ویجت ها رو بررسی میکنیم.

✅با Build Context و واقعیت پشتش اشنا میشیم.

🆔برای مشاوره یا ثبت نام در دوره به ایدی زیر پیام بدید👇
@PureCoder_support

@fluttery_journey

@purecoder_ir

4⃣و5⃣: فصل های چهارم و پنجم

✅این ۲ فصل به طور کامل به Elment Tree اختصاص داره.

✅با Widget ها و Element های مختلف کار میکنیم.

✔️StatelessWidget/Element
✔️StatefulWidget/Element
✔️InheritedWidget/Element
✔️RenderObjectWidget/Element

✅فاز build که فاز سوم یک فریم هست رو به طور کامل بررسی میکینم.

✅با setState و حقیقت پشتش اشنا میشیم.

✅با استیت های مختلفی که یک المنت درش قرار میگیره
✔️ initial ✔️active ✔️inactive ✔️defunct

و همچنین اکشن های مختلفی که باعث تغییر استت المنت میشه
✔️ create ✔️mount ✔️deactivate ✔️activate ✔️unmount

به طور کامل اشنا میشیم.
😳پس با یک Finite State Machine هم طرفیم که توی عکس بالا میبینیم.

✅همچنین ساخته شدن رندر تری توی فاز بیلد رو‌ میبینیم.

✅و کلی نکته ی جذاب دیگه

6⃣فصل ششم: key ها

✅فصل ششم به Key ها اختصاص داره و انواع Key ها و ویژگی هاشون رو بررسی میکنیم.

✅با Local Key ها، ویژگی ها و کاربردشون اشنا میشیم.

✅همچنین Global Key ها رو هم به طور کامل بررسی میکنیم.

🆔برای مشاوره یا ثبت نام در دوره به ایدی زیر پیام بدید👇
@PureCoder_support

@fluttery_journey

@purecoder_ir

🔥پارت دوم دوره شامل ۴ فصل میشه و از فصل های ۸ تا ۱۱ رو در بر میگیره:

https://purecoder.ir/course/fluttery-journey-2/

🔥این پارت به طور کامل به بحث Rendering اختصاص داره.

✅توی فصل های قبلی با فاز Build اشنا شدیم و توی این پارت با ۳ فاز دیگه که یک فریم فلاتری طی میکنه به طور کامل اشنا میشیم:
✔️Layout
✔️Paint
✔️Composite

✅با Render Object ها و ویژگی هاشون اشنا میشیم.

✅نکات مهمی رو در مورد Constraints میگیم.

✅فاز Layout توی Render Tree رو به طور کامل شرح میدیم و مفهوم Re-layout Boundary رو به خوبی درک میکنیم و بررسی میکنیم که Render Object ها در چه شرایطی به Re-layout Boundary تبدیل میشن.

✅فاز Paint توی Render Tree رو هم به طور کامل بررسی میکنیم و مفاهیم زیر رو به طور کامل بررسی میکنیم:

✔️Repaint Boundar
✔️Compositing Bits

🔥فقط ۷ قسمت به Repaint Boundary اختصاص داره. اگه هست جای دیگه ایران نه کل جهان که اینجوری توضیح داده باشه....

✅فاز Composite رو‌ بررسی میکنیم و با Layer Tree و وظایفش به طور کامل اشنا میشیم.

✅با انواع Layer ها و ویژگی هاشون اشنا میشیم:

✔️Picture Layer
✔️Offset Layer ✔️Transform Layer
✔️Clip Layers ✔️BackdropFilter Layer ✔️...

✅کاربرد Engine Layer ها، Picture و Canvas رو که توی فصل ۲ باهاشون اشنا شده بودیم رو از نزدیک میبینیم.

✅با Painting Context اشنا میشیم و یاد میگیرم که چطوری باهاش کار کنیم.

✅با Pipeline Owner و نحوه ی مدیریت فاز های مختلف مربوط به rendering اشنا میشیم.

✅نحوه ی توسعه ی یک Render Object اختصاصی رو بررسی میکنیم.

✅و کلی نکته ی جذاب دیگه...

🆔برای مشاوره یا ثبت نام در دوره به ایدی زیر پیام بدید👇
@PureCoder_support

@fluttery_journey

@purecoder_ir

🔥پارت سوم دوره ی فلاتر شامل ۵ فصله که روی توسعه ی Render Box اختصاصی تمرکز می کنیم و هر چی نکته هست رو میگیم. همچنین توی دو فصل اخر در مورد Binding ها و Animation ها صحبت میکنیم:
https://purecoder.ir/course/flutterys-journey-3/

2⃣1⃣فصل دوازدهم

🔥این فصل به نحوه ی توسعه ی یک Render Box اختصاصی میپردازیم و نکته ای رو نگفته باقی نمیگذاریم.

✅در مورد Layout Protocol میگیم و مفاهیم Wet Layout و Dry Layout رو خیلی خوب بررسی و نحوه ی پیاده سازیش رو میگیم.

✅با Children Protocol و نحوه ی مدل کردن و مدیریت بچه های یه Render Box اشنا میشیم.

✅مفهوم Baseline رو به طور کامل شرح میدیم و میگیم که چطوری موقع ساخت یه Render Box اختصاصی باید به حسابش برسیم.

✅همچنین بحث مفصلی هم در مورد مفهوم Intrinsic Dimensions و پیاده سازیشون داریم.

✅در مورد نحوه ی نوشتن کانستراکتور و پراپرتی های یه Render Box و نکاتی که باید رعایت کنیم هم صحبت میکنیم.

🔥اما کار به اینجا ختم نمیشه و پا رو فراتر میگذاریم و در مورد ۲ مدل از Render Box های معروف مفصل صحبت میکنیم و ویژگی هاشون رو میگیم.
✔️Proxy Box
✔️Shifted Box

نحوه ی توسعه ی این ۲ مدل Box رو هم بررسی میکنیم.

✅و نکته های تر و تمیز دیگه که توی این فصل که با ۲۶ قسمت طولانی ترین فصل دوره هست، میگیم😍

🆔برای مشاوره یا ثبت نام در دوره به ایدی زیر پیام بدید👇
@PureCoder_support

@fluttery_journey

@purecoder_ir

🔥خب توی فصل ۱۲ هر نکته ای که برای توسعه ی یه دونه Render Box اختصاصی لازم بود رو گفتیم. ولی هر چقدر هم نکته بگیم، تا کد نزنیم و مثال نبینیم یه جای کار میلنگه.

🔥از این رو توی فصل های ۱۳ و ۱۴ وارد گود میشیم و چندین Render Box رو از صفر توسعه میدیم. توی این دو فصل ویجت های زیر و Render Box شون رو با هم توسعه میدیم:

✅ConstrainedBox / SizedBox
✅Padding
✅Align / Center
✅OverflowBox
✅ClipRect
✅Opacity
✅Stack

💥روند کار به این شکل نیست که بریم و سورس کد فلاتر رو نگاه کنیم. بلکه خدمون سناریو میچینیم و از صفر شروع به توسعه میکنیم. وسط کار به چالش میخوریم. چالش ها رو حل میکنیم و جلو میریم.

🔥با این مثال ها روند دقیق تحلیل نیازمندی ها و توسعه ی یه Render Box رو یاد میگیری و مثل اب خوردن انجامش میدی.

💥ویجت ها کاملن هوشمندانه انتخاب شدن تا توی هر کدوم نکته یا نکات خاصی رو یاد بگیریم و مدل های مختلفی از Render Box ها رو شامل میشن.


🆔برای مشاوره یا ثبت نام در دوره به ایدی زیر پیام بدید👇
@PureCoder_support

@fluttery_journey

@purecoder_ir