إنشاء bottom_bar مع animation بين التغيير للعناصر في تطبيقات Flutter
يوجد الكثير من المكتبات التي تقدم لنا امكانية تنفيذ bottomNavigationBar بشكل جميل وفي هذه المقاله نشارك معكم احد هذه المكتبات الرائعه والتي تحتوي على تصميم عصري وجذاب لتطبيقك يمكنك استخدام المكتبة وتنفيذ الانميشن على العنصر الذي يتم النقر عليه وهذا يحسن من شكل التطبيق العام حتى يجذب المستخدمين ويعطي منظر جميل للتطبيق ويمكنك القيام بهذه الطريقة بشكل بسيط عن طريق المكتبة التي نقدمها لكم في هذه المقالة كما هو واضح لكم في الصورة الخاصه بالمقاله بدون اي مشاكل ولكن عليك اتباع جميع الخطوات بشكل صحيح لضمان عدم حدوث مشاكل في تطبيقك .
تستخدم غالبية المؤسسات التطوير عبر الأنظمة الأساسية ، وهو أحد أكثر الأطر استخدامًا في الوقت الحاضر. هناك العديد من أنواع الإطارات المختلفة في السوق والتي لها نفس الوظيفة! Xamarin و PhoneGap و Ionic و Titanium و Monaca و Sencha و jQuery Mobile و React native و Flutter والعديد من الأمثلة الأخرى هي بعض الأمثلة الأكثر شهرة. ولكن ليست كل أدوات Cross Platform متساوية في الكفاءة.
لا يزال React native و Flutter يحتفظان بالمواقع المهيمنة ، لكن العديد من العناصر المذكورة أعلاه قد تلاشت. يدعمها Facebook و Google ، وهما من أكثر الأسماء شهرة في مجال التكنولوجيا. سنتحدث عن إطار عمل Google Flutter الذي يتم ذكره بشكل متكرر في هذه المقالة. هل لديك فضول بشأن تطوير تطبيق flutter؟ أو هل Flutter فعال في إنشاء التطبيقات؟
يُعد bottom_bar عنصرًا أساسيًا في تطبيقات Flutter، حيث يسمح للمستخدمين بالتنقل بين الصفحات المختلفة في التطبيق. ومع ذلك، يمكن أن يكون إنشاء bottom_bar باستخدام أدوات التصميم المضمنة في Flutter أمرًا صعبًا ومعقدًا.
توفر مكتبة bottom_bar_matu طريقة سهلة وبسيطة لإنشاء bottom_bar تفاعلي ومميز في Flutter. توفر المكتبة مجموعة متنوعة من الميزات التي تسمح لك بتخصيص bottom_bar الخاص بك حسب احتياجاتك.
تعريف المكتبة:
مكتبة bottom_bar_matu هي مكتبة مفتوحة المصدر لإنشاء bottom_bar في Flutter. توفر المكتبة مجموعة متنوعة من الميزات، بما في ذلك:
دعم متعدد الشاشات: تدعم المكتبة الشاشات ذات الأحجام المختلفة.
دعم الرسوم المتحركة: توفر المكتبة مجموعة متنوعة من الرسوم المتحركة لتغيير العنصر النشط في bottom_bar.
دعم التخصيص: توفر المكتبة مجموعة متنوعة من الخيارات التي تسمح لك بتخصيص bottom_bar الخاص بك حسب احتياجاتك.
مزايا المكتبة:
تتميز مكتبة bottom_bar_matu بالعديد من المزايا، منها:
سهولة الاستخدام: توفر المكتبة مجموعة من الأدوات والخصائص التي تجعل إنشاء bottom_bar أمرًا سهلاً وسريعًا.
التنوع: توفر المكتبة مجموعة متنوعة من الميزات التي تسمح لك بتخصيص bottom_bar الخاص بك حسب احتياجاتك.
التوافق: تتوافق المكتبة مع أحدث إصدارات Flutter.
add package
bottom_bar_matu: ^1.2.1
How to can use bottom_bar_matu
بعد تثبيت المكتبة السابقة بشكل صحيح بدون اي مشاكل سوف تتمكن من استخدامها في تطبيقك كما هو موضح بالكود التالي يمكنك نسخ الكود ووضع عدد العناصر التي ترغب بها مع الصفحة المراد عرضها لتطبيقكوبعدها تقوم بوضع الايقونات المراد عرضها في التطبيق مع الحجم وامكانية استخدام onSelect حتى تتمكن من الحصول على ال index الخاص بالعنصر الذي ترغب باستخدامه .
ui.dart
bottomNavigationBar: BottomBarBubble(
bubbleSize: 5,
selectedIndex: currentIndex,
// you can use BottomBarDoubleBullet or BottomBarBubble
items: [
BottomBarItem(
iconData: Iconsax.home,
// label: 'Home',
),
BottomBarItem(
iconData: Iconsax.call,
// label: 'Chat',
),
BottomBarItem(
iconData: Iconsax.notification,
// label: 'Notification',
),
BottomBarItem(
iconData: Iconsax.calendar,
// label: 'Calendar',
),
BottomBarItem(
iconData: Iconsax.settings,
// label: 'Setting',
),
],
onSelect: (index) {
// controller.jumpToPage(index);
setState(() {
currentIndex = index;
});
},
),
android sdk manager تحميل flutter developers applications create app android android studio mac
