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

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

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

add package :

flashy_tab_bar2: ^0.0.5

الامر بسيط جدا بعد تثبيت المكتبة السابقه لديك سوف تتمكن من استخدام 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'),
          ),
        ],
      ),