⚡️⚡️Flutter Key⚡️⚡️
4️⃣
⛔️توی پست قبلی گفتیم که Globalkey ها حافظه دارن و Context ویجت رو توی خودشون ذخیره میکنن و بعدن با استفاده از اون میتونیم به context یا خود Widget یا State اون (در صورتی که ویجتی که key بهش اختصاص داده شده Stateful باشه) دسترسی پیدا کنیم و در مقابل LocalKey ها صرفن یه برچسب هستن.
اینجا یه نکته در مورد اون چیزی که واقعن داره اتفاق میوفته میگیم (Under the hood) , اگه زیاد علاقه ای ندارید میتونید از این نکته صرف نظر کنید.
🔥در واقع خود GlobalKey کار ذخیره Context رو انجام نمیده و Context ویجت توی خود GlobalKey ذخیره نمیشه.
❓پس کجا ذخیره میشه ؟
یه map وجود داره به شکل زیر
Map<GlobalKey , BuildContext> ـregistery
مپی که key های اون از جنس GlobalKey هستن و Value های اون از جنس BuildContext (البته دقیقن از جنس BuildContext نیستن ولی برای سادگی ما اینجا از نوع BuildContext در نظر میگیریم)
این مپ توی یه کلاسی که Element tree رو مدیریت میکنه وجود داره و وقتی که یه Element جدید ساخته میشه و mount میشه اگه key اختصاص داده شده به Widget اون Element از نوع Globalkey باشه یه عنصر به مپ اضافه میکنه :
_registery[gKey] = context;
اینجا gkey رو GlobalKey اختصاص داده شده به ویجت در نظر بگیرید و context رو هم buildContext ویجت.
وقتی هم که Element به اخر عمرش میرسه و unmount میشه این مپ اون عنصر رو حذف میکنه:
_registery.remove(gKey);
حالا خود کلاس GlobalKey به این مپ دسترسی داره و میتونه BuildContext متناظر با خودش رو پیدا کنه.
⛔️این نکته پیشرفته بود و سعی کردم که خیلی سادش کنم که بهتر متوجه بشید و برخی نکات خیلی ریز رو حذف کردم ولی میتونید ازش صرف نظر کنید.
#key
#flutter_key
#local_key
#global_key
4️⃣
⛔️توی پست قبلی گفتیم که Globalkey ها حافظه دارن و Context ویجت رو توی خودشون ذخیره میکنن و بعدن با استفاده از اون میتونیم به context یا خود Widget یا State اون (در صورتی که ویجتی که key بهش اختصاص داده شده Stateful باشه) دسترسی پیدا کنیم و در مقابل LocalKey ها صرفن یه برچسب هستن.
اینجا یه نکته در مورد اون چیزی که واقعن داره اتفاق میوفته میگیم (Under the hood) , اگه زیاد علاقه ای ندارید میتونید از این نکته صرف نظر کنید.
🔥در واقع خود GlobalKey کار ذخیره Context رو انجام نمیده و Context ویجت توی خود GlobalKey ذخیره نمیشه.
❓پس کجا ذخیره میشه ؟
یه map وجود داره به شکل زیر
Map<GlobalKey , BuildContext> ـregistery
مپی که key های اون از جنس GlobalKey هستن و Value های اون از جنس BuildContext (البته دقیقن از جنس BuildContext نیستن ولی برای سادگی ما اینجا از نوع BuildContext در نظر میگیریم)
این مپ توی یه کلاسی که Element tree رو مدیریت میکنه وجود داره و وقتی که یه Element جدید ساخته میشه و mount میشه اگه key اختصاص داده شده به Widget اون Element از نوع Globalkey باشه یه عنصر به مپ اضافه میکنه :
_registery[gKey] = context;
اینجا gkey رو GlobalKey اختصاص داده شده به ویجت در نظر بگیرید و context رو هم buildContext ویجت.
وقتی هم که Element به اخر عمرش میرسه و unmount میشه این مپ اون عنصر رو حذف میکنه:
_registery.remove(gKey);
حالا خود کلاس GlobalKey به این مپ دسترسی داره و میتونه BuildContext متناظر با خودش رو پیدا کنه.
⛔️این نکته پیشرفته بود و سعی کردم که خیلی سادش کنم که بهتر متوجه بشید و برخی نکات خیلی ریز رو حذف کردم ولی میتونید ازش صرف نظر کنید.
#key
#flutter_key
#local_key
#global_key
⚡️⚡️Flutter Key⚡️⚡️
5⃣
تقسیم بندی انواع key ها در فلاتر
✔️اون هایی که رنگ مشکی دارن abstract هستن و بقیه کلاس های معمولی هستن .
✔️اون هایی که با <T> مشخص شدن Generic هستن.
#key #local_key
#flutter_key #flutter_key
#value_key #object_key #unique_key
5⃣
تقسیم بندی انواع key ها در فلاتر
✔️اون هایی که رنگ مشکی دارن abstract هستن و بقیه کلاس های معمولی هستن .
✔️اون هایی که با <T> مشخص شدن Generic هستن.
#key #local_key
#flutter_key #flutter_key
#value_key #object_key #unique_key
⚡️⚡️Flutter Key⚡️⚡️
6️⃣ GlobalKey
در مورد GlobalKey ها باید بگیم ک:
✔️جنریک هستن و موقع نمونه سازی میتونیم واسشون یه Generic type مشخص کنیم. این Generic type باید از جنس State باشه.
درواقع اگه بخوایم GlobalKey رو به یه StatefulWidget اختصاص بدیم میتونیم براش type مشخص کنیم.
var key = GlobalKey<ScaffoldState>() ;
ویجت Scaffold یه StatefulWidget هست.
اگرم بخوایم به یه StatelessWidget یا... بدیمش هم میتونیم type مشخص نکنیم.
✔️یه پروپرتی (getter) به اسم currentContext دارن. (nullable)
✔️یه پروپرتی (getter) به اسم currentWidget دارن. (nullable)
✔️و یه پروپرتی هم به اسم currentState که type اش برابر type ای هست که برای GlobalKey مشخص کردیم.
گه اگه به ویجتی غیر از Stateful اختصاص بدیم این مقدار null برمیگردونه.
#key
#flutter_key
#local_key
#global_key
6️⃣ GlobalKey
در مورد GlobalKey ها باید بگیم ک:
✔️جنریک هستن و موقع نمونه سازی میتونیم واسشون یه Generic type مشخص کنیم. این Generic type باید از جنس State باشه.
درواقع اگه بخوایم GlobalKey رو به یه StatefulWidget اختصاص بدیم میتونیم براش type مشخص کنیم.
var key = GlobalKey<ScaffoldState>() ;
ویجت Scaffold یه StatefulWidget هست.
اگرم بخوایم به یه StatelessWidget یا... بدیمش هم میتونیم type مشخص نکنیم.
✔️یه پروپرتی (getter) به اسم currentContext دارن. (nullable)
✔️یه پروپرتی (getter) به اسم currentWidget دارن. (nullable)
✔️و یه پروپرتی هم به اسم currentState که type اش برابر type ای هست که برای GlobalKey مشخص کردیم.
گه اگه به ویجتی غیر از Stateful اختصاص بدیم این مقدار null برمیگردونه.
#key
#flutter_key
#local_key
#global_key
⚡️⚡️Flutter Key⚡️⚡️
8️⃣ GlobalKey
مثال )
میدونیم که وقتی که از MaterialApp استفاده میکنیم یه دونه Navigator برامون میسازه و توی درخت قراره میده.
بعد از اون هر موقع که بخوایم از نویگیتور استفاده کنیم میگیم :
Navigator.of(context)
❓این کد دقیقن چکار مکینه ؟
با استفاده از context ای که بهش دادیم شروع میکنه به جستجو توی درخت (از parent ویجت شروع میکنه) و میره بالا تا یه نویگتور توی درخت پیدا کنه و بعد state اون رو برمیگیردونه , یعنی خروجی این متد یه NavigatorState هست.
🔥ویجت Navigator یه StatefulWidget هست و یه state به نام NavigatorState داره و متد Navigator.of(context) یه NavigatorState برمیگردونه.
حالا بعد از اون میگیم
Navigator.of(context).push...
که این متد push و بقیه متد هایی که استفاده میکنیم متد هایی هستن که داخل NavigatorState تعریف شدن.
🔥🔥حالا به جای این کار میتونیم موقع ساخت MaterialApp یه پارامتر به اسم navigatorKey بهش بدیم. و توی این پارامتر یه GlobalKey بدیم. در نتیجه MaterialApp این key رو میده به Navigator و بعد از اون میتونیم ازش برای پیدا کردن NavigatorState استفاده کنیم :
var myNavKey = GlobalKey<NavigatorState>();
......
return MaterialApp(
navigatorKey: myNavKey,
.....
);
حالا به جای :
Navigator.of(context)
میگیم :
myNavKey.currentState.push...
🔥پس بدون نیاز به context تونستیم که نویگیت رو انجام بدیم.
🔥این کاری هست که پکیج GetX انجام میده.
#key
#flutter_key
#local_key
#global_key
8️⃣ GlobalKey
مثال )
میدونیم که وقتی که از MaterialApp استفاده میکنیم یه دونه Navigator برامون میسازه و توی درخت قراره میده.
بعد از اون هر موقع که بخوایم از نویگیتور استفاده کنیم میگیم :
Navigator.of(context)
❓این کد دقیقن چکار مکینه ؟
با استفاده از context ای که بهش دادیم شروع میکنه به جستجو توی درخت (از parent ویجت شروع میکنه) و میره بالا تا یه نویگتور توی درخت پیدا کنه و بعد state اون رو برمیگیردونه , یعنی خروجی این متد یه NavigatorState هست.
🔥ویجت Navigator یه StatefulWidget هست و یه state به نام NavigatorState داره و متد Navigator.of(context) یه NavigatorState برمیگردونه.
حالا بعد از اون میگیم
Navigator.of(context).push...
که این متد push و بقیه متد هایی که استفاده میکنیم متد هایی هستن که داخل NavigatorState تعریف شدن.
🔥🔥حالا به جای این کار میتونیم موقع ساخت MaterialApp یه پارامتر به اسم navigatorKey بهش بدیم. و توی این پارامتر یه GlobalKey بدیم. در نتیجه MaterialApp این key رو میده به Navigator و بعد از اون میتونیم ازش برای پیدا کردن NavigatorState استفاده کنیم :
var myNavKey = GlobalKey<NavigatorState>();
......
return MaterialApp(
navigatorKey: myNavKey,
.....
);
حالا به جای :
Navigator.of(context)
میگیم :
myNavKey.currentState.push...
🔥پس بدون نیاز به context تونستیم که نویگیت رو انجام بدیم.
🔥این کاری هست که پکیج GetX انجام میده.
#key
#flutter_key
#local_key
#global_key
⚡️⚡️Flutter Key⚡️⚡️
9️⃣ GlobalKey
❓آیا کاری که توی پست قبلی کردیم توی پرفرمانس تاثیر داره؟؟
😍😍صدردرصد بلههههه.
🔥🔥وقتی که از
Navigator.of
استفاده میکنیم شروع میکنه توی درخت حرکت کردن و به دنبال Navigator گشتن.
هرچه ویجت Navigator به ویجتی که داخلش این متد رو call کردیم نزدیکتر باشه این جستجو سریع تر انجام میشه و هر چقدر دورتر باشه زمان بیشتری میبره.
ولی وقتی از GlobalKey استفاده میکنیم دیگه نیازی به جستجو نیست و همون موقع در لحظه با استفاده از key میتونیم به NavigatorSate برسیم.
#key
#flutter_key
#local_key
#global_key
9️⃣ GlobalKey
❓آیا کاری که توی پست قبلی کردیم توی پرفرمانس تاثیر داره؟؟
😍😍صدردرصد بلههههه.
🔥🔥وقتی که از
Navigator.of
استفاده میکنیم شروع میکنه توی درخت حرکت کردن و به دنبال Navigator گشتن.
هرچه ویجت Navigator به ویجتی که داخلش این متد رو call کردیم نزدیکتر باشه این جستجو سریع تر انجام میشه و هر چقدر دورتر باشه زمان بیشتری میبره.
ولی وقتی از GlobalKey استفاده میکنیم دیگه نیازی به جستجو نیست و همون موقع در لحظه با استفاده از key میتونیم به NavigatorSate برسیم.
#key
#flutter_key
#local_key
#global_key
⚡️⚡️Flutter Key⚡️⚡️
1️⃣0️⃣ GlobalKey
🔥یه نکته مهم دیگه در مورد GlobalKey ها اینکه همیشه توی پروژتون یه کلاس برای مدیریت GlobalKey ها داشته باشید.
مثلن یه فولدر به اسم common داشته باشید و اونجا یه فایل به اسم keys.dart درست کنید و کلاس زیر رو داخلش بگذارید :
class Keys{
static final navigatorKey = GlobalKey<NavigatorState>();
}
هر GlobalKey که قراره توی پروژه استفاده بشه رو داخل این کلاس تعریف کنید و static کنید و هر جایی خواستید ازش استفاده کنید.
❌اگه خواستید یه GlobalKey خارج این کلاس تعریف کنید .
مثلن یه GlobalKey توی یه State تعریف کنید اصلن و به هیچ وجه اون رو توی متد build نسازید :
Widget build(BuildContext context){
final gKey = GlobalKey();
return Scaffold(key: gkey);
}
اصلن این کار رو نکنید , چون با هر بار rebuild شدن یه GlobalKey جدید و کاملن متفاوت از قبلی میسازه.
✅توی چنین مواردی GlobalKey رو قبل متد build و توی initState بهش مقدار بدید.
#key
#flutter_key
#local_key
#global_key
1️⃣0️⃣ GlobalKey
🔥یه نکته مهم دیگه در مورد GlobalKey ها اینکه همیشه توی پروژتون یه کلاس برای مدیریت GlobalKey ها داشته باشید.
مثلن یه فولدر به اسم common داشته باشید و اونجا یه فایل به اسم keys.dart درست کنید و کلاس زیر رو داخلش بگذارید :
class Keys{
static final navigatorKey = GlobalKey<NavigatorState>();
}
هر GlobalKey که قراره توی پروژه استفاده بشه رو داخل این کلاس تعریف کنید و static کنید و هر جایی خواستید ازش استفاده کنید.
❌اگه خواستید یه GlobalKey خارج این کلاس تعریف کنید .
مثلن یه GlobalKey توی یه State تعریف کنید اصلن و به هیچ وجه اون رو توی متد build نسازید :
Widget build(BuildContext context){
final gKey = GlobalKey();
return Scaffold(key: gkey);
}
اصلن این کار رو نکنید , چون با هر بار rebuild شدن یه GlobalKey جدید و کاملن متفاوت از قبلی میسازه.
✅توی چنین مواردی GlobalKey رو قبل متد build و توی initState بهش مقدار بدید.
#key
#flutter_key
#local_key
#global_key
⚡️⚡️Flutter Key⚡️⚡️
1️⃣1️⃣ GlobalKey
تا اینجا در مورد یکی از کاربرد های Globalkey به طور کامل صحبت کردیم و اون هم اختصاص GlobalKey به یه ویجت و دسترسی به context , state و خود widget در مکان های دیگه درخت بود.
ولی GlobalKey ها یه کاربرد مهم دیگه هم دارن.
🔥🔥با استفاده از GlobalKey میتونیم یه ویجت رو توی درخت جابجا کنیم (ویجت parent خودش رو تغییر بده) بدون اینکه اون ویجت state خودش رو از دست بده.
در مورد این کاربرد بعدن صحبت میکنیم.
#key
#flutter_key
#local_key
#global_key
1️⃣1️⃣ GlobalKey
تا اینجا در مورد یکی از کاربرد های Globalkey به طور کامل صحبت کردیم و اون هم اختصاص GlobalKey به یه ویجت و دسترسی به context , state و خود widget در مکان های دیگه درخت بود.
ولی GlobalKey ها یه کاربرد مهم دیگه هم دارن.
🔥🔥با استفاده از GlobalKey میتونیم یه ویجت رو توی درخت جابجا کنیم (ویجت parent خودش رو تغییر بده) بدون اینکه اون ویجت state خودش رو از دست بده.
در مورد این کاربرد بعدن صحبت میکنیم.
#key
#flutter_key
#local_key
#global_key
⚡️⚡️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️⃣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
🔥Challenge
دوستان به نظرتون استفاده از stateful باعث میشه پرفرمانس اپ پایین بیاد یا استفاده از stateless و تبدیل stateful ها به stateless پرفرمانس رو بالا میبره؟
#challenge #flutter_challenge
دوستان به نظرتون استفاده از stateful باعث میشه پرفرمانس اپ پایین بیاد یا استفاده از stateless و تبدیل stateful ها به stateless پرفرمانس رو بالا میبره؟
#challenge #flutter_challenge
🔥Challenge
▶️سناریو :
یه قسمتی از اپمون قراره که جستجو توی محصولات یا... رو پیاده کنیم.
🔴یه Search Box لازم داریم.
🔴کاربر شروع میکنه به نوشتن و همزمان باید جستجو انجام بشه...
❓چالش :
فرض کنید ازمون خواسته شده که هر وقت کاربر شروع کرد به نوشتن و دستشو برداشت و ۲ ثانیه طول کشید (ینی بین تایپ کردن کاربر ۲ ثانیه وقفه ایجاد شد) بلافاصله جستجو انجام شه...
🟢یعنی اگه کاربر بدون وقفه (۲ثانیه ای) به تایپ کردن ادامه داد هیچ جستجویی انجام نمیشه.
توضیح بدید که این مساله رو، به خصوص وقفه ۲ ثانیه رو چطوری هندل میکنید؟
⛔️ساختار معماری در این چالش مدنظر نظر نیست.
✅فقط نحوه هندل کردن این موضوع به خصوص وقفه مهم هست.
✅در صورت لزوم میتونید کد هم ارائه کنید.
#challenge #flutter_challenge #dart_challenge
#intermediate
▶️سناریو :
یه قسمتی از اپمون قراره که جستجو توی محصولات یا... رو پیاده کنیم.
🔴یه Search Box لازم داریم.
🔴کاربر شروع میکنه به نوشتن و همزمان باید جستجو انجام بشه...
❓چالش :
فرض کنید ازمون خواسته شده که هر وقت کاربر شروع کرد به نوشتن و دستشو برداشت و ۲ ثانیه طول کشید (ینی بین تایپ کردن کاربر ۲ ثانیه وقفه ایجاد شد) بلافاصله جستجو انجام شه...
🟢یعنی اگه کاربر بدون وقفه (۲ثانیه ای) به تایپ کردن ادامه داد هیچ جستجویی انجام نمیشه.
توضیح بدید که این مساله رو، به خصوص وقفه ۲ ثانیه رو چطوری هندل میکنید؟
⛔️ساختار معماری در این چالش مدنظر نظر نیست.
✅فقط نحوه هندل کردن این موضوع به خصوص وقفه مهم هست.
✅در صورت لزوم میتونید کد هم ارائه کنید.
#challenge #flutter_challenge #dart_challenge
#intermediate
🔥Challenge
🔴قسمت های مختلف اپلیکیشن به تم نیاز داریم و هر جایی به تم نیاز داشته باشیم میگیم
Theme.of(context)
🟢خب کد بالا نزدیکترین ویجت Theme رو از درخت در اختیارمون قرار میده.
🟢اگه به غیر از MaterialApp خودمون جای دیگه Theme رو توی درخت قرار نداده باشیم، احتمالا همون ویجت Theme که توسط MaterialApp توی درخت قرار داده شده رو بهمون میده.
❓چالش :
1⃣ایا این کار درستیه که همه جا از این قاعده استفاده کنیم؟
2⃣آیا این کار بهینه هست؟
#flutter_challenge #challenge
🔴قسمت های مختلف اپلیکیشن به تم نیاز داریم و هر جایی به تم نیاز داشته باشیم میگیم
Theme.of(context)
🟢خب کد بالا نزدیکترین ویجت Theme رو از درخت در اختیارمون قرار میده.
🟢اگه به غیر از MaterialApp خودمون جای دیگه Theme رو توی درخت قرار نداده باشیم، احتمالا همون ویجت Theme که توسط MaterialApp توی درخت قرار داده شده رو بهمون میده.
❓چالش :
1⃣ایا این کار درستیه که همه جا از این قاعده استفاده کنیم؟
2⃣آیا این کار بهینه هست؟
#flutter_challenge #challenge
🔥Challenge
▶️سناریو :
میخوایم یک فرایند Sign up و Sign in شبیه به تلگرام رو انجام بدیم.
1⃣Sign up
وقتی که برای اولین بار وارد اپ میشیم و از قبل اکانت نداریم.
✔️شماره موبایل دریافت میشه و کد تایید فرستاده میشه.
✔️کد تایید اعتبار سنجی میشه.
✔️اسم و فامیل دریافت میشه و وارد اپ میشیم.
2⃣Sign in
وقتی که از قبل اکانت داریم.
✔️شماره موبایل دریافت میشه و کد تایید ارسال میشه.
✔️کد تایید اعتبار سنجی میشه و وارد اپ میشیم.
❓چالش :
ℹ️از دید کاربر معمولی احتمالا فرایند sign up و sign in به صورت کاملا مستقل پیاده سازی شده، توضیح بدید که ایا این فرایند ها مستقل هستند یا اینکه قسمتی از این دو فرایند به صورت مشترک پیاده سازی میشوند.
2⃣این فرایند ها رو تحلیل کنید و بگید چه api هایی و با چه جزییاتی (ساختار api) برای پیاده سازی این فرایندها نیاز دارید.
#challenge #flutter_challenge #intermediate
▶️سناریو :
میخوایم یک فرایند Sign up و Sign in شبیه به تلگرام رو انجام بدیم.
1⃣Sign up
وقتی که برای اولین بار وارد اپ میشیم و از قبل اکانت نداریم.
✔️شماره موبایل دریافت میشه و کد تایید فرستاده میشه.
✔️کد تایید اعتبار سنجی میشه.
✔️اسم و فامیل دریافت میشه و وارد اپ میشیم.
2⃣Sign in
وقتی که از قبل اکانت داریم.
✔️شماره موبایل دریافت میشه و کد تایید ارسال میشه.
✔️کد تایید اعتبار سنجی میشه و وارد اپ میشیم.
❓چالش :
ℹ️از دید کاربر معمولی احتمالا فرایند sign up و sign in به صورت کاملا مستقل پیاده سازی شده، توضیح بدید که ایا این فرایند ها مستقل هستند یا اینکه قسمتی از این دو فرایند به صورت مشترک پیاده سازی میشوند.
2⃣این فرایند ها رو تحلیل کنید و بگید چه api هایی و با چه جزییاتی (ساختار api) برای پیاده سازی این فرایندها نیاز دارید.
#challenge #flutter_challenge #intermediate
🔥Challenge
❓چالش :
اگه بخوایم معادل سازی کنیم معادل Activity که توی اندروید نیتیو داریم، توی فلاتر چیه؟ 🤔
#challenge
#flutter_challenge
❓چالش :
اگه بخوایم معادل سازی کنیم معادل Activity که توی اندروید نیتیو داریم، توی فلاتر چیه؟ 🤔
#challenge
#flutter_challenge
This media is not supported in your browser
VIEW IN TELEGRAM
🔥Challenge
❓چالش :
بنظرتون بهترین راه برای پیاده سازی قسمت کامنت ها شبیه اپ یوتیوب چیه؟ 🤔
✅از پایین بیاد بالا .
✅تا یه جای مشخصی هم بالا بیاد
✅فقط با زدن ضربدر بسته بشه و بره پایین.
❌حرکت دست روش تاثیری نداشته باشه.
#challenge
#flutter_challenge
❓چالش :
بنظرتون بهترین راه برای پیاده سازی قسمت کامنت ها شبیه اپ یوتیوب چیه؟ 🤔
✅از پایین بیاد بالا .
✅تا یه جای مشخصی هم بالا بیاد
✅فقط با زدن ضربدر بسته بشه و بره پایین.
❌حرکت دست روش تاثیری نداشته باشه.
#challenge
#flutter_challenge
🔥Challenge
❓چالش :
میخوام در مورد StatefulWidget صحبت کنم.
🟢همون طور که میدونیم ویجت ها توی فلاتر immutable هستن و StatefulWidget یه State داره میتونه mutable باشه و به این ترتیب با استفاده از اون میشه درخت ویجت رو بر اساس فیلد هایی که توی State تغییر میکنن اپدیت کرد.
🟢توی StatelessWidget یه متد build داریم که وظیفش ساختن اون قسمت از درخت هست.
🟢توی StatefulWidget ولی این متد build رو نداریم و به جاش این متد انتقال داده شده به کلاس State.
🤔توی داک فلاتر یه بحثی رو مطرح کرده و گفته اولش به این فکر میکردیم که توی StatefulWidget هم متد build رو بذاریم توی خود کلاس ویجت و نه کلاس State ولی...
❌حالا فرض کنید که متد build به جای کلاس State توی خود کلاس StatefulWidget بود (شبیه StatelessWidget) و البته کلاس State رو هم داشتیم و این کلاس بقیه متد های مربوط به life cycle مثل initState و... رو داشت و امکان rebuild کردن رو هم با setState داشت.
🟢دقیقا همین چیزی که الان هست فقط با انتقال متد build به کلاس StatefulWidget
❓حالا شما بگید اگه این اتفاق میوفتاد چه خوبی ها و یا چه بدی هایی داشت.؟
#challenge
#flutter_challenge
❓چالش :
میخوام در مورد StatefulWidget صحبت کنم.
🟢همون طور که میدونیم ویجت ها توی فلاتر immutable هستن و StatefulWidget یه State داره میتونه mutable باشه و به این ترتیب با استفاده از اون میشه درخت ویجت رو بر اساس فیلد هایی که توی State تغییر میکنن اپدیت کرد.
🟢توی StatelessWidget یه متد build داریم که وظیفش ساختن اون قسمت از درخت هست.
🟢توی StatefulWidget ولی این متد build رو نداریم و به جاش این متد انتقال داده شده به کلاس State.
🤔توی داک فلاتر یه بحثی رو مطرح کرده و گفته اولش به این فکر میکردیم که توی StatefulWidget هم متد build رو بذاریم توی خود کلاس ویجت و نه کلاس State ولی...
❌حالا فرض کنید که متد build به جای کلاس State توی خود کلاس StatefulWidget بود (شبیه StatelessWidget) و البته کلاس State رو هم داشتیم و این کلاس بقیه متد های مربوط به life cycle مثل initState و... رو داشت و امکان rebuild کردن رو هم با setState داشت.
🟢دقیقا همین چیزی که الان هست فقط با انتقال متد build به کلاس StatefulWidget
❓حالا شما بگید اگه این اتفاق میوفتاد چه خوبی ها و یا چه بدی هایی داشت.؟
#challenge
#flutter_challenge
Forwarded from Persian Flutter (PayamZ)
🚀 مقاله جدیدم رو که در مورد Flutter Form Validation هست رو منتشر کردم! 📝 روش هایی که موجود هستند قابلیت reusability رو ندارن بنابر این من یک راهکار جدید پیشنهاد میدم که شما میتونید اون رو تو پروژه های مختلفتون استافده کنید.✨
مقاله رو بررسی کنید و یه دستی به سر و روی فرم هاتون بکشید😁
https://medium.com/@payam-zahedi/flutter-form-validation-beyond-basics-76443e768624
#Flutter #dart 💻
مقاله رو بررسی کنید و یه دستی به سر و روی فرم هاتون بکشید😁
https://medium.com/@payam-zahedi/flutter-form-validation-beyond-basics-76443e768624
#Flutter #dart 💻
Medium
Flutter Form Validation - Beyond Basics
Form validation in Flutter can be like navigating a maze. The methods we typically use may get the job done, but they often lack…