/آموزش ساخت bottom navigation در فلاتر
آموزش برنامه نویسی flutter

آموزش ساخت bottom navigation در فلاتر

سلام در این مطلب قراره که باهم دیگه درباره ساحت bottom navigation صحبت کنیم.

اگر نمیدونید bottom navigation چی هست باید بگم که منویی که در قسمت پایین صفحه اپلیکیشن های میبینید مثل اینستاگرام bottom navigation نام داره و قراره نحوه پیاده سازیش تو فریموورک فلاتر و یاد بگیریم.

بعد از اینکه پروژه جدیدی ساختید لایه برنامه خودتون یا هر ویجت دیگه و ای به Scafold تغییر دهید این لایه ویژگی و امکانات زیادی تو زمینه متریال دیزاین در اختیار ما میذاره.

یکی از ویژگی های این لایه bottomNavigationBar هست.


 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('My Flutter App'),
     ),
     bottomNavigationBar: BottomNavigationBar(
       currentIndex: 0, 
       items: [
         BottomNavigationBarItem(
           icon: new Icon(Icons.home),
           title: new Text('Home'),
         ),
         BottomNavigationBarItem(
           icon: new Icon(Icons.mail),
           title: new Text('Messages'),
         ),
         BottomNavigationBarItem(
           icon: Icon(Icons.person),
           Title: Text('Profile')
         )
       ],
     ),
   );
 }
}

در کدهای بالا عبارت currentIndex مشخص می کند کدام خانه از منو بصورت پیش فرض فعال باشد.

همچنین با نوشتن عبارت items یک لیست در آن تعریف می کنیم که آیتم های ما هستند. هر آیتم شامل یک متن و آیکون می باشد.

آموزش ساخت bottom navigation
آموزش ساخت bottom navigation

برای پیاده سازی رویداد کلیک هم از ویژگی onTap استفاده می کنیم.


 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('My Flutter App'),
     ),
     body: _children[_currentIndex], // new
     bottomNavigationBar: BottomNavigationBar(
       onTap: onTabTapped, // new
       currentIndex: _currentIndex, // new
       items: [
         new BottomNavigationBarItem(
           icon: Icon(Icons.home),
           title: Text('Home'),
         ),
         new BottomNavigationBarItem(
           icon: Icon(Icons.mail),
           title: Text('Messages'),
         ),
         new BottomNavigationBarItem(
           icon: Icon(Icons.person),
           title: Text('Profile')
         )
       ],
     ),
   );
 }


در قسمت onTap یک متد به نام onTabTapped را صدا میزنیم, این متد و جلوتر خودمون پیاده سازی می کنیم.


 void onTabTapped(int index) {
   setState(() {
     _currentIndex = index;
   });
 }