امــا State Management ، چیــزی کــه در ابتــدا آموزش ها در مــوردش صــحبت کــردیم و بــه صورت تئوریک مورد بررسی قرار گرفـت امـا حـالا وقتشـه بـه صـورت عملـی بررسـیش کنـیم و ببیـنم چطـور باید ازش استفاده کرد.
بریم سراغ پـروژه ، تـا اینجـا مـا یـک فایـل main و سـه تـا فایـل اسـکرین یـک و دو و سـه داریـم کـه بـه همن لینک شدن.
اولــین کــاری کــه بایــد ایــن جلســه انجــام بــدیم ایــن هســت کــه در پوشــه ی lib ، یــک پوشــه بــه نــام controllers بســـازیم و بعـــدش یـــک فایـــل داخلـــش بســـازیم کـــه مـــن اســـمش رو گذاشـــتم counter_controller.dart و شما میتونید یک اسم دیگه و دلخواه بذارید.
بعد از این کار میریم به فایل اسـکرین یـک. میخـوام یـک فلوتینـگ اکشـن بـاتن بـرای خـودم درسـت کـنم و این رو هم قبلا با هم کار کرده بودیم در دوره فلاتر مقدماتی.
میخوام مشابه کدهای دیفالت فلاتر کـه در ابتـدا برنامـه ای رو بـرای مـا تعبیـه کـرده کـه بـا یـک فلوتینـگ اکشن باتن به مقدار وسط صفحه اضـافه میکنـه ، مـن هـم همچـین چیـزی رو طراحـی کـنم ،
و حالا ما میخوایم کـه یـک 0 در وسـط برنامـه داشـته باشـیم ، پـس در چیلـدرن هـای موجـود در کـالم در
کانتینر قسمت بادی اسکفلد ، این عبارت رو تعریف میکنیم :
حالا برای اینکه هر بار زدیم روی فلوتینگ اکشـن بـاتن ، یـک واحـد بـه مقـدار صـفر اضـافه بشـه بایـد چـی کار کنیم؟
کاری که قبلا میکـردیم اسـتفاده از سـت اسـتیت بـود کـه میومـد کـل ویجـت رو ریبیلـد میکـرد و کلـی کـار دیگه ..!
اما حالا ما میخوایم بـه جـای اسـتفاده از سـت اسـتیت و گیـر افتـادن در مشـکلاتش از اسـتیت منیجمنـت اســتفاده کنــیم. الان وقتشــه بــریم ســراغ فایــل counter_controller.dart کــه اول ایــن جلســه در پوشــه ی controllers با هم ساختیمش.
در این فایل ما نیاز داریم که یک کلاس ایجاد کنیم که از GetxController ار بری کنه ؛
و حــالا متغیــر counter رو تعریــف میکنــیم کــه خیلــی هــم باهــاش کــار داریــم. و بعــد بــه یــک متــد هــم احتیاج داریم که بیاد بعد هر بار فراخونی به مقدار counter یک دونه اضافه کنه.
بعد ازانجام این عملیات برمیگردیم به فایل اسکرین یک…
حالا باید در اسکرین یک خودمـون یـک متغیـر بـه نـام counter تعریـف کنـیم و مقـدار گـت دات پـوت رو بهــش بــدیم و همــون طــور کــه در جلســات اول گفتــیم ، در بــار اول مــا بایــد از دســتور /Get.put()/ استفاده کنیم
• حالا کافیه به جـای مقـدار 0 در تکسـت موجـود در چیلـدرن کـالم کـانتینر بـادی اسـکفلد ، همـین کنترلـر
• کانتر رو بهش بدم و چون تکسـت از مـا مقـدار بـا دیتـا تایـپ اسـترینگ میخـواد بایـد یـک تبـدیل نـوع داده ای هم انجام بدیم :
• به این ترتیب تا اینجا پیش اومدیم امـا مشـکلی وجـود خواهـد داشـت! مگـه نـه!؟ اجـرا کنیـد برنامـه رو
• ببینید که آیا مشکل داره یا نه!؟
خب متوجه شدید که مشکل داره و بـه مقـدار تکسـت اضـافه نمیشـه! امـا چـرا!؟ مشـخص هسـت ، چـون مــا از اون متــدی کــه در کــلاس کــانترکنترلر تعر یــف کــردیم اصــلا اســتفاده نکــردیم!!! و فقــط داریــم مقــدار اولیه ای که به متغیر کانتر داده بودیم رو نمایش میدیم که مقدارش بود.
(یادآوری کلاس کانترکنترلر!!!)
حــالا بــرای رفــع مشــکلمون کافیــه در قســمت آن پــرس فلوتینــگ اکشــن بــاتن خودمــون ، بیــایم و متــد اینکرمنت رو فراخونی کنیم تـا بعـد از هـر بـار کلیـک بـه مقـدار کـانتر یـه دونـه اضـافه کنـه و بعـد کـانتر و مقدار جدیدش در قسمت تکست نمایش داده بشه :
و حالا اجرا میگیریم و … عـه! بـازم اتفـاقی نیفتـاد!؟ چـرا افتـاد! منتهـی مـا نمیتـونیم در لحظـه ببینـیم کـه مقــدار کــانتر چــه قــدر میشــه و بایــد هــر بــار ســیو کنــیم تــا مقــدار جدیــدش رو بــه مــا نشــون بــده! برای اینکه دیگـه نیـازی بـه سـیو نباشـه ، بایـد داخـل متـد اینکرمنـت در کـلاس کـانترکنترلر /update()/ رو تعریف کنیم تا ویجت ما رو هر بار آپدیت کنه و بعدش دوباره ران میگریم :
و حالا دیگه مطمئنید کـه بعـد از ران پـروژه و کلیـک رو فلوتینـگ اکشـن بـاتن درسـت کـار کنـه. امـا… بـاز هم کار نخواهد کرد!!!
مشکل کجاست!؟ ایـن بـار مشـکل مـا تکسـت هسـت ، تکسـت رو کـلا برداریـد و حـالا بـه جـاش از گـت بیلدر استفاده میکنیم. گـت بیلـدر از مـا یـک بیلـدر میخـواد و حتمـا بایـد بـراش مشـخص کنـیم کـه از چـه نوعی میخوایم و نوعی که ما میخواسـتیم هـم از نـوع کـانترکنترلر بـود کـه تعریـف کـردیم. سـپس میـریم و در بیلــدر ریتــرن میکنــیم ، چــی رو ریتــرن میکنــیم!؟ حـالا تکســت رو قــرار میــدیم و میگــیم کــه مــا ایــن تکست رو ریترن میکنیم با مقادیرش ؛
و این بار اگر ران کنـیم پـروژه رو ، همـه چیـز بـه درسـتی و بـدون مشـکل کـار میکـنن و برنامـه بـه سـرعت ریبیلد میشه ، بدون نیاز به ست استیت و نواقصی که داشت!
پس ما چی کار کردیم!؟ اولش یـه پوشـه کنترلـر در لایـب سـاختیم ، بعـد داخـل اون یـک فایـل کـانترکنترلر درست کـردیم و داخـل فایـل کلاسـی بـا همـین نـام تعریـف کـردیم ، ایـن کـلاس ار بـری میکـرد از گـت ایکس کنترلـر (ار بـری رو در دوره متوسـط آمـوزش میـدم) و داخلـش متغیـر کـانتری تعریـف کـردیم کـه مقدار اولیش صفر بود و بعد از اون هم یک متـد تعریـف کـردیم کـه هـر وقـت صـدا زده بشـه بایـد بیـاد و به مقدار متغیر کانتر یـک دونـه اضـافه کنـه و در انتهـا هـم آپـدیت کنـه امـا چـه رو آپـدیت کنـه!؟ همـون متنی که وسط صفحه بود ، داریم میگـیم کـه اون رو بعـد هـر بـار فراخـونی آپـدیت کـن تـا کـاربر در لحظـه تغیــرات رو ببینــه. ایــن آپــدیت بــه گــت بیلــدر ایــن پیــام رو میرســونه کــه بایــد آپــدیت بشــه و عملیــات ریبیلد بعـد از هـر بـار فراخـونی صـورت بگیـره کـه فراخـونی هـم زمـانی صـورت میگرفـت کـه کلیکـی روی دکمه صورت میگرفت و مقـدار کـانتر تغیـر میکـرد و در واقـع یکـی بهـش اضـافه میشـد. ایـن رونـدی کـه توضــیحش ایــن قــدر طــول کشــید و زیــاد شــد ، در آن واحــد انجــام میشــه و مــا اصــلا متوجــه ایــن همــه اتفاق در پشت صحنه برنامه نمیشیم!
اما از این گذشته اگر بخوایم ایـن مقـدار رو در صـفحه ی دوم هـم نمـایش بـدم چـی!؟ مـا گفتـیم فقـط بـار اول میتونیم از /Get.put()/ استفاده کنیم! برای بار دوم چی کار کنیم!؟
بریم به اسکرین دوم و داخلش کد زیر رو بنویسیم :
همون طـور کـه دیدیـد ایـن بـار /Get.find()/ رو بـه کـار گـرفتیم چـون میخواسـتیم بـرای بـار دوم از گـت استفاده کنیم. بعدش میریم و مقدار کانتر رو نمایش میدیم در وسط صفحه ی دوم :
(ما بـا اعـلام اینکـه متغیـر controller بایـد از نـوع CounterController باشـه بـه نـوعی کـاری کـردیم کـه ایـن متغیــر بــه مقــادیر داخـل کــلاس کــانترکنترلر مثــل کـانتر و اینکرمنــت و … دسترســی داشــته باشــه و از این دسترسی در قسمت تکست استفاده میکنیم طبق عکس زیر )
و حالا ما مقـدار کـانتر رو در صـفحه ی دوم هـم داریـم و اگـر بـه مقـدارش اضـافه کنـیم ، در صـفحه ی دوم هم مقدار نهایی رو خواهیم داشت!
این روش میشه در صفحه ی سوم ، چهارم ، پنجم و … هم تکرار بشه و جواب بده …
