⚡️⚡️اطلاعات عمومی⚡️⚡️
فلاتر از سه قسمت تشکیل شده
Framework
Engine
Embedder
اون قسمتی که ما برنامه نویس های فلاتر باهاش کار میکنیم Framework هست و کلن با زبان dart نوشته شده.
اما Engine با c++ نوشته شده.
قسمت Framework و Engine به وسیله یه کتابخونه به اسم dart:ui با هم ارتباط برقرار میکنن و این کتابخونه رابط بین این دو قسمت هست.
خود قسمت Framework همون طور که میبینید از لایه های مختلفی تشکیل شده.
هر لایه فقط میتونه به لایه زیری دسترسی داشته باشه.
مثلن لایه Rendering فقط به 4 لایه زیر خودش دسترسی داره.
فلاتر از سه قسمت تشکیل شده
Framework
Engine
Embedder
اون قسمتی که ما برنامه نویس های فلاتر باهاش کار میکنیم Framework هست و کلن با زبان dart نوشته شده.
اما Engine با c++ نوشته شده.
قسمت Framework و Engine به وسیله یه کتابخونه به اسم dart:ui با هم ارتباط برقرار میکنن و این کتابخونه رابط بین این دو قسمت هست.
خود قسمت Framework همون طور که میبینید از لایه های مختلفی تشکیل شده.
هر لایه فقط میتونه به لایه زیری دسترسی داشته باشه.
مثلن لایه Rendering فقط به 4 لایه زیر خودش دسترسی داره.
⚡️⚡️اطلاعات عمومی⚡️⚡️
یکم بیشتر راجب پست قبلی صحبت کنیم.
گفتیم که خود فریمورک از لایه های مختلف تشکیل شده.
همه ما بر حسب عادت و چیزی که از اول یاد گرفتیم بالای همه فایل های فلاتر پروژمون کتابخونه material رو import میکنیم.
حالا مثلن وقتی که میخوایم به یه کانتینر Decoration بدیم یا یه جاهایی میخوایم از Border استفاده کنیم این Border و Decoration توی قسمت painting تعریف شدن.
یا وقتی که یه جایی از Offset یا Size استفاده میکنیم یا میخوایم به یه تکست Font Weight بدیم این ها داخل dart:ui تعریف شدن.
یا وقتی که یه CustomPainter میسازیم و اونجا از Canvas یا paint یا ... استفاده میکنیم این ها هم توی dart:ui تعریف شدن.
و....
ولی ما با یه import کردن کتابخونه material از همه اینها استفاده میکنیم.
درواقع کتابخونه material موارد مورد نیازی که توی لایه های دیگه قرار دارن و یا توی dart:ui قرار داره رو import و export میکنه که بتونیم ازشون استفاده کنیم.
یکم بیشتر راجب پست قبلی صحبت کنیم.
گفتیم که خود فریمورک از لایه های مختلف تشکیل شده.
همه ما بر حسب عادت و چیزی که از اول یاد گرفتیم بالای همه فایل های فلاتر پروژمون کتابخونه material رو import میکنیم.
حالا مثلن وقتی که میخوایم به یه کانتینر Decoration بدیم یا یه جاهایی میخوایم از Border استفاده کنیم این Border و Decoration توی قسمت painting تعریف شدن.
یا وقتی که یه جایی از Offset یا Size استفاده میکنیم یا میخوایم به یه تکست Font Weight بدیم این ها داخل dart:ui تعریف شدن.
یا وقتی که یه CustomPainter میسازیم و اونجا از Canvas یا paint یا ... استفاده میکنیم این ها هم توی dart:ui تعریف شدن.
و....
ولی ما با یه import کردن کتابخونه material از همه اینها استفاده میکنیم.
درواقع کتابخونه material موارد مورد نیازی که توی لایه های دیگه قرار دارن و یا توی dart:ui قرار داره رو import و export میکنه که بتونیم ازشون استفاده کنیم.
از امشب بحث قبلیمون یعنی key ها رو ادامه میدیم و میریم سر وقت LocalKey ها.
خودتون رو اماده کنید که چند روز دیگه چند تا کوییز تو راهه. 😅😅😍
خودتون رو اماده کنید که چند روز دیگه چند تا کوییز تو راهه. 😅😅😍
⚡️⚡️Flutter Key⚡️⚡️
1️⃣2️⃣ LocalKey
کار LocalKey ها این هست که به ویجت مورد نظر یه برچسب بزنن و اون رو از بقیه متمایز کنن.
❓حالا این برچسب زدن به چه درد میخوره و کجا باید ازشون استفاده کنیم؟
✔️دقیقن فقط یه کاربرد خاص دارن و اگه اون کاربرد رو بشناسیم میتونیم به خوبی ازشون استفاده کنیم.
🔥قبل از پرداختن به کاربرد یه یاداوری داشته باشیم.
همون طور که توی شماتیک پست قبل دیدیم LocalKey خودش یه کلاس abstract هست و نمیتونیم ازش نمونه بسازیم و برای استفاده از اون از subclass هاش یعنی ValueKey , ObjectKey یا uniqueKey استفاده میکنیم.
نوع PageStorageKey هم یه کاربرد دیگه داره که بعدن راجبش صحبت میکینم.
پس الان صحبتمون راجب سه نوع ValueKey , ObjectKey و uniqueKey هست.
بریم سر اصل مطلب...
❓کی از این ها استفاده کنیم ؟
✔️✔️✔️اگه یه لیست از ویجت های Stateful هم نوع داشتیم که قرار بود جایگاهشون توی لیست تغییر کنه(stateful ها میتونن فرزند اصلی لیست یا فرزند با واسطه باشن)برای هر Stateful یه key اختصاصی از این نوع در نظر میگیریم.(اگه stateful فرزند اصلی لیست بود به اون key رو میدیم و اگه فرزند با واسطه بود به فرزند اصلی (جد stateful) key رو میدیم)
مثلن وقتی که یه ListView داریم یا یه Column یا هر ویجت دیگه ای که قراره یه لیست از ویجت ها رو توی خودش داشته باشه.
✔️حالا اگه این ویجت هایی که قراره توی لیست قرار بگیرن از نوع Stateful بودن.
✔️همچنین Type یکسانی داشتن (مثلن همه از جنس MyStatefulWidget بودن / ویجت اختصاصی که از StatefulWidget ارث بری کرده)
✔️و علاوه بر اون قرار بود توی build های مختلف(setState) جایگاهشون توی لیست تغییر کنه.
✅در این حالت برای هر کدوم یه key اختصاص میدیم.
این که چه اتفاقی میوفته و چرا باید key بدیم رو بعدن توضیح میدیم.
توی پست های بعدی هم مثال میزنیم که بهتر متوجه بشید.
#key
#flutter_key
#local_key
#global_key
1️⃣2️⃣ LocalKey
کار LocalKey ها این هست که به ویجت مورد نظر یه برچسب بزنن و اون رو از بقیه متمایز کنن.
❓حالا این برچسب زدن به چه درد میخوره و کجا باید ازشون استفاده کنیم؟
✔️دقیقن فقط یه کاربرد خاص دارن و اگه اون کاربرد رو بشناسیم میتونیم به خوبی ازشون استفاده کنیم.
🔥قبل از پرداختن به کاربرد یه یاداوری داشته باشیم.
همون طور که توی شماتیک پست قبل دیدیم LocalKey خودش یه کلاس abstract هست و نمیتونیم ازش نمونه بسازیم و برای استفاده از اون از subclass هاش یعنی ValueKey , ObjectKey یا uniqueKey استفاده میکنیم.
نوع PageStorageKey هم یه کاربرد دیگه داره که بعدن راجبش صحبت میکینم.
پس الان صحبتمون راجب سه نوع ValueKey , ObjectKey و uniqueKey هست.
بریم سر اصل مطلب...
❓کی از این ها استفاده کنیم ؟
✔️✔️✔️اگه یه لیست از ویجت های Stateful هم نوع داشتیم که قرار بود جایگاهشون توی لیست تغییر کنه(stateful ها میتونن فرزند اصلی لیست یا فرزند با واسطه باشن)برای هر Stateful یه key اختصاصی از این نوع در نظر میگیریم.(اگه stateful فرزند اصلی لیست بود به اون key رو میدیم و اگه فرزند با واسطه بود به فرزند اصلی (جد stateful) key رو میدیم)
مثلن وقتی که یه ListView داریم یا یه Column یا هر ویجت دیگه ای که قراره یه لیست از ویجت ها رو توی خودش داشته باشه.
✔️حالا اگه این ویجت هایی که قراره توی لیست قرار بگیرن از نوع Stateful بودن.
✔️همچنین Type یکسانی داشتن (مثلن همه از جنس MyStatefulWidget بودن / ویجت اختصاصی که از StatefulWidget ارث بری کرده)
✔️و علاوه بر اون قرار بود توی build های مختلف(setState) جایگاهشون توی لیست تغییر کنه.
✅در این حالت برای هر کدوم یه key اختصاص میدیم.
این که چه اتفاقی میوفته و چرا باید key بدیم رو بعدن توضیح میدیم.
توی پست های بعدی هم مثال میزنیم که بهتر متوجه بشید.
#key
#flutter_key
#local_key
#global_key
⚡️⚡️Flutter Key⚡️⚡️
1️⃣3️⃣ LocalKey
کد های بالا رو با دقت بخونید.
میبینید که یه Stateful به نام ColoredStatefulWidget داریم .
این ویجت قراره یه مربع 150 * 150 با یه رنگی که توی state (initState) به صورت random تعیین میشه نمایش بده و وسط مربع هم یه label نمایش میده که از widget میگیره.
توی HomePage هم یه Column داریم که قراره یه لیست دو تایی از این ویجت رو نمایش بده و وقتی که روی floating زدیم index ویجت ها رو تغییر بده .
✔️تصویر اول اولین خروجی و تصویر دوم خروجی بعد از زدن روی floating هست.
میبینید که label ها جابجا میشن ولی رنگ ها جابجا نمیشن.
این هم متد generateRandomColor که توی عکس ها مشخص نیست :
Color _generateRandomColor() {
var random = Random();
return Color.fromARGB(
255,
random.nextInt(255),
random.nextInt(255),
random.nextInt(255),
);
}
1️⃣3️⃣ LocalKey
کد های بالا رو با دقت بخونید.
میبینید که یه Stateful به نام ColoredStatefulWidget داریم .
این ویجت قراره یه مربع 150 * 150 با یه رنگی که توی state (initState) به صورت random تعیین میشه نمایش بده و وسط مربع هم یه label نمایش میده که از widget میگیره.
توی HomePage هم یه Column داریم که قراره یه لیست دو تایی از این ویجت رو نمایش بده و وقتی که روی floating زدیم index ویجت ها رو تغییر بده .
✔️تصویر اول اولین خروجی و تصویر دوم خروجی بعد از زدن روی floating هست.
میبینید که label ها جابجا میشن ولی رنگ ها جابجا نمیشن.
این هم متد generateRandomColor که توی عکس ها مشخص نیست :
Color _generateRandomColor() {
var random = Random();
return Color.fromARGB(
255,
random.nextInt(255),
random.nextInt(255),
random.nextInt(255),
);
}
⚡️⚡️Flutter Key⚡️⚡️
1️⃣4️⃣ LocalKey
حالا کلاس _HomePageState رو تغییر میدیم.
و موقع ساخت ویجت ها توی initState بهشون key میدیم.
همون طور که خروجی رو در دو حالت میبینید (اول کار و بعدن setState و تغییرindex ها) علاوه بر label ها رنگ ها هم جابجا مین.
1️⃣4️⃣ LocalKey
حالا کلاس _HomePageState رو تغییر میدیم.
و موقع ساخت ویجت ها توی initState بهشون key میدیم.
همون طور که خروجی رو در دو حالت میبینید (اول کار و بعدن setState و تغییرindex ها) علاوه بر label ها رنگ ها هم جابجا مین.
⚡️⚡️Flutter Key⚡️⚡️
1️⃣5️⃣ LocalKey
حالا توی مثال بعدی یه تغییر دیگه میدیم :
ویجت ها رو میگذاریم داخل یه ویجت Builder.
ویجت Builder یه Stateless هست.
در کمال ناباوری میبینیم که با هربار setState رنگهای جدید تولید میشن.(label ها جابجا میشن)
1️⃣5️⃣ LocalKey
حالا توی مثال بعدی یه تغییر دیگه میدیم :
ویجت ها رو میگذاریم داخل یه ویجت Builder.
ویجت Builder یه Stateless هست.
در کمال ناباوری میبینیم که با هربار setState رنگهای جدید تولید میشن.(label ها جابجا میشن)
⚡️⚡️Flutter Key⚡️⚡️
1️⃣6️⃣ LocalKey
✔️این مورد رو اینجوری حل میکنیم.
به جای اینکه key رو به stateful ها اختصاص بدیم به builder ها اختصاص میدیم.
🔥پس key رو باید به فرزند اصلی لیست (اینجا column) بدیم.
1️⃣6️⃣ LocalKey
✔️این مورد رو اینجوری حل میکنیم.
به جای اینکه key رو به stateful ها اختصاص بدیم به builder ها اختصاص میدیم.
🔥پس key رو باید به فرزند اصلی لیست (اینجا column) بدیم.
⚡️⚡️Flutter Key⚡️⚡️
1️⃣7️⃣ LocalKey
🔥پس هر وقت یه لیست از Stateful های هم نوع داشتیم که قرار بود order شون تغییر کنه.
توجه کنید
✔️حتمن stateful باشن (stateful ها یا فرزند اصلی لیست باشن یا مثل مثال بالا از نوادگان لیست باشن)
✔️هم نوع باشن.
در این حالت از LocalKey ها استفاده میکنیم.
🔥🔥و نکته مهم طبق مثال های بالا این هست که key رو باید به فرزندان اصلی لیست بدیم.
این مثال هایی که زدیم مشابهش توی گوگل و یوتیوب هست.
ولی مهم مفهومه و اینکه چرا این اتفاقات میوفته که ان شالله بعدن بهش میپردازیم.
❌فقط توی همین مورد از این key ها استفاده کنید و جای دیگه لازم نیست.
❌فقط و فقط جاهایی که یه ویجت قراره چند تا فرزند بگیره (children) و قراره این اتفاقات بیوفته.
باید فرزندها key بگیرن.
اون هم از نوع Local .
ویجت های تک فرزندی نیاز ندارن که فرزندشون LocalKey داشته باشه به هیچ وجه.
🔥مگر اینکه جایی خود فلاتر برای کار دیگه ای اجبار کنه که به فلان ویجت حتمن key بدید.
#key
#flutter_key
#local_key
#global_key
1️⃣7️⃣ LocalKey
🔥پس هر وقت یه لیست از Stateful های هم نوع داشتیم که قرار بود order شون تغییر کنه.
توجه کنید
✔️حتمن stateful باشن (stateful ها یا فرزند اصلی لیست باشن یا مثل مثال بالا از نوادگان لیست باشن)
✔️هم نوع باشن.
در این حالت از LocalKey ها استفاده میکنیم.
🔥🔥و نکته مهم طبق مثال های بالا این هست که key رو باید به فرزندان اصلی لیست بدیم.
این مثال هایی که زدیم مشابهش توی گوگل و یوتیوب هست.
ولی مهم مفهومه و اینکه چرا این اتفاقات میوفته که ان شالله بعدن بهش میپردازیم.
❌فقط توی همین مورد از این key ها استفاده کنید و جای دیگه لازم نیست.
❌فقط و فقط جاهایی که یه ویجت قراره چند تا فرزند بگیره (children) و قراره این اتفاقات بیوفته.
باید فرزندها key بگیرن.
اون هم از نوع Local .
ویجت های تک فرزندی نیاز ندارن که فرزندشون LocalKey داشته باشه به هیچ وجه.
🔥مگر اینکه جایی خود فلاتر برای کار دیگه ای اجبار کنه که به فلان ویجت حتمن key بدید.
#key
#flutter_key
#local_key
#global_key
#quiz #statefulwidget #state_life_cycle
آیا توی initState یه State class به BuildContext دسترسی داریم؟
آیا توی initState یه State class به BuildContext دسترسی داریم؟
Anonymous Quiz
53%
بله
47%
خیر
Quiz
کوییز(سطح آسان)
وقتی برای اولین بار یه State class ساخته میشه کدوم یک از موارد زیر قبل از همه اجرا میشه؟
کوییز(سطح آسان)
وقتی برای اولین بار یه State class ساخته میشه کدوم یک از موارد زیر قبل از همه اجرا میشه؟
Anonymous Quiz
50%
State constructor
42%
initState
8%
build