⚡️⚡️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),
);
}
👍1
⚡️⚡️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
Quiz
کوییز(سطح متوسط)
در اولین اجرای یه State class کدوم متد بعد از initState و قبل از build اجرا میشه؟
کوییز(سطح متوسط)
در اولین اجرای یه State class کدوم متد بعد از initState و قبل از build اجرا میشه؟
Anonymous Quiz
29%
didUpdateWidget
47%
didChangeDependencies
24%
activate
Quiz
کوییز (سطح متوسط)
توی یه State class تصمیم دارم یه سری color تعریف و اون رو با استفاده از theme مقدار دهی کنم. توی کدوم یک از متد های زیر Theme.of رو صدا بزنم؟ ( دلیل انتخابت رو کامنت کن)
کوییز (سطح متوسط)
توی یه State class تصمیم دارم یه سری color تعریف و اون رو با استفاده از theme مقدار دهی کنم. توی کدوم یک از متد های زیر Theme.of رو صدا بزنم؟ ( دلیل انتخابت رو کامنت کن)
Anonymous Quiz
32%
initState
26%
didUpdateWidget
35%
didChangeDependencies
8%
activate
Quiz
کوییز (سطح متوسط)
ایا در یه State class همیشه قبل از متد dispose متد deactivate اجرا میشه؟
کوییز (سطح متوسط)
ایا در یه State class همیشه قبل از متد dispose متد deactivate اجرا میشه؟
Anonymous Quiz
41%
بله
59%
خیر