🔥ویژگی های ویجت های فلاتر

1⃣ویجت ها immutable هستن.

🟢یعنی تمام instance field هاشون باید final باشه و بعد از ساخت یک ویجت دیگه نمیتونید اون رو اپدیت کنید و اگه خواستید یه ویجت جدید با ویژگی های جدید بسازید باید کلن یه دونه از اول بسازید.

🟢فرقی نمیکنه ویجت از چه نوعی باشه و در هر صورت باید immutable باشه.

🟢ویجت های stateful خودشون immutable هستن ولی یه state دارن که mutable هست.

2⃣درنتیجه ی immutable بودن، ویجت ها میتونن به const constructor مجهز بشن.

🟢یک شرط لازم (و نه کافی) برای اینکه یک کلاس const constructor داشته باشه اینه که immutable باشه و همه ی instance field هاش final باشن.

🟢پس یه ویجت میتونه const constructor داشته باشه به شرط اینکه شروط دیگه رو هم دارا باشه.
⚠️مقاله const constructor رو مطالعه کنید.

3⃣برای اینکه یه ویجت رو const کنیم علاوه بر مجهز بودن به const constructor موقع ساخت ابجکت (توی درخت) به جای new (پیش فرض) باید از const استفاده کنیم.

🟢برای const کردن باید همه ی ارگومان هایی که موقع ساخت ابجکت به constructor پاس میدیم const باشن.

🟢به این ترتیب امکان اینکه همه ویجت های ساخته شده const بشن عملن وجود نداره.

4⃣ویجت هایی که const نیستن، با هر بار ریبلید شدن درخت، یه ابجکت جدید ازشون ساخته میشه...

❓ایا اینکه با هر بار ریبیلد شدن درخت یه ابجکت جدید ازشون ساخته میشه مشکلی رو بوجود نمیاره؟

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

@purecoder_ir

🔥declarative vs imperative

ویجت ها صرفن یه کانفیگ هستن.
برای نمونه شما به فلاتر میگی که یه باکس با این رنگ میخوام.
اگه خواستی رنگ باکس رو عوض کنی، ویجت قبلی رو اپدیت نمیکنی و کلن یه ویجت جدید میسازی و دوباره به فلاتر میگی که یه باکس با این رنگ میخوام.

خود فلاتر تمام کار ها رو انجام میده و یه باکس رنگی تحویلت میده و یا قبلی رو براساس کانفیگ جدیدی که بهش دادی اپدیت میکنه.

از این رو ویجت ها معمولن سبک هستن.

🟢به این سبک از برنامه نویسی declarative programming میگن.
🟢در مقابلش imperative programming قرار دارد.

🟢توی declarative شما میگی چی میخوای و به این که چطور اون چیزی که میخوای فراهم بشه کاری نداری (what)

🟢توی imperative اما به فرایند اهمیت میدی (how)

⭕️فلاتر از هر دو سبک استفاده کرده.

🟢برای نمونه وقتی با نویگیتور پوش و پاپ میکنیم داریم از imperative استفاده میکنیم.

@purecoder_ir

🔥انواع ویجت ها در فلاتر

✅StatelessWidget
✅StatefulWidget
✅InheritedWidget
✅RenerObjectWidget
✅ParentDatawidget

@purecoder_ir

🔥انواع ویجت ها در فلاتر

Widget__StatelessWidget
|
|__ StatefulWidget
|
|__ ProxyWidget
| |
| |___ InheritedWidget
| |
| |___ ParentDatawidget
|
|__ RenderObjectWidget
|
|__ LeafRenderObjectWidget
|
|__ SingleChildeRenderObj...
|
|__ MultiChildRenderObj...

@purecoder_ir

🔥انواع ویجت ها در فلاتر

✅نوع های Stateless و Stateful یه متد build دارن و subtree خودشون رو با استفاده از اون میسازن.

⚠️واضحه که برای stateful متد build توی ابجکت state قرار داره.

✅نوع proxy یه دونه child دارن و اون child در واقع subtree شون رو میسازه و خودشون شبیه به یه پروکسی عمل میکنن و subtree رو یه انگولکی میکنن.

✅نوع Render Object هم متد های
✔️createRenderObject
✔️updateRenderObject
دارن.

این ها سه تا ورژن دارن.

⭕️نوع Leaf یا برگ که مثل برک درخت هست و هیچ child ای نداره (subtree نداره)

مثل Image

⭕️نوع Single Child یه دونه Child میگیره و subtree ایش همون child اش میشه.

مثل Align یا ColoredBox

⭕️نوع Multi Child که چنتا child داره (List) و subtree های مختلف داره که هر کدوم از child ها یه شاخه ایجاد میکنن.

مثل Column یا Stack

🔥برگ های درخت فقط و فقط از نوع LeafRenderObjectWidget هستن و از انواع دیگه نمیتونن باشن.

🔥به غیر از MultiChildRenderObjectWidget بقیه تک شاخه ای هستن و فقط این نوع هست که چند شاخه ایجاد میکنه.
⚠️البته واضحه که نوع LeafRenderObjectWidget بدون شاخه هست.

@purecoder_ir

🔥RenderObjectWidget

🟢چند ماه پیش چالشی رو توی کانال گذاشتیم و یه انیمیشن ساده رو با هم طراحی کردیم.

🟢هر چند این انیمیشن رو خیلی ساده و با روش های دیگه هم میشه انجام داد ولی من به جهت جنبه ی اموزشی اومدم و به روش کاملن متفاوت پیادش کردم.

🟢یکی از کارهایی که انجام دادم طراحی یه RenderObjectWidget از پایه بود که از نوع LeafRenderObjectWidget بود.

🟢حالا که بحث انواع ویجت ها و RenderObjectWidget ها داغه، یه بار دیگه ادرس گیتهاب مربوط به این چالش رو میگذارم که با روند ساخت یه RenderObjectWidget از پایه اشنا بشید.

❓سوالاتت رو زیر این پست بپرس. 😍

⭐️توی گیتهاب هم یه استار بزن و باعث خشنودی قلبی من بشو که باعث میشه خدا ازت راضی باشه 😝

https://github.com/mohammadtaherri/multi_slice_progress_indicator

@purecoder_ir

🔥ParentDatawidget

🟢این نوع باید child مستقیم یا غیر مستقیم یه RenderObjectWidget باشن.

🟢میتونیم به ویجت Expanded که حتمن باید داخل column یا row قرار بگیره اشاره کنیم.
⚠️نری فقط Expanded رو نگاه کنی و بگی از این نوع نیست.
تا ته برو که برسی به Flexible.

🟢مثال دیگه ویجت Positioined که حتمن child مستقیم یا غیر مستقیم Stack باشه.

🟢این نوع ویجت ها فقط و فقط میتونن child یه RenderObjectWidget خاص باشن و دیگه نمیتونن به عنوان child ویجت های دیگه استفاده بشن.


🟢وقتی میگم child مستقیم یا غیر مستقیم یعنی چه؟

⭕️مستقیم یعنی مثلن Flexible مستقیم توی children یه Column قرار گرفته باشه.

⭕️غیر مستقیم یعنی خود Flexible توی یک یا چند ویجت Stateless یا Stateful پیچیده شده باشه و اون ویجت ها child ویجت Column شده باشن.

🟢یه قانون نانوشته این که باید child ویجت های MultiChildRenderObjectWidget بشن و زیاد معنی و مفهومی نداره که بخوان child ویجت های SingleChildeRenderObjectWidget ها بشن.

@purecoder_ir

🔥InheritedWidget

🟢این نوع ویجت خیلی معروفه و خیلی در موردش صحبت شده و نیازی به توضیح بیشتر نیست.

🟢این نوع رو میتونیم به عنوان سولوشن فلاتر برای مدیریت استیت تلقی کنیم.

🟢سوالات راجع به این نوع رو توی کامنت ها بپرسید.

⭕️البته این ویجت میتونه مدل های مختلفی داشته باشه, از جمله :

InheritedWidget
|
|___ InheritedModel
|
|___ InheritedNotifier

🟢ویجت هایی مثل Theme یا MediaQuery یا... در نهایت از این نوع هستن.

@purecoder_ir

🔥InheritedWidget

⁉️توی کدوم یک از متد های کلاس State بهتره از Theme.of(context) استفاده کنیم؟

build
initState
didUpdateWidget
didChangeDependencies

✅وقتی که از Theme.of(context) استفاده میکینم هدف این هست که علاوه بر دسترسی به تم با اپدیت شدن Theme، ویجت مورد نظر rebuild بشه و از تم جدید استفاده کنه .

🔥🔥🔥 وقتی ک توی یک استیت Theme.of(context) رو صدا میزنیم با هر بار اپدیت تم برنامه، استیت مورد نظر rebuild میشه و ابتدا متد didChangeDependencies و بعد متد build اجرا میشن.

در نتیجه اگ داخل این متد ها Theme.of(context) رو صدا بزنیم با هر بار اپدیت تم، استیت مورد نظر میتونه از تم جدید استفاده کنه 😍

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

✅پس مکان مناسب برای کال کردن Theme.of(context) متد های didChangeDependencies و build هست.

🔥اگه ویجت Stateless باشه هم کلن به دونه متد داریم و اونم build هست و داخل همون Theme.of(context) رو کال میکنیم و هر موقع که Theme اپدیت شد، ویجت مورد نظر هم ریبیلد میشه.

@purecoder_ir

اولین کدی که نوشتم توی زبان فرترن بود و دو تا دستور ساده ی read و write بود...

دستور write یه چیزی رو توی کنسول چاپ میکرد (مثل print) و read هم یه ورودی از کاربر دریافت میکرد.

و لذتی که از نوشتن
write("Hello World")
بردم، یکی از بهترین لذت های تمام عمر برنامه نویسیم بوده. 😍😍😅

واقعن روی ابرا بودم 😍

پ.ن: البته یادم نیست که سینتکس اش دقیقن همین بود یا نه 🤔

❓بر چه اساسی میگی یه پروژه بزرگه یا کوچیکه؟
❓چه معیاری برای سنجش داری؟

📝 ایجا کامنت کن...

🔥Clean Code
🔥JAVA - C# vs Dart

⭕️توی زبان های جاوا و سی شارپ یه قابلیتی به نام Method Overloading داریم.

✅یعنی میتونیم توی یه کلاس چنتا متد با نام یکسان داشته باشیم به شرطی که پارامتر های ورودی و یا return value متفاوتی داشته باشن.

✅یکی از خوبی هایی که این قابلیت در اختیارمون میگذاره این هست که توی این زبان ها میتونیم توی یک کلاس چندین Constructor داشته باشیم.

✅همه ی Constructor ها همنام هستن ولی پارامتر های ورودی متفاوت دارن.

❌از نظر قواعد کلین کد، اینکه توی یک کلاس چندین Constructor هم نام داشته باشیم زیاد جالب نیست و خوانایی کد رو پایین میاره.

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

😍حالا استفاده کنندگان از کلاس به جای استفاده از Constructor های زیاد و گیج کننده از متدهای استاتیک که نام های قابل فهم دارن استفاده میکنن.

⭕️زبان دارت قابلیت Method Overloading رو نداره.

❌از این رو امکان نوشتن چند متد هم نام در یک کلاس توی این زبان وجود نداره.

❌پس نمیتونیم چند Constructor هم نام هم داشته باشیم.

✅در عوض دارت، named constructor ها رو معرفی کرد و بهت اجازه میده Constructor های مختلف توی یه کلاس داشته باشی و اون ها رو با نام های مختلف مجزا کنی.

✅از این رو توی دارت نیازی به متد های استاتیک برای کلین تر شدن کد نیست.

👌پس از این نظر زبان دارت نسبت به جاوا و سی شارپ کمک بیشتری به کلین کد میکنه.

😍انگار توسعه دهندگان دارت قبل از توسعه، قواعد کلین کد رو خوندن. 😝

@purecoder_ir

این که خودتون رو توی یه Button ببینید چه حسی داره؟ 😄


🎉 اینم یه show case دیگه از Flutter


لینک زیر رو باز کنید و یه نگاهی به خودتون بندازید

https://payamzahedi.com/camera_button/



@persian_flutter

🔥Clean Commit

امروز قراره واژه ی جدیدی رو ابداع کنیم. دو مرد بزرگ یکی از قاره ی سبز و دیگری از آمریکا, یکی خالق Git و دیگری خالق واژه ی Clean, امروز به ما کمک میکنن تا واژه ی جدیدمون رو به دنیا معرفی کنیم.

ا Robert C. Martin, عموی 70 ساله و دوست داشتنی برنامه نویس ها, متولد سال 1952 در آمریکا و خالق فرهنگ Clean با مجموعه اثار شگفت انگیز خودش, در کنار Linus Benedict Torvalds, مرد 53 ساله ی فنلاندی و خالق Git, نقش مهمی رو در انگیزه ی شکل گیری داستان امروزمون ایفا میکنن.

😍ادامه ی این داستان رو از لینک زیر بخون :

https://purecoder.ir/clean-commit/

🔥اگه همیشه با نوشتن commit های گیت مشکل داری و نمیدونی چطوری ماست مالیش کنی😝😝 مقاله ی بالا رو بخون

@purecoder_ir

🔥Flutter Notification

⭕️توی فلاتر میتونی با استفاده از Notification ها, برای اجدادت (ancestor) یه نوتیف بفرستی.

✅برای این کار یه کلاس به اسم Notification داریم و یه ویجت به اسم NotificationListener.

✅برای ساخت نوتیفیکشن دلخواه خودت باید یه کلاس بسازی که از Notification ارث بری میکنه.

class CustomNotification extends Notification {

}

✅برای ارسال نوتیف, ویجت child یه ابجکت از Notification مورد نظر میسازه و متد dispatch رو روش کال میکنه.

notification.dispatch(context)

✅این نوتیف توی درخت بالا میره و بالا میره و بالا میره تا بالاخره توسط یکی از اجداد (ancestor) دریافت و هندل بشه.

🔥توجه داشته باش که از ancestor استفاده کردم و از parent استفاده نکردم چون که این نوتیف توسط هر کدوم از parent ها میتونه دریافت بشه.

✅برای دریافت و هندل کردن نوتیف باید از ویجت NotificationListener استفاده کنی.

🔰برای نمونه ScrollNotification ها که خود فلاتر توسط ویجت Scrollable میفرسته و توسط ancestor ها با قرار دادن NotificationListener توی درخت میتونه دریافت و هندل بشه.

😍تو هم میتونی نوتیف های اختصاصی خودت رو بسازی و وقتی که یه اتفاق خاصی رخ داد به ویجت های بالایی خبر بدی که بر اساس اون یه کاری کنن یا خودشون رو تغییر بدن.

@purecoder_ir

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

اگه وضعیت هاد میشد کل سقف رو کاه گلی، چیزی میزدن 😅

توی توسعه نرم افزار خیلی وقت ها باید با همین استراتژی پیش بری...

این که اپ داره مثل ساعت کار میکنه ولی یه کار خاصی میکنی و توجیهت اینه که این کار رو میکنم تا در اینده به مشکل پرفورمنسی نخورم، خیلی قابل قبول نیست.... بذار هرموقع مشکل پیش اومد یه راه حل پیدا کن و درمانش کن.

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

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

🔥اخبار Google IO 2023 رو میتونید از کانال زیر دنبال کنید:

@persian_flutter

⭕️آدرس سایت:
https://purecoder.ir

⭕️گروه پرسش و پاسخ:
@purecoder_gp

⭕️کانال:
@purecoder_ir

⭕️پشتیبانی:
@PureCoder_support

💥سال گذشته یه پست در مورد یکی از ویژگی های جدید Dart 3 که Class modifier ها بودن داشتیم.

🔥حالا که نسخه stable اش ریلیز شده و همه میتونن فلاترهاشون رو آپدیت و ازش استفاده کنن... وقتشه که این موارد رو خوب یاد بگیریم.

😍به زودی, خیلی زود, همه ی این ها رو خیلی ریز با هم یاد میگیریم.

@purecoder_ir

انتخاب شما کدومه؟ 🤔

Bloc یا Riverpod

تو این مقاله توضیح دادم که چرا Riverpod برنده واقعی توی این مقایسه هست.

قطعا این دوتا پکیج میتونن نیاز های اولیه و ساده هر پروژه ای رو حل کنن اما من چندتا سناریو طراحی کردم که توی اونها نشون میدم Riverpod چقدر میتونه خوب تر عمل کنه.

چند دقیقه وقت بزارید و با دقت مطالعش کنید.

اگه براتون مفید بود لایک یادتون نره

https://medium.com/snapp-x/riverpod-or-bloc-making-the-right-choice-for-your-real-world-app-7bc2e6b0b49

🔥Flutter Performance

⭕️هر فریم (frame) توی فلاتر ۷ فاز (phase) رو سپری میکنه تا در نهایت من و شما تصویر مربوط به اون فریم رو روی نمایشگر ببینیم :

1⃣User input
2⃣Animation
3⃣Build
4⃣Layout
5⃣Paint
6⃣Composite
7⃣Resterize

✅در ابتدا و توی مرحله ۱ انجین فلاتر (engine) ورودی های کاربر رو تشخیص میده و اون ها رو پردازش و در اختیار فریمورک (framework) قرار میده. (کالبک هایی داخل framework کال میشن)

برای مثال میتونیم به تاچ های کاربر اشاره کنیم.

🔸البته موارد دیگه ای رو هم میشه جزو user input بحساب اورد که ازش میگذریم.

✅مرحله ی ۲ تا ۶ به طور کامل توی فریمورک اتفاق میفته و هندل میشه.

🔸فریمورک به زبان دارت نوشته شده .

✅بعد از اون فریمورک یک سری کامند های گرافیکی رو به انجین میده و مرحله ی ۷ توی انجین انجام میشه.

🔸انجین به زبان c++ نوشته شده.

🔸همه ی کارهایی که داخل فریمورک انجام میشه توی ترد UI انجام میشه.

🔸مرحله اخر توی یه ترد دیگه انجام میشه.

@purecoder_ir