💊Capsule
⚡️⚡️Animation⚡️⚡️

❓حالا این تصاویر باید با چه فاصله زمانی پشت سر هم قرار بگیرن؟ 🤔

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

🔥توی هر نمایشگر یه مفهومی داریم به اسم Refresh rate.

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

مثلن اگه ۶۰ هرتز باشه توی هر ثانیه ۶۰ بار میتونه تصویر خودش رو رفرش کنه یعنی تقریبن هر ۱۶/۳۳ میلی ثانیه یه بار.

ولی این کافی نیست و فقط به صرف اینکه یه نمایشگر ۶۰ هرتز داشته باشیم نمیتونیم بگیم که تصویر توی هر ثانیه ۶۰ بار رفرش میشه.

🔥 توی پردازنده یا GPU یه مفهومی داریم به اسم Frame rate.

این تعداد Frame هایی رو که پردازنده گرافیکی توی هر ثانیه میتونه تولید کنه رو بیان میکنه.
و واحدش fps یا Frame per Seconds هست.

وقتی میگیم 60 fps یعنی اینکه پردازنده این قابلیت داره که توی هرثانیه ۶۰ فریم یا ۶۰ تصویر جدید رندر کنه.

🔥حالا نکته مهمی که هست اینه که همیشه refresh rate نمایشگر با frame rate پردازنده برابر نیست.
یعنی ممکنه یه نمایشگر سرعت رفرشش بیشتر از سرعت تولید فریم توسط پردازنده باشه یا برعکس و اینجوری بین این دو ناهماهنگی بوجود میاد 🤦‍♂

❓راه حل چیه به نظرتون؟


#animation #capsule #advanced

🔥Article
قسمت جدید داستان null در دارت منتشر شد.

توی این قسمت جلسه دوم رسیدگی به اتهامات دارت تشکیل میشه...یه داستان خیلی جذاب که آخرش نکات زیادی در مورد انواع مختلف ارگومان های ورودی function ها و constructor ها یاد میگیریم.😍😍

لینک مقاله :‌
https://virgool.io/flutter-challenge/dart-null-story-court-2-fybaowhhzpf1

#beginner #article

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

https://dart.dev/null-safety/understanding-null-safety

هر کسی به خوندن از منابع اصلی و البته زبان اصلی علاقه داره میتونه این مقاله رو دنبال کنه. 👌

💊Capsule
⚡️⚡️Dart threads⚡️⚡️
قبلن دوتا پست در مورد سینگل ترد بودن یا نبودن فلاتر داشتیم که میتونی با این تگ پیداشون کنی و بخونی
#single_thread

حالا یکم در مورد دارت صحبت کنیم.
آقا بعضیا میگن دارت سینگل ترد هست و به درد نمیخوره و فلان و....

این حرف از کجا در اومده؟ 😅😅🤦‍♂🤦‍♂

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

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

توی دارت هم همینه فقط اسمش شده isolate
تلفظش میشه : آیزولیت
معنیش میشه محصور (همچین چیزی 😅)

حالا چرا این اسم رو گذاشتن روش؟
مریض بودن ایا؟ 😅
خب میزاشتن همون ترد دیگ 🤦‍♂🤦‍♂

نه عزیزان دل مریض نبودن.

🔥هر آیزولیت که ساخته میشه یک ترد جدید ساخته میشه.
در واقع هر ایزولیت یک سینگل ترد داره و یک event loop که کد ها داخلش اجرا میشه.

ولی برخلاف زبان هایی مثل جاوا یا c++ که ترد های مختلف از یک Shared memory استفاده میکنه اینجا توی دارت هر کدومشون یک private memory دارن و مموری رو بین خودشون share نمیکنن و فقط با رد و بدل کردن message با هم ارتباط برقرار می کنن

به همین دلیل بهشون میگن isolate.

#single_thread #capsule #advanced

انیمیشن ها رو ادامه ندیم؟
دوست نداشتید؟ 😅
کسی پاسخی نداد 🤦‍♂

یاری برسونید😂😂

💊Capsule
⚡️⚡️Animation⚡️⚡️

🔥توی پست های قبلی در مورد اینکه معنی لغوی Animation چیه صحبت کردیم و متوجه شدیم که وقتی که داریم یه تصویر متحرک یا یه فیلم میبینم یا یه بازی کامپیوتری میکنیم در واقع داره چه اتفاقی میوفته.

🔥همچنین با دو تا مفهوم از مفاهیمی که سخت افزار های درگیر توی این قضیه باهاشون سر و کار دارن آشنا شدیم.

نمایشگر : refrash rate (هرتز)
پردازنده : frame rate (fps)

منظور از پردازنده هم بیشتر پردازنده گرافیکی یا GPU هست.

GPU : Graphics Processing Unit
CPU : Central Processing Unit

یه سوال هم مطرح کردیم که...

🔥حالا یه سوال دیگه این جا مطرح میشه که Flutter با کدوم یک از مفاهیم بالا بیشتر درگیره؟ با اولی یعنی refresh rate یا دومی یعنی frame rate.

#advanced #capsule #animation

💊Capsule
⚡️نکات طلایی scrollable ویجت ها⚡️
1⃣

چند تا نکته که موقع استفاده از ListView ، GridView , CustomScrollView یا ویجت های مشابه که scrollable هستن میتونه به بهبود پرفرمانس کمک کنه :

🔥اگه ویجت مورد نظرتون یعنی ListView یا... قراره کل صفحه رو پوشش بده (تاکید میکنم کل صفحه) در این صورت پارامتر clipBehavior رو واسش روی حالت none بگذارید :
clipBehavior : Clip.none

🔥اگه قراره کل صفحه رو پوشش نده و یه قسمت خاصی از صفحه رو میگیره این پارامتر رو روی حالت زیر که پیش فرض خودش هم هست بگذارید :
clipBehavior : Clip.hardEdge

🔥مقادیر دیگه برای این پارامتر مثل
Clip.antiAlias
رو فقط در صورت نیاز ضروری و اگه واقعن میدونستید که دارید چکار میکنید قرار بدید.

نکات بعدی در پست های بعدی 😍😍

#advanced #capsule #scrollable #list_view #clip #performance

💊Capsule
⚡️نکات طلایی scrollable ویجت ها⚡️
2⃣
این یکی قاتل پرفرمانسه
shrinkWrap = true
🔥شاید از این استفاده کنی و خیلی وقت ها تاثیری توی پرفرمانس هم نبینی ولی من بهت میگم که از این آپشن صرف نظر کن.

🔥وقتی که false باشه یعنی حالت پیش فرض scrollable مربوطه حداکثر فضایی رو که parent اش در اختیارش گذاشته رو میگیره.
یعنی خودش رو تا بزرگترین حد ممکن که parent اش بهش اجازه داده بسط میده.

🔥حالا بعضی وقت ها بعضی ویجت ها قیود مشخصی به child هاشون اعمال نمیکنن و اون ها رو محدود نمیکنن که سایز مشخصی داشته باشن (یا محدودشون نمیکنن که سایزشون توی یه بازه خاص باشه)

مثل column که child هاشو در راستای ارتفاع محدود نمیکنه و بهشون اجازه میده که از 0 تا infinity هر سایزی که دلش خواست بگیره و بعدن اگه مجموع سایز child هاش از سایز مجاز خودش بیشتر شده اون ها رو clip میکنه.

این که چرا مثلن column رفتارش اینجوریه و مث آدم از اول child ها رو محدود نمیکنه بماند. 😅

ولی خب توی همچنین شرایطی scrollable widget ما چون که قیود مشخصی (constraints) بهش اعمال نشده نمیدونه که باید چه سایزی بگیره.

🔥حالا توی همچین شرایطی این آپشن یعنی shrinkWrap به کار میاد و با true کردنش به جای اینکه ویجت خودش رو تا حداکثر اندازه مجاز بسط بده به اندازه بچهاش سایز میگیره.

🔥ولی در این حالت اتفاقاتی میوفته که به شدت روی پرفرمانس تاثیر میذاره.

🔥پس همیشه یه راه دیگه برای حل این مشکل پیدا کنید و از پارامتر استفاده نکنید مگر اینکه انقد حرفه ای بودید که میدونستید که توی اون حالت خاص که دارید استفاده میکنید و با شرایطی که ویجت های parent دارن این مورد خیلی قضیه رو حاد نمیکنه. 😍

من میگم استفاده نکنید. اختیار با خودتون 😁
#capsule #advanced #list_view #performance #shrinkwrap

💊Capsule
⚡️نکات طلایی scrollable ویجت ها⚡️
3️⃣
Scrollbars

🔥وقتی یک scroll view استفاده میکنیم به صورت پیش فرض برای پلتفرم های دسکتاپ مثل windows و macos و linux اسکرول بار میذاره و برای Android و IOS و fuchsia اسکرول بار نمیذاره.

برای فعال یا غیر فعال کردن این قابلیت لینک زیر رو ببین :

فعال کردن (یا غیر فعال کردن) scrollbars در scrollView


#list_view #capsule #intermediate

پارسی رو پاس بداریم یا نه؟

من شخصن یکی از طرفداران سر سخت زبان پارسیم.
از ایرانی بودنم ناراحت نیستم و سرسختانه بر این باورم که باید زبان پارسی رو حفظ کنیم.
زبانی که اجداد ما با همت فردوسی ها و... به هر سختی که بود حفظش کردن و ما هم وظیفه داریم که حفظش کنیم.

بگذریم....
ولی بیایم یکم توی فضای تخصصی خودمون.

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

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

یا نگیم متغیر.... بهتر نیست بگیم variable؟؟

ما وارد یک فضای تخصصی شدیم و این فضا یک سری واژگان محدود داره و چه خوبه که همه دنیا این واژگان محدود رو بدون دستکاری به کار ببرن.

💊Capsule
⚡️نکات طلایی scrollable ویجت ها⚡️
4⃣

addAutomaticKeepAlives

🔥این پارامتر به صورت پیش فرض true هست.

🔥اگه قرار نیست هیچ کدوم از آیتم های scrollable widget مورد نظر کش بشه( در واقع اگه لازم نیست هیچ کدوم از آیتم ها بعد از اینکه با اسکرول کردن از حالت ویزیبل خارج شدن زنده بمونن و استیت شون حفظ بشه) بهتره این این پارامتر رو روی false بگذارید.

🔥ساده تر بگم اگه هیچ کدوم از آیتم ها (یا نوادگانشون) رو با AutomaticKeepAliveClientMixin میکس نکردین این پارامتر رو روی false بگذارید.

#capsule #advanced #performance #list_view

💊Capsule
⚡️نکات طلایی scrollable ویجت ها⚡️
5⃣
PageStorageKey

این نوع Key یه subclass از ValueKey هست با یه کاربرد خاص.
قبلن در مورد انواع key ها و کاربردشون گفتم و این نوع رو به آینده موکول کردم.

الان وقتشه 😍😍

🔥اگه بخوایم ScrollView موقعیت اسکرول خودش رو حفظ کنه و وقتی که خراب شد و دوباره از اول ساخته شد برگرده به همون scroll position قبلی، از این نوع از key استفاده می کنیم.

🔥برای مثال وقتی توی یه TabbarView یا یه PageView یه دونه ListView داشته باشیم وقتی میریم page بعدی این page که شامل لیست هست کامل destroy میشه و بعد که برمیگردیم از اول ساخته میشه.

🔥برای اینکه موقعیت اسکرول خودش رو ذخیره کنه و بعد که از اول ساخته شد دوباره بره همون جا :

✔️به یکی از parent های ListView یا خودش یه key از این نوع میدیم.

✔️توی ScrollController هم باید پارامتر زیر رو true کنیم :
keepScrollOffset

🔥از این نوع key کلن میتونیم برای ذخیره و بازیابی اطلاعات توی یک Route و توی frame های مختلف استفاده کنیم که یه کاربردش همین بود که گفتم.


#capsule #intermediate #local_key #list_view

💊Capsule
⚡️نکات طلایی scrollable ویجت ها⚡️
6⃣

ListView itemExtent

🔥موقع ساخت ListView اگه :

✔️توی حالت vertical scrolling همه آیتم ها height برابر دارن

یا اگه :

✔️توی حالت horizontal scrolling همه آیتم ها width برابر دارن

به جای تعیین کردن اندازه توی خود آیتم ها، پارامتر itemExtent توی ListView رو مقدار بدید.

🔥در این حالت اگه ListView افقی باشه همه آیتم ها مجبورن width شون برابر این مقدار باشه.
و اگه ListView عمودی باشه height همه آیتم ها اجبارن همین مقدار میشه.

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

😍😍اینم هدیه پرفرمانسی من به شما 😍😍

#advanced #list_view #capsule #performance

💊Capsule
⚡️نکات طلایی scrollable ویجت ها⚡️
7⃣

توی این پست میخوام یکم پیشگویی کنم و از آینده بگم 😂😂🤪

توی پست شماره ۵ در مورد PageStorageKey توضیح دادم و بهتون گفتم که از این نوع key میتونیم برای ذخیره موقعیت اسکرول یه scrollView استفاده کنیم.

🔥این روش توی ورژن های آینده فلاتر منسوخ میشه (دقیق نمیدونم چه ورژنی) ولی یکی از ToDo های فلاتر منسوخ کردن این روش هست.

🔥توی پست های بعدی در مورد روش جایگزین بهتون میگم که بعد از منسوخ شدن این روش هم خیالتون راحت باشه 😍

#capsule #list_view #advanced #local_key

💊Capsule
⚡️نکات طلایی scrollable ویجت ها⚡️
8⃣
GlowingOverscrollIndicator

🔥موقع اسکرول کردن یک اسکرول ویو وقتی که به انتهای لیست میرسیم اگه بیشتر اسکرول کنیم توی سیستم عامل های Android و fuchsia یک نمایی ایجاد میشه (شبیه یک نیم دایره شفاف ) .
این ویو توسط ویجت بالا ایجاد میشه.

برای غیر فعال کردن این حالت توی این سیستم عامل ها دو راه هست :

✅به scroll view پارامتر scrollBehavior بدیم :

scrollBehavior :
ScrollConfiguration.of(context).copyWith(overScroll : false)

✅برای اینکه همه اسکرول ویو ها رفتار مشابه داشته باشن این ویجت رو بالای اون sub tree بگذاریم :

ScrollConfiguration(
behavior: ScrollConfiguration.of(context).copyWith(overScroll : false))

🔥توی سیستم عامل های IOS و macos به صورت پیش فرض این حالت بوجود نمیاد و این سیستم عامل ها رفتار پیش فرضشون این هست که اجازه میدن لیست مورد نظر over scroll یا under scroll داشته باشه که توی پست های بعدی این خصوصیت رو میبینیم.

#inheritance #list_view #capsule

مقاله ها توی گیتهاب به سبک زیر قرار میگیره :‌

https://github.com/mohammadtaherri/flutter_challenges/blob/main/articles/scrollable/scrollbar.md

مقاله های گیت هاب رو به جای لینک قبلی احتمالن دیگه اینجا و توی این لینک قرار بدم

هم میتونید بخونید و کامنت و سوالی هم اگ داشتید همون جا مطرح کنید

نظرتون رو در مورد اینکه اینجا بگذاریم یا توی همون ریپوزیتوری مخصوص بگید...

https://gist.github.com/mohammadtaherri

مقاله های null safety یکیش مونده و بیشتر از یه ماهه تکمیلش نکردم

هیچکس نگفت پس ادامش چی شد 🤦‍♂
چرا ناقص موند 😅

معلومه اصن نمیخونید 😅😅🤦‍♂🤦‍♂

⚡️چرخه حیات State ، مختصر ، کامل و دقیق⚡️

1⃣mount
اولین بار که یک stateful ساخته میشه و توی درخت قرار میگیره متد های زیر از state به ترتیب اجرا میشن :
State Constructor

initState
didChangeDependencies
build

❌توی هر سه متد بالا به context دسترسی داریم و میتونیم با context کار کنیم.
برخلاف تصور و اشتباه رایج خیلی ها که میگن داخل initState به context دسترسی نداریم.
🔥فقط اگه میخاستیم به یه inheritedWidget وابسته بشیم مثلن theme.of رو صدا بزنیم این کار رو باید توی دو متد didChangeDependencies یا build انجام بدیم.
🔥همیچنین توی متد های بالا با استفاده از پروپرتی widget میتونیم به ویجت این State دسترسی داشته باشیم.

2⃣setState
هر بار که توی استیت setState صدا زده بشه متد build یکبار دیگه اجرا میشه.

3⃣update
هر بار که ویجت parent این stateful این ویجت رو با یه کانفیگ جدید اپدیت کنه متدهای زیر اجرا میشن :
didUpdateWidget (Widget oldWidget)
build

ویجت parent این ویجت اپدیت شده و child خودش که همین stateful ما هست رو با یه ویجت جدید از همین type اپدیت کرده (ویجت ها immutable هستن)
در نتیجه didUpdateWidget اجرا میشه که به state اطلاع بده که ویجتت اپدیت شده.
توی ورودی هم ویجت قبلی (stateful قبلی /oldWidet) رو بهش میده.
ویجت جدید هم از طریق پروپرتی widget قابل دسترسیه.

4⃣dependencies changed
اگه این ویجت به یه InheritedWidget وابسته شده باشه مثلن Theme.of رو با context خودش صدا زده باشه.
هر بار که اون InheritedWidget اپدیت بشه و این اپدیت شدن رو به درخت زیر خودش نوتیف بده متد های زیر به ترتیب اجرا میشن :
didChangeDependencies
build

5⃣deactivate
هر بار که ویجت parent این ویجت تصمیم بگیره این نقطه از درخت رو با یه ویجت جدید جایگزین کنه یا کلن این ویجت رو حذف کنه و دیگه این ویجت بدردش نخوره این ویجت رو غیر فعال میکنه و از درخت حذف میکنه و در این مرحله متد زیر اجرا میشه :
deactivate

🔥در این مرحله هنوز متد dispose اجرا نمیشه و فقط deactivate اجرا میشه.

6⃣activate
اگه به این ویجت یه GlobalKey داده باشیم بعد از deactivate شدن ممکنه یه جای دیگه از درخت (با یه parent) دیگه به یه ویجت از این نوع و همین GlobalKey نیاز داشته باشه.
در نتیجه این ویجت activate میشه و توی اون نقطه از درخت مورد استفاده قرار میگیره و parent اش نسبت به قبل تغییر میکنه.(این اتفاق یعنی پیوند زدن به یه جای دیگه درخت حتمن باید توی همین فریم اتفاق بیفته که ویجت deactivate شده)
درنتیجه متد زیر توی state اجرا میشه :
activate
بعد از این متد هم متد
build
اجرا میشه و اگه این ویجت توی اجرای قبلی به یه inheritedWidget وابسته شده باشه قبل build هم متد زیر اجرا میشه :
didChangeDependencies
پس یا :
activate
build
یا
activate
didChangeDependencies
build
بسته به شرایط اجرا میشن.

7⃣unmount
اگه بعد از deactivate شدن و تا پایان این فریم این ویجت به هیچ جای دیگه پیوند نخوره (GlobalKey نداشته باشه یا لازم نشه که پیوند بخوره) متد زیر اجرا میشه :
dispose
و state برای همیشه میره پی کارش و غیر قابل استفاده میشه.

❌پس بلافاصله بعد از متد deactivate متد dispose اجرا نمیشه.
یه فاصله ای بینشون هست.
فاصله خیلی کم و در حد میلی ثانیه هست ولی بین اجرای این دو فاصله هست.

🔥همیشه قبل از dispose متد deactivate اجرا میشه ولی الزامن همیشه بعد از deactivate متد dispose اجرا نمیشه.

پس :
🔥توی initState هم به context دسترسی داریم.

🔥وابسته شدن به InheritedWidget رو حتمن توی didChangeDependencies یا build انجام میدیم.

🔥توی متد های deactivate و dispose کارهایی که مربوط به context میشه رو انجام نمیدیم (چون widget tree اون موقع statble نیست و در واقع این ویجت parent خودش رو از دست داده و parent نداره)

🔥کارهایی مثل dispose کردن کنترلر ها و ... رو توی متد dispose انجام میدیم و نه deactivate چون بعد از deactivate ممکنه دوباره به درخت برگرده و reperent بشه.

🔥در صورتی که ویجت GlobalKey داشته باشه (فقط GlobalKey) ممکنه بعد از deactivate شدن reparent بشه و به یه parent دیگه پیوند بخوره و مجددن activate بشه(که در این صورت state حفظ میشه)

#state_life_cycle