💊Capsule
⚡️نکات طلایی scrollable ویجت ها⚡️
1⃣
چند تا نکته که موقع استفاده از ListView ، GridView , CustomScrollView یا ویجت های مشابه که scrollable هستن میتونه به بهبود پرفرمانس کمک کنه :
🔥اگه ویجت مورد نظرتون یعنی ListView یا... قراره کل صفحه رو پوشش بده (تاکید میکنم کل صفحه) در این صورت پارامتر clipBehavior رو واسش روی حالت none بگذارید :
🔥اگه قراره کل صفحه رو پوشش نده و یه قسمت خاصی از صفحه رو میگیره این پارامتر رو روی حالت زیر که پیش فرض خودش هم هست بگذارید :
🔥مقادیر دیگه برای این پارامتر مثل
رو فقط در صورت نیاز ضروری و اگه واقعن میدونستید که دارید چکار میکنید قرار بدید.
نکات بعدی در پست های بعدی 😍😍
#advanced #capsule #scrollable #list_view #clip #performance
⚡️نکات طلایی scrollable ویجت ها⚡️
1⃣
چند تا نکته که موقع استفاده از ListView ، GridView , CustomScrollView یا ویجت های مشابه که scrollable هستن میتونه به بهبود پرفرمانس کمک کنه :
🔥اگه ویجت مورد نظرتون یعنی ListView یا... قراره کل صفحه رو پوشش بده (تاکید میکنم کل صفحه) در این صورت پارامتر clipBehavior رو واسش روی حالت none بگذارید :
clipBehavior : Clip.none🔥اگه قراره کل صفحه رو پوشش نده و یه قسمت خاصی از صفحه رو میگیره این پارامتر رو روی حالت زیر که پیش فرض خودش هم هست بگذارید :
clipBehavior : Clip.hardEdge🔥مقادیر دیگه برای این پارامتر مثل
Clip.antiAliasرو فقط در صورت نیاز ضروری و اگه واقعن میدونستید که دارید چکار میکنید قرار بدید.
نکات بعدی در پست های بعدی 😍😍
#advanced #capsule #scrollable #list_view #clip #performance
👍1
💊Capsule
⚡️نکات طلایی scrollable ویجت ها⚡️
2⃣
این یکی قاتل پرفرمانسه
🔥شاید از این استفاده کنی و خیلی وقت ها تاثیری توی پرفرمانس هم نبینی ولی من بهت میگم که از این آپشن صرف نظر کن.
🔥وقتی که
یعنی خودش رو تا بزرگترین حد ممکن که parent اش بهش اجازه داده بسط میده.
🔥حالا بعضی وقت ها بعضی ویجت ها قیود مشخصی به child هاشون اعمال نمیکنن و اون ها رو محدود نمیکنن که سایز مشخصی داشته باشن (یا محدودشون نمیکنن که سایزشون توی یه بازه خاص باشه)
مثل column که child هاشو در راستای ارتفاع محدود نمیکنه و بهشون اجازه میده که از 0 تا infinity هر سایزی که دلش خواست بگیره و بعدن اگه مجموع سایز child هاش از سایز مجاز خودش بیشتر شده اون ها رو clip میکنه.
این که چرا مثلن column رفتارش اینجوریه و مث آدم از اول child ها رو محدود نمیکنه بماند. 😅
ولی خب توی همچنین شرایطی scrollable widget ما چون که قیود مشخصی (constraints) بهش اعمال نشده نمیدونه که باید چه سایزی بگیره.
🔥حالا توی همچین شرایطی این آپشن یعنی shrinkWrap به کار میاد و با
🔥ولی در این حالت اتفاقاتی میوفته که به شدت روی پرفرمانس تاثیر میذاره.
🔥پس همیشه یه راه دیگه برای حل این مشکل پیدا کنید و از پارامتر استفاده نکنید مگر اینکه انقد حرفه ای بودید که میدونستید که توی اون حالت خاص که دارید استفاده میکنید و با شرایطی که ویجت های parent دارن این مورد خیلی قضیه رو حاد نمیکنه. 😍
من میگم استفاده نکنید. اختیار با خودتون 😁
#capsule #advanced #list_view #performance #shrinkwrap
⚡️نکات طلایی 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
👍3
💊Capsule
⚡️نکات طلایی scrollable ویجت ها⚡️
3️⃣
Scrollbars
🔥وقتی یک scroll view استفاده میکنیم به صورت پیش فرض برای پلتفرم های دسکتاپ مثل windows و macos و linux اسکرول بار میذاره و برای Android و IOS و fuchsia اسکرول بار نمیذاره.
برای فعال یا غیر فعال کردن این قابلیت لینک زیر رو ببین :
فعال کردن (یا غیر فعال کردن) scrollbars در scrollView
#list_view #capsule #intermediate
⚡️نکات طلایی scrollable ویجت ها⚡️
3️⃣
Scrollbars
🔥وقتی یک scroll view استفاده میکنیم به صورت پیش فرض برای پلتفرم های دسکتاپ مثل windows و macos و linux اسکرول بار میذاره و برای Android و IOS و fuchsia اسکرول بار نمیذاره.
برای فعال یا غیر فعال کردن این قابلیت لینک زیر رو ببین :
فعال کردن (یا غیر فعال کردن) scrollbars در scrollView
#list_view #capsule #intermediate
GitHub
flutter_challenges/scrollbar.md at main · mohammadtaherri/flutter_challenges
Contribute to mohammadtaherri/flutter_challenges development by creating an account on GitHub.
❤2
💊Capsule
⚡️نکات طلایی scrollable ویجت ها⚡️
4⃣
🔥این پارامتر به صورت پیش فرض
🔥اگه قرار نیست هیچ کدوم از آیتم های scrollable widget مورد نظر کش بشه( در واقع اگه لازم نیست هیچ کدوم از آیتم ها بعد از اینکه با اسکرول کردن از حالت ویزیبل خارج شدن زنده بمونن و استیت شون حفظ بشه) بهتره این این پارامتر رو روی
🔥ساده تر بگم اگه هیچ کدوم از آیتم ها (یا نوادگانشون) رو با
#capsule #advanced #performance #list_view
⚡️نکات طلایی scrollable ویجت ها⚡️
4⃣
addAutomaticKeepAlives🔥این پارامتر به صورت پیش فرض
true هست. 🔥اگه قرار نیست هیچ کدوم از آیتم های scrollable widget مورد نظر کش بشه( در واقع اگه لازم نیست هیچ کدوم از آیتم ها بعد از اینکه با اسکرول کردن از حالت ویزیبل خارج شدن زنده بمونن و استیت شون حفظ بشه) بهتره این این پارامتر رو روی
false بگذارید. 🔥ساده تر بگم اگه هیچ کدوم از آیتم ها (یا نوادگانشون) رو با
AutomaticKeepAliveClientMixin میکس نکردین این پارامتر رو روی false بگذارید. #capsule #advanced #performance #list_view
❤3
💊Capsule
⚡️نکات طلایی scrollable ویجت ها⚡️
5⃣
این نوع Key یه subclass از ValueKey هست با یه کاربرد خاص.
قبلن در مورد انواع key ها و کاربردشون گفتم و این نوع رو به آینده موکول کردم.
الان وقتشه 😍😍
🔥اگه بخوایم ScrollView موقعیت اسکرول خودش رو حفظ کنه و وقتی که خراب شد و دوباره از اول ساخته شد برگرده به همون scroll position قبلی، از این نوع از key استفاده می کنیم.
🔥برای مثال وقتی توی یه TabbarView یا یه PageView یه دونه ListView داشته باشیم وقتی میریم page بعدی این page که شامل لیست هست کامل destroy میشه و بعد که برمیگردیم از اول ساخته میشه.
🔥برای اینکه موقعیت اسکرول خودش رو ذخیره کنه و بعد که از اول ساخته شد دوباره بره همون جا :
✔️به یکی از parent های ListView یا خودش یه key از این نوع میدیم.
✔️توی ScrollController هم باید پارامتر زیر رو
🔥از این نوع key کلن میتونیم برای ذخیره و بازیابی اطلاعات توی یک Route و توی frame های مختلف استفاده کنیم که یه کاربردش همین بود که گفتم.
#capsule #intermediate #local_key #list_view
⚡️نکات طلایی 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
❤5
💊Capsule
⚡️نکات طلایی scrollable ویجت ها⚡️
6⃣
ListView
🔥موقع ساخت ListView اگه :
✔️توی حالت vertical scrolling همه آیتم ها height برابر دارن
یا اگه :
✔️توی حالت horizontal scrolling همه آیتم ها width برابر دارن
به جای تعیین کردن اندازه توی خود آیتم ها، پارامتر
🔥در این حالت اگه ListView افقی باشه همه آیتم ها مجبورن width شون برابر این مقدار باشه.
و اگه ListView عمودی باشه height همه آیتم ها اجبارن همین مقدار میشه.
🔥این حالت نسبت به اینکه اندازه داخل خود آیتم ها تعیین بشه پرفرمانس بالاتری داره.
😍😍اینم هدیه پرفرمانسی من به شما 😍😍
#advanced #list_view #capsule #performance
⚡️نکات طلایی scrollable ویجت ها⚡️
6⃣
ListView
itemExtent🔥موقع ساخت ListView اگه :
✔️توی حالت vertical scrolling همه آیتم ها height برابر دارن
یا اگه :
✔️توی حالت horizontal scrolling همه آیتم ها width برابر دارن
به جای تعیین کردن اندازه توی خود آیتم ها، پارامتر
itemExtent توی ListView رو مقدار بدید. 🔥در این حالت اگه ListView افقی باشه همه آیتم ها مجبورن width شون برابر این مقدار باشه.
و اگه ListView عمودی باشه height همه آیتم ها اجبارن همین مقدار میشه.
🔥این حالت نسبت به اینکه اندازه داخل خود آیتم ها تعیین بشه پرفرمانس بالاتری داره.
😍😍اینم هدیه پرفرمانسی من به شما 😍😍
#advanced #list_view #capsule #performance
👍11
💊Capsule
⚡️نکات طلایی scrollable ویجت ها⚡️
7⃣
توی این پست میخوام یکم پیشگویی کنم و از آینده بگم 😂😂🤪
توی پست شماره ۵ در مورد PageStorageKey توضیح دادم و بهتون گفتم که از این نوع key میتونیم برای ذخیره موقعیت اسکرول یه scrollView استفاده کنیم.
🔥این روش توی ورژن های آینده فلاتر منسوخ میشه (دقیق نمیدونم چه ورژنی) ولی یکی از ToDo های فلاتر منسوخ کردن این روش هست.
🔥توی پست های بعدی در مورد روش جایگزین بهتون میگم که بعد از منسوخ شدن این روش هم خیالتون راحت باشه 😍
#capsule #list_view #advanced #local_key
⚡️نکات طلایی scrollable ویجت ها⚡️
7⃣
توی این پست میخوام یکم پیشگویی کنم و از آینده بگم 😂😂🤪
توی پست شماره ۵ در مورد PageStorageKey توضیح دادم و بهتون گفتم که از این نوع key میتونیم برای ذخیره موقعیت اسکرول یه scrollView استفاده کنیم.
🔥این روش توی ورژن های آینده فلاتر منسوخ میشه (دقیق نمیدونم چه ورژنی) ولی یکی از ToDo های فلاتر منسوخ کردن این روش هست.
🔥توی پست های بعدی در مورد روش جایگزین بهتون میگم که بعد از منسوخ شدن این روش هم خیالتون راحت باشه 😍
#capsule #list_view #advanced #local_key
👍2
💊Capsule
⚡️نکات طلایی scrollable ویجت ها⚡️
8⃣
🔥موقع اسکرول کردن یک اسکرول ویو وقتی که به انتهای لیست میرسیم اگه بیشتر اسکرول کنیم توی سیستم عامل های Android و fuchsia یک نمایی ایجاد میشه (شبیه یک نیم دایره شفاف ) .
این ویو توسط ویجت بالا ایجاد میشه.
برای غیر فعال کردن این حالت توی این سیستم عامل ها دو راه هست :
✅به scroll view پارامتر scrollBehavior بدیم :
✅برای اینکه همه اسکرول ویو ها رفتار مشابه داشته باشن این ویجت رو بالای اون sub tree بگذاریم :
🔥توی سیستم عامل های IOS و macos به صورت پیش فرض این حالت بوجود نمیاد و این سیستم عامل ها رفتار پیش فرضشون این هست که اجازه میدن لیست مورد نظر over scroll یا under scroll داشته باشه که توی پست های بعدی این خصوصیت رو میبینیم.
#inheritance #list_view #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
👍8