مدیریت اطلاعات و state ها در Flutter مهم ترین موضوع در یک اپلیکیشن می باشد چرا که تغییر اطلاعات در یک اپلیکیشن یک امر عادی و طبیعی است . به ندرت می توان اپلیکیشنی را یافت که نیازی به تغییر اطلاعات و state های خود نداشته باشد !!
در این مقاله قصد داریم بپردازیم به بررسی روش های مدیریت state ها در فلاتر اما پیش از اینکه ادامه بدیم باید یک تعریفی از state اشته باشیم تا بهتر درک کنیم که اصلا state چیست ؟
بهتر با یک مثال مفهوم را بررسی کنیم .
فرض کنید شما یک اپلیکیشنی دارید که شامل یک Button و Text هست که می خواهید وقتی روی Button کلیک شد ، متنText تغییر کند. همانند تصویر زیر :
برای این که این عمل اتفاق بیفتد ، باید ویدجت ها تغییر کنند و دوباره از نو ساخته شوند و اطلاعات جدید جایگزین شوند در مثال بالا متن Flutter بعد از کلیک شدن به Hello Flutter تغییر پیدا می کند یعنی ویدجت Text دوباره با اطلاعات جدید ساخته می شود .
در واقع به تغییر اطلاعات در رابط کاربری اپلیکیشن ها state می گوییم که رابط کاربری شما نمایشی از این state ها هستند.
بدون شک اپلیکیشنی را پیدا نمی کنید که اطلاعاتی را درون خود داشته باشد که نیاز نباشد تغییر کند پس نیازمند استفاده از state ها و نحوه مدیریت آن ها هستیم.
روش های زیادی برای مدیریت state ها وجود دارد که بسته به نوع پروژه و نحوه استفاده باید از هر کدام در جای مناسب خود استفاده کنیم در نتیجه نباید به یک روش پسنده کنید و باید روش های زیادی را یاد بگیرید و در جای مناسب از آن استفاده کنید .
اینکه از چه روشی استفاده کنید خیلی مهم هست زیرا مدیریت state ها در کارکرد اپلیکیشن تاثیر دارد.
برای مدیریت state ها در فلاتر شما می توانید از خود پکیج های درونی فلاتر استفاده کنید که شامل موارد زیر است :
غیر از این موارد می توانیم از پکیج های خارج از فلاتر هم استفاده کنیم که در مقالات بعدی به نحوه کار با آن ها می پردازیم . در مقاله قصد داریم که مورد های StatefulWidget و StatefulBuilder را بررسی کنیم.
یک نکته مهمی که وجود دارد این است که اگر نیازمند به تغییر اطلاعاتی نیستید و صرفا جنبه نمایشی دارد بهتر از تمامی ویدجت های خود را درون یک state قرار دهید و از ویدجت هایStateless استفاده کنید .
این روش اولین روش و ساده ترین روش برای تغییر state ها می باشد که برای استفاده از این حالت می توانید به سادگی با استفاده از دستور setState هر جا که نیاز داشتید داده ای را تغییر بدید ، بروز رسانی کنید.
مثال Button و Text را که برای درک مفهوم state ها زدیم را میخواهیم با این روش پیاده سازی کنیم.
در ابتدا فرض می کنیم که شما با ویدجت های Stateless و Stateful آشنایی دارید.
برای شروع باید یک ویدجت از نوع Stateful بسازیم و در متد Build آن کد های زیر را قرار بدهیم.
برای نمایش متن ، یک متغییر تعریف کردیم تحت عنوان label و از آن برای نمایش در ویدجت Text استفاده کردیم . زمانی که مقدار این متغییر تغییر کند مقدار Text هم تغییر پیدا می کند. برای انجام این کار باید از دستور setState در تابع کلیک دکمه ی خود استفاده کنیم . همانند زیر :
خروجی کار به این شکل است که اگر روی دکمه کلیک کنید مقدار Text تغییر خواهد کرد.
این روش یک عیبی دارد این است که روی عملکرد تاثیر می گذارد و با بزرگ شدن پروژه ممکن است دردسر ساز شود چرا که برای یک تغییر کوچک باید تمامی ویدجت های داخل متد Build مجددا بازسازی بشوند.
زمانی هست که شما تعداد بسیار زیادی ویدجت دارید و می خواهید فقط بخش کوچکی از یک ویدجت را تغییر بدید در این شرایط استفاده از Statefulwidget پیشنهاد نمی شود چرا که برای یک تغییر کوچک باید تمامی ویدجت ها مجددا بازسازی شوند. در این شرایط بهتر است از StatefulBuilder استفاده کنید .
این ویدجت به ما کمک می کند که تنها بخشی از اپلیکیشن خود را تغییر بدیم . برای استفاده از این ویدجت برای مثال بالا به این شکل عمل می کنیم.
ابتدا یک ویدجت Stateless تعریف می کنیم و در بخشی که میخواهیم اطلاعاتی تغییر کند از ویدجت StatefulBuilder استفاده می کنیم .
یکی از پارامتر های ورودی این ویدجت از جنس StateSetter هست که دقیقا همانند setState ویدجت های Stateful عمل می کند با این تفاوت که فقط در بلاک های ویدجت StatefulBuilder کار می کند.
کد زیر مثال Button و Text با استفاده از StatefulBuilder را نشان می دهد:
مدیریت state ها روش های متفاوتی را دارند که با توجه به شرایط متفاوت هستند . در مقالات آینده قطعا موارد بهتری از مدیریت state ها همانند : bloc , mobx , rxdart را بررسی خواهیم کرد.
منبع : وب سایت آموزشی سه گوش
