تغيير عناصر bottomNavigationBar عند الضغط عليها في Flutter

تغيير عناصر bottomNavigationBar عند الضغط عليها في Flutter

في هذا المقال سوف نكمل معكم في عر ض تصاميم ال bottomNavigationBar المختلفه وكما نعلم انها من اكثر العناصر التي نركز عليها في الموقع لانها تكون ظاهره بشكل كبير في تطبيقك ويكون المستخدم قادر مع التعامل معها ولهذا نقدم لكم الكثير من هذه العناصر والاشكال المتنوعه في موقعنا وفي درس اليوم ناتي لكم بشكل جديد من الاشكال التي يمكنكم استعمالها في تطبيقاتكم حتى تتمكنوا من عرض التصميم الخاص بالصفحه بدون ادنى اشكاليه تماما ومعظم الاشكال عباره عن مكتبات يمكنكم استعمالها في تطوير التطبيق الذي تعملون عليه .

سهولة الوصول إلى الأجهزة المحمولة كان انتشار الأجهزة المحمولة من بين أحدث التطورات الثورية. نظرًا لأن المزيد والمزيد من الأفراد يستخدمون هواتفهم الذكية والأجهزة اللوحية للوصول إلى الإنترنت ، فقد نتج عن ذلك زيادة في الشركات التي تنشئ تطبيقات الأجهزة المحمولة.

تعد سهولة الوصول إلى الأجهزة المحمولة إحدى المزايا العديدة لتطوير تطبيقات الويب ، ولكنها أيضًا واحدة من أهمها. يحتاج موقع الويب الخاص بك إلى العمل بشكل صحيح عبر جميع الأنظمة الأساسية لأن غالبية المستخدمين يمتلكون الآن الهواتف الذكية والأجهزة اللوحية. يمكن لجميع الأجهزة ، بما في ذلك الهواتف المحمولة والأجهزة اللوحية ، استخدام تطبيقات الويب. ضع في اعتبارك استخدام تطوير تطبيقات الويب لتسهيل الوصول إلى موقعك على أي جهاز.

add package :

flashy_tab_bar2: ^0.0.5

How to use flashy_tab_bar in Flutter

الامر بسيط جدا بعد تثبيت المكتبة السابقه لديك سوف تتمكن من استخدام FlashyTabBar وبها تقوم بعمل العناصر التي ترغب بها في items وايضا خاصية onItemSelected تساعدكم في معرفة المستخدم في اي index من العناصر وايضا selectedIndex تعرض ال index المخصص للصفحه ويمكنكم تحديد طول ال FlashyTabBar والانميشن الذي ترغب بعرضه .

bottomNavigationBar.dart

import 'package:flashy_tab_bar2/flashy_tab_bar2.dart';


bottomNavigationBar: FlashyTabBar(
        height: 55,
        animationCurve: Curves.easeInOut,
        selectedIndex: _selectedIndex,
        showElevation: true,
        onItemSelected: (index) => setState(() {
          _selectedIndex = index;
        }),
        items: [
          FlashyTabBarItem(
            icon: Icon(Icons.event),
            title: Text('Events'),
          ),
          FlashyTabBarItem(
            icon: Icon(Icons.search),
            title: Text('Search'),
          ),
          FlashyTabBarItem(
            icon: Icon(Icons.highlight),
            title: Text('Highlights'),
          ),
          FlashyTabBarItem(
            icon: Icon(Icons.settings),
            title: Text('Settings'),
          ),
        ],
      ),