💊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

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

۴ نوع داریم 😁

ولی اینجا ساده کردم گفتم دو نوع😅

💊Capsule
⚡️⚡️Future⚡️⚡️
2⃣

حالا از اون پرت و بلاهایی که توی پست قبلی گفتم 😂😂فاصله بگیریم و ببیینم که future در عمل چکار میکنه.

❓چطوری یک function رو future کنیم.

myFunc() async{}

این رو که همه میدونن، مگه نه؟
با گذاشتن کلمه کلیدی async باعث میشیم که فانکشن مورد نظر future بشه و مقداری که بر میگردونه از نوع future باشه.

ینی چی؟ 🤔

ینی قبلن میگفتیم...
String myFunc() {... }
هر موقع اینو کال میکردیم یه String بهمون میداد .

ولی الان میگیم...
Future<String> myFunc() async {.... }

و هر موقع اینو کال میکنیم یه
Future<String>
بهمون میده.

❓حالا این دقیقن ینی چه؟ 🤔
بهش فک کنید...
دقیق فک کنید.

توی پست های بعدی بازش میکنیم.
#dart #capsule

💊Capsule
⚡️⚡️Future⚡️⚡️
3⃣
گفتیم که با async کردن یه فانکشن نوع خروجی اون از جنس Future میشه.

❓خب Future چی هست؟ 🤔
A Future is an object that will be completed in the future with a value or an error.

گفتم یکم انگلیسی هم بخونید 😅
این جمله چی میگه؟ 🤔

میگه future یک object هست که در آینده با یک مقدار (value )یا یک ارور تکمیل میشه.

🔥ینی شما یک فانکشن async رو کال میکنی و این فانکشن به شما یه object از جنس Future برمیگردونه.
این Future object به خودی خودش و در اون لحظه هیچی نداره و میگه من در اینده مشخص میشه که چه چیزی دارم.

✔️حالا در اینده ممکنه با یه مقدار یا value تکمیل بشم و یه مقدار به تو بدم.

✔️یا ممکنه با یه ارور تکمیل بشم و یه ارور بهت بدم.

🔥پس تو باید هر دو حالت رو در نظر بگیری
🔥یه future دو حالت داره یا value یا error و هر دو رو باید در نظر بگیری.
🔥مقداری که future باهاش ممکنه تکمیل بشه رو با generic type اش مشخص میکنیم.
مثلن
Future<String>
یا با یه ولیو از جنس String تکمیل میشه یا با یه ارور.

🔥نکته مهم.
به جمله انگلیسی که نوشتم توجه کنید
نوشتم
will ....
کسایی که گرامر زبان میدونن (البته من هیچ ادعایی در زبان ندارم 😅🤦‍♂)
ولی با این ساختار یه جورایی دارم یه پیش بینی میکنم....
ینی پیش بینی میکنم که این object در اینده با یه ولیو یا ارور تکمیل میشه.

یعنی ممکنه اصن توی life time اپ تکمیل هم نشه و تا اخر پا در هوا بمونه 😅
#dart #capsule

💊Capsule
⚡️⚡️Future⚡️⚡️
4⃣
خب گفتم که وقتی که یه async function رو کال میکنیم یه object از جنس Future بر میگردونه که در اون لحظه هیچی نداره و در اینده با یه value یا یه error تکمیل میشه.

❓حالا برای هندل کردنش چکار کنیم؟

🔥دو راه داریم :
✅استفاده از low level APIs
✅استفاده از high level built in APIs

هر دو روش معادل هم هستن، که توی پست های آینده اون ها رو بررسی میکنیم.
#capsule #dart

💊Capsule
⚡️⚡️Future⚡️⚡️
5⃣
روش اول
✅Low level APIs

.. then()
.catchError()
.whenComplete()

وقتی یک object از جنس Future داریم میتونیم این متد ها رو به صورت زجزیره وار(chain) روش کال کنیم.

🔥هر کدوم از این متد ها یه کالبک میگیرن و در شرایط خاصی اون کالبک ها اجرا میشن :

✅then
then((T value) {
.....
})
یه کالبک به این شکل میگیره و هر وقت فیوچر با یه ولیو تکمیل شه اجرا میشه.

✅catchError
catchError((Object error, StackTrace st) {
...
})
یه کالبک به این شکل میگیره و هر وقت فیوچر با یه ارور تکمیل شه اجرا میشه.

🔥هم then و هم catchError یه ورودی دوم هم میگیرن که فعلن ازشون صرف نظر میکنیم.
✅whenComplete
whenComplete (() {
.....
})
یه کالبک به این شکل میگیره که وقتی که فیوچر تکمیل شه (چه با value چه با error ) اجرا میشه.

پس :
✔️if the future is completed with a value, the then callback will be executed.

✔️If the future is completed with an error, the catchError callback will be executed.

✔️when the future is completed (with a value or an error), the whenComplete callback will be executed.

#dart #capsule

💊Capsule
⚡️⚡️Future⚡️⚡️
6⃣
✅High level built in APIs

معادل مواردی که توی پست قبلی گفتم رو میتونیم به این شکل داشته باشیم :
try{
await future;
}catch (error) {
....
}finally{
....
}

✅بلوک try که داخلش await قرار میگیره معادل then هست .

✅بلوک catch معادل catchError هست .

✅بلوک finally معادل whenComplete هست.
#dart #capsule