قصد داریم در این آموزش با bottom navigation bar اشنا بشیم منویی رو که پایین صفحه قرار میگیره bottom navigation bar میگیم مثل همونی که توی اینستا گرام هم هست مشابه تصویر زیر
برای اینکه ازش استفاده کنیم باید حتما statefull باشه ویجت ما و بر روی scafold قرارش بدیم که با کلمه کلیدی bottomnavigationbar فراخانی میشه ➘
توی تصویر بالا میبینیم که از ما item میخواد و ما بهش میگیم bottomnavigationitem رو داشته باش که به صورت لیست هست ➘
خب حالا لیستی از bottomnavigation هامون رو میسازیم و به هر کدوم یه آیکن میدیم و یه Title میدیم ➘
کدهامون رو تا به اینجا اجرا میکنیم و قاعدتا باید منوی زیر ایجاد شده باشه طبق تصویر پایین ➘
در حالت پیشفرض روی home فعاله و روی آیتم ها وقتی کلیک میکنیم هیچ اتفاقی نمیوفته برای رفع این مشکل میاییم یه int تعریف میکنیم با نام Selectindex که به طور پیش فرض برابر هست با صفر
حالا currentindex رو برابر میکنیم با همین متغییر int که بالا تعریف کردیم طبق تصویر زیر
اگه پروژه رو اجرا کنیم و روی آیتم ها کلیک کنیم میبینیم که بازم اتفاقی نمیوفته ! چرا تغییر نمیکنه ؟ چون که باید بیاییم و index خودمون رو تغییر بدیم به همونی که روش کلیک شده برای این کار از متد ontap استفاده میکنیم این ontap برای ما کاری میکنه که وقتی روی هر کدوم از آیتم ها کلیک شد index اون رو بهمون برمیگردونه به عنوان مثال روی home کلیک بشه index 0 رو برمیگردونه روی busness میاد index 1 رو برمیگردونه و همینطور الی آخر
خب حالا یه تابع تعریف میکنیم با نام onitemtap و بهش میگم که یه int index دریافت میکنم و هر دعفه setstate بشه با متغییر selectindex که دارم دریافت میکنم
حالا اگه روی هر کدوم از آیتم ها کیک بشه میبینید که انتخاب میشه حالا میخوایم کاری کنیم که با توجه به کلیک شدن هر کدوم از آیتم ها یه متن به ما نمایش بده و برای هر کدوم از آیتم ها این متن متفاوت باشه برای اینکار یه list از نوع ویجت ایجاد میکنیم
توی تصویر بالا یه لیست ایجاد کردیم که شامل 3 تا Text هست بعد اومدیم توی body و center این selectindex و بهش پاس دادیم یعنی طبق مراحل قبل که index ما عوض میشد حالا با عوض شدن index متن مورد نظر وسط اسکرین نمایش داده میشه موفق سربلند باشد.
