أجمل تجربة لاضافه Flutter Animated Bottom Navigation في مشروعك
إذا كنت تبحث عن طريقة تجعل شريط التنقل السفلي في تطبيق Flutter أكثر احترافية وجمالًا، فإن مكتبة flutter_animated_navkit تقدم لك تجربة تنقل متحركة ومبهرة تضيف لمسة عصرية إلى تطبيقك بسهولة كبيرة.
تتميز هذه المكتبة بتصميم فريد يتضمن ثقبًا سداسيًا في منتصف شريط التنقل يمكن التفاعل معه لفتح قائمة موسعة تحتوي على مجموعة من الأوامر أو الإجراءات الإضافية.
في هذا الدليل سنشرح كيفية استخدام مكتبة flutter_animated_navkit خطوة بخطوة لإنشاء شريط تنقل متحرك واحترافي داخل تطبيق Flutter.
ما هي مكتبة flutter_animated_navkit؟
تتميز المكتبة بوجود زر مركزي سداسي الشكل يمكن الضغط عليه لفتح قائمة إضافية من الأيقونات مع تأثيرات حركة سلسة وجذابة.
وتناسب هذه المكتبة التطبيقات الحديثة التي تحتاج إلى تجربة مستخدم مميزة في شريط التنقل السفلي.
أهم ميزات المكتبة
تقدم انتقالات ناعمة للأيقونات مع تأثيرات تفاعلية عند التبديل بين الصفحات.
زر مركزي سداسي متحرك
يحتوي الشريط على زر سداسي في المنتصف مع تأثير دوران جذاب عند الضغط عليه.
قائمة قابلة للتوسيع
يمكن عرض قائمة إضافية من الأيقونات عند الضغط على الزر المركزي.
تخصيص كامل للتصميم
يمكن تغيير الألوان والأيقونات والمسافات والظلال بسهولة.
دعم كامل للمنصات
تعمل المكتبة على Android و iOS والويب وحتى تطبيقات سطح المكتب.
طريقة تثبيت المكتبة
dependencies:
flutter_animated_navkit: ^1.0.0
flutter pub get
import 'package:flutter_animated_navkit/flutter_animated_navkit.dart';
المكون الرئيسي AnimatedBottomNavkit
أهم الخصائص التي يوفرها:
items
قائمة الأيقونات التي تظهر في شريط التنقل.
currentIndex
رقم العنصر النشط حاليًا في شريط التنقل.
onTap
دالة يتم استدعاؤها عند الضغط على أيقونة من شريط التنقل.
activeColor و inactiveColor
تحديد لون الأيقونة عند التفعيل وعدم التفعيل.
expandedMenuIcons
قائمة الأيقونات التي تظهر عند فتح القائمة الموسعة من الزر المركزي.
layoutMode
تحديد طريقة عرض القائمة الموسعة سواء بشكل عمودي أو قوسي.
إنشاء عناصر شريط التنقل
items: [
BottomNavItem(icon: CupertinoIcons.home),
BottomNavItem(icon: CupertinoIcons.search),
BottomNavItem(icon: CupertinoIcons.person),
BottomNavItem(icon: CupertinoIcons.settings),
],
إضافة أيقونات القائمة الموسعة
expandedMenuIcons: [
MenuIconItem(
onTap: () {},
widget: Icon(CupertinoIcons.camera, size: 25, color: Colors.white),
),
MenuIconItem(
onTap: () {},
widget: Icon(CupertinoIcons.mic, size: 25, color: Colors.white),
),
MenuIconItem(
onTap: () {},
widget: Icon(CupertinoIcons.play, size: 25, color: Colors.white),
),
],
استخدام AnimatedBottomNavkit داخل Scaffold
AnimatedBottomNavkit(
items: items,
currentIndex: _currentIndex,
onTap: (index) => setState(() => _currentIndex = index),
expandedMenuIcons: expandedMenuIcons,
menuExpandDuration: Duration(milliseconds: 500),
activeColor: Colors.blue,
inactiveColor: Colors.grey,
barBackgroundColor: Colors.white,
middleHexagonSize: 50,
showMiddleNotch: true,
)
عند تشغيل التطبيق سيظهر شريط تنقل متحرك يحتوي على الأيقونات المحددة، ويمكنك التنقل بين الصفحات بسهولة، كما يمكن فتح القائمة الموسعة من الزر المركزي لعرض الإجراءات الإضافية.
أفضل استخدامات المكتبة
الخلاصة
بفضل تصميمها الفريد وإمكانيات التخصيص العالية، يمكنك بناء تجربة مستخدم حديثة وجذابة تضيف قيمة حقيقية لتطبيقك.
إذا كنت تريد تحسين واجهة تطبيقك وإضافة لمسة احترافية دون تعقيد، فهذه المكتبة تستحق التجربة بالتأكيد.
لمزيد من المكتبات المفيدة يمكنك متابعة المقالات الخاصة بتطوير تطبيقات Flutter على الموقع.
ويمكنك مشاهده المقاله التاليه علي موقعنا جعل شريط التنقل السفلي أكثر تفاعلية مع تأثير التلاشي Flutter
