💊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

به نظر شما این شرکت با این آگهی که زده خودشون میدونن که دنبال چی هستن؟

دقیقن چه برنامه نویسی با چه خصوصیاتی رو میخان جذب کنن؟

اگه فهمیدید ممنون میشم به منم بگید 😅

در مورد این کوییز

بار اول اول اول 😅 که استیت ساخته میشه متد initState اجرا میشه و اونجا باید AnimationController رو بسازیم (new)

controller = AnimationController (
vsync: this,
duration: widget.duration
)

میبیند که برای duration از widget استفاده کردم چرا که duration رو به عنوان ورودی توی constructor ویجت قراره بگیریم.

حالا بعدن اگه این ویجت اپدیت شه
ینی چی؟

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

didUpdateWidget
build

که متد didUpdateWidget به استیت اطلاع میده که ای آقاااااا (یا خانم) ویجتت اپدیت شده

پس توی این متد میایم و چکار میکنیم؟
controller.duration = widget.duration

ینی duration کنترلر رو اپدیت میکینم

چرا؟
چون ویجتش اپدیت شده و ممکنه duration که توی ورودی ویجت دریافت میشه هم اپدیت شده باشه.

یه گفتگو از جادی میخوندم...

جوابش به این سوال به نظرم جالب بود و البته قابل تامل... 🤔🤔🤔

با کدام زبان‌های برنامه‌نویسی کار کرده‌اید و از میان آن‌ها به کدامیک بیش از بقیه علاقمند هستید و چرا؟

خودتون واردتر هستین. اصطلاحی در برنامه‌نویسی هست که می‌گه «اشتباه خیلی برنامه‌نویس‌های جوان اینه که برنامه نوشتن به یک زبون خاص رو با یاد گرفتن برنامه‌نویسی اشتباه می‌گیرن». من با کنار گذاشتن شکسته‌نفسی، می‌تونم بگم که برنامه‌نویسی رو بلدم و در نتیجه زبان دیگه خیلی مهم نیست.

البته لازمه بگم که من برنامه‌های بزرگ نمی‌نویسم و وقتی قرار باشه چیزی شبیه چاپ‌کنندهٔ سری فیبوناچی بنویسیم، دیگه فرق زیادی بین روبی، پرل و پایتون نیست چون عملاً از قابلیت‌های خاص هیچ کدوم از این زبان‌ها استفاده نمی‌کنم. برنامه‌های من اکثراً این شکلی هستن (:

توی vscode برای شخصی سازی تم و تنظیمات دیگه:
ctrl + shift + p
رو بگیرید
بعد دستور زیر رو بزنید :
Open settings(JSON)

یه فایل جیسون باز میکنه که میتونید تنظیمات مورد نظرتون از جمله تم رو تغییر بدید...

برای تم کد های زیر رو بهش اضافه کنید و رنگ ها رو مطابق میل خودتون تغییر بدید:

`"workbench.colorCustomizations": {
"activityBar.background": "#122b28",
"titleBar.activeBackground": "#02130e",
"titleBar.activeForeground": "#F6FBFB",
"list.inactiveSelectionBackground": "#757575",
"sideBar.background": "#212121",
"sideBar.foreground": "#E0E0E0",
"editor.background": "#000000",
"editor.foreground": "#BDBDBD",
"sideBarSectionHeader.background": "#00796B",
"sideBarSectionHeader.foreground": "#000000",
"activityBar.border": "#FFFFFF",
"statusBar.background": "#102F97",
"scrollbarSlider.activeBackground": "#FAFAFA",
"scrollbarSlider.hoverBackground": "#E0E0E0",
"badge.background": "#dbcbc6"
},`
————————————-
`"editor.tokenColorCustomizations": {
"numbers": "#FBC02D",
"comments": "#A1887F",
"functions": "#FDD835",
"variables": "#FFA000",
"types": "#0097A7",
"keywords": "#E91E63",
"strings": "#CDDC39",
},`

🔥Challenge
⚡️⚡️Future⚡️⚡️

هر چی راجب Future میدونید بگید 😅
که توی پست های بعدی بازش کنیم...

مشارکت کنید آقا مشارکت کنید
ساعت ۱ نصف شب کی مشارکت میکنه اخه 😂😂

#dart_challenge #challenge

💊Capsule
⚡️⚡️Future⚡️⚡️
1⃣

همتون تا حالا کلمه پوش نوتیفیکشن رو شنیدین..
وقتی که یه event رو از سمت سرور میفرستیم به سمت کلاینت، اصطلاحن میگیم که داریم اون event رو push میکنیم.

حالا چرا اینو گفتم؟
صبر کن و تا اخر بخون...

دو تا واژه زیر رو ببین
Pull کشیدن
Push هل دادن

شما وقتی به سرور یه رکوئست میزنی و یه چیزی ازش میگیری در واقع داری یه اطلاعاتی رو از سرور واکشی میکنی (pull)

وقتی که سرور توی یه فرایند real time برات یه event میفرسته داره یه چیزی رو به سمت تو push میکنه.

🔥حالا بیایم توی دنیای خودمون و دنیای فانکشن ها.

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

🔥پس به فانکشن های معمولی که هر موقع صداشون بزنی یه خروجی (همون لحظه) بهت میدن میتونیم بگیم که از نوع pull هستن.

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

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

🔥پس دو نوع فانکشن داریم :

✔️معمولی :
✅همون موقع کال شدن جواب میده
✅ما اختیار داریم که کی اطلاعات ازش بگیریم.
✅از نوع pull هست.

✔️نوع Future
✅همون موقع کال شدن جواب رو برنمیگردونه و در اینده یه جوابی رو برامون push میکنه
✅اختیار اینکه که کی جواب بیاد دیگه با ما نیست
✅از نوع push هست.

#capsule #dart