تغيير شريط bottomNavBar الى شكل مختلف مع انميشن بين الانتقال في تطبيقات فلاتر
في هذه المقالة سوف نقدم لكم ايضا bottomNavBar جديد ويعطي تاثير عند النقر على اي عنصر من عناصر ال bottomNavBar وانا استخدام هذه المكتبة في بعض المشاريع التي قمت بها حيث انها بسيطه جدا ويتعطي تاثير رائع عند الضغط على اي عنصر واذا لم تعجبك هذه المكتبة فيوجد في موقعنا الكثير من المكتبات التي يمكنك استخدامها في مشروعك بدون اي مشاكل فقط كل ما عليك هو الانتقال الى القسم المخصص وبعدها سوف تحصل على الكثير من المكتبات التي تريدها في تحسين من مظهر التطبيق الخاص بك في flutter بشكل مجاني .
تسمى عملية إنشاء تطبيق جوال للأجهزة مثل الهواتف الذكية والأجهزة اللوحية وغير ذلك تطوير تطبيقات الأجهزة المحمولة. يتضمن التفكير والتنظيم والإنشاء واختبار التطبيق. وهي صناعة تستمر في التوسع في العقد الحالي ، مع عدد متزايد من مستخدمي الهواتف المحمولة وإدخال تقنيات جديدة ومتطورة.
نتيجة لذلك ، هناك حاجة كبيرة لمطوري تطبيقات الأجهزة المحمولة الذين يمكنهم إنشاء تطبيقات جميلة وبديهية. وفقًا لمكتب إحصاءات العمل الأمريكي ، من المتوقع أن تزداد الحاجة إلى مطورين مؤهلين بنسبة 21٪ بين عامي 2018 و 2028 نتيجة لتطوير تطبيقات الأجهزة المحمولة. التطبيقات الأصلية والتطبيقات المختلطة هما الفئتان الرئيسيتان لتطبيقات الأجهزة المحمولة.
package :
custom_navigation_bar: ^0.8.2
How to change navigation_bar and add animation in Flutter
في الكود التالي قمنا بتنفيذ مجموعه من الاشكال التي تقدمها لنا هذه المكتبة يمكنك اختيار الشكل الذي ترغب به في مشروعك بدون اي مشاكل ويمكنك نسخ الكود والتعديل عليه حتى يتوافق مع التصميم الذي تعمل عليه ويوجد اشكال كثيره يمكنك التعرف عليها ويمكنك نسخ الكود واستخدامه والتعرف على جميع الاشكال وبعدها اختر الشكل الذي ترغب به وقم بتنفيذ في مشروعك بدون اي مشاكل .
ui.dart
enum ThemeStyle {
Dribbble,
Light,
NoElevation,
AntDesign,
BorderRadius,
FloatingBar,
NotificationBadge,
WithTitle,
BlurEffect
}
class ChatPage extends StatefulWidget {
const ChatPage({Key? key}) : super(key: key);
@override
State<ChatPage> createState() => _ChatPageState();
}
class _ChatPageState extends State<ChatPage> {
int _currentIndex = 0;
ThemeStyle _currentStyle = ThemeStyle.NotificationBadge;
List<int> _badgeCounts = List<int>.generate(5, (index) => index);
List<bool> _badgeShows = List<bool>.generate(5, (index) => true);
@override
Widget build(BuildContext context) =>
Scaffold(
body: Center(
child: ListView(
children: <Widget>[
ListTile(
title: const Text('Notification badge'),
leading: Radio(
value: ThemeStyle.NotificationBadge,
groupValue: _currentStyle,
onChanged: (ThemeStyle? value) {
setState(() {
_currentStyle = value!;
});
},
),
),
ListTile(
title: const Text('Dribbble'),
leading: Radio(
value: ThemeStyle.Dribbble,
groupValue: _currentStyle,
onChanged: (ThemeStyle? value) {
setState(() {
_currentStyle = value!;
});
},
),
),
ListTile(
title: const Text('Light'),
leading: Radio(
value: ThemeStyle.Light,
groupValue: _currentStyle,
onChanged: (ThemeStyle? value) {
setState(() {
_currentStyle = value!;
});
},
),
),
ListTile(
title: const Text('No elevation'),
leading: Radio(
value: ThemeStyle.NoElevation,
groupValue: _currentStyle,
onChanged: (ThemeStyle? value) {
setState(() {
_currentStyle = value!;
});
},
),
),
ListTile(
title: const Text('Custom Icon from Ant Design'),
leading: Radio(
value: ThemeStyle.AntDesign,
groupValue: _currentStyle,
onChanged: (ThemeStyle? value) {
setState(() {
_currentStyle = value!;
});
},
),
),
ListTile(
title: const Text('With border radius'),
leading: Radio(
value: ThemeStyle.BorderRadius,
groupValue: _currentStyle,
onChanged: (ThemeStyle? value) {
setState(() {
_currentStyle = value!;
});
},
),
),
ListTile(
title: const Text('Floating Bar'),
leading: Radio(
value: ThemeStyle.FloatingBar,
groupValue: _currentStyle,
onChanged: (ThemeStyle? value) {
setState(() {
_currentStyle = value!;
});
},
),
),
ListTile(
title: const Text('With Title'),
leading: Radio(
value: ThemeStyle.WithTitle,
groupValue: _currentStyle,
onChanged: (ThemeStyle? value) {
setState(() {
_currentStyle = value!;
});
},
),
),
ListTile(
title: const Text('Blur Effect'),
leading: Radio(
value: ThemeStyle.BlurEffect,
groupValue: _currentStyle,
onChanged: (ThemeStyle? value) {
setState(() {
_currentStyle = value!;
});
},
),
),
],
),
),
bottomNavigationBar: _buildBottomNavigationBar(),
);
Widget _buildBottomNavigationBar() {
switch (_currentStyle) {
case ThemeStyle.Dribbble:
return _buildOriginDesign();
case ThemeStyle.Light:
return _buildLightDesign();
case ThemeStyle.AntDesign:
return _buildCustomIconDesign();
case ThemeStyle.BorderRadius:
return _buildBorderRadiusDesign();
case ThemeStyle.FloatingBar:
return _buildFloatingBar();
case ThemeStyle.NoElevation:
return _buildNoElevation();
case ThemeStyle.NotificationBadge:
return _buildNotificationBadge();
case ThemeStyle.WithTitle:
return _buildTitle();
case ThemeStyle.BlurEffect:
return _buildBlurEffect();
default:
return _buildOriginDesign();
}
}
Widget _buildTitle() {
return CustomNavigationBar(
iconSize: 30.0,
selectedColor: Color(0xff040307),
strokeColor: Color(0x30040307),
unSelectedColor: Color(0xffacacac),
backgroundColor: Colors.white,
items: [
CustomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("Home"),
),
CustomNavigationBarItem(
icon: Icon(Icons.shopping_cart),
title: Text("Cart"),
),
CustomNavigationBarItem(
icon: Icon(Icons.lightbulb_outline),
title: Text("Explore"),
),
CustomNavigationBarItem(
icon: Icon(Icons.search),
title: Text("Search"),
),
CustomNavigationBarItem(
icon: Icon(Icons.account_circle),
title: Text("Me"),
),
],
currentIndex: _currentIndex,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
);
}
Widget _buildNotificationBadge() {
print("notification");
return CustomNavigationBar(
iconSize: 30.0,
selectedColor: Color(0xff040307),
strokeColor: Color(0x30040307),
unSelectedColor: Color(0xffacacac),
backgroundColor: Colors.white,
items: [
CustomNavigationBarItem(
icon: Icon(Icons.home),
badgeCount: _badgeCounts[0],
showBadge: _badgeShows[0],
),
CustomNavigationBarItem(
icon: Icon(Icons.shopping_bag),
badgeCount: _badgeCounts[1],
showBadge: _badgeShows[1],
),
CustomNavigationBarItem(
icon: Icon(Icons.lightbulb_outline),
badgeCount: _badgeCounts[2],
showBadge: _badgeShows[2],
),
CustomNavigationBarItem(
icon: Icon(Icons.search),
badgeCount: _badgeCounts[3],
showBadge: _badgeShows[3],
),
CustomNavigationBarItem(
icon: Icon(Icons.account_circle),
badgeCount: _badgeCounts[4],
showBadge: _badgeShows[4],
),
],
currentIndex: _currentIndex,
onTap: (index) {
setState(() {
_currentIndex = index;
_badgeShows[index] = false;
});
},
);
}
Widget _buildOriginDesign() {
return CustomNavigationBar(
iconSize: 30.0,
selectedColor: Colors.white,
strokeColor: Colors.white,
unSelectedColor: Color(0xff6c788a),
backgroundColor: Color(0xff040307),
items: [
CustomNavigationBarItem(
icon: Icon(Icons.home),
),
CustomNavigationBarItem(
icon: Icon(Icons.shopping_cart),
),
CustomNavigationBarItem(
icon: Icon(Icons.lightbulb_outline),
),
CustomNavigationBarItem(
icon: Icon(Icons.search),
),
CustomNavigationBarItem(
icon: Icon(Icons.account_circle),
),
],
currentIndex: _currentIndex,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
);
}
Widget _buildLightDesign() {
return CustomNavigationBar(
iconSize: 30.0,
selectedColor: Color(0xff040307),
strokeColor: Color(0x30040307),
unSelectedColor: Color(0xffacacac),
backgroundColor: Colors.white,
items: [
CustomNavigationBarItem(
icon: Icon(Icons.home),
),
CustomNavigationBarItem(
icon: Icon(Icons.shopping_cart),
),
CustomNavigationBarItem(
icon: Icon(Icons.lightbulb_outline),
),
CustomNavigationBarItem(
icon: Icon(Icons.search),
),
CustomNavigationBarItem(
icon: Icon(Icons.account_circle),
),
],
currentIndex: _currentIndex,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
);
}
Widget _buildNoElevation() {
return CustomNavigationBar(
elevation: 0.0,
iconSize: 30.0,
selectedColor: Color(0xff625aff),
strokeColor: Color(0xff625aff),
unSelectedColor: Colors.white,
backgroundColor: Color(0xffa9a5f2),
items: [
CustomNavigationBarItem(
icon: Icon(Icons.home),
),
CustomNavigationBarItem(
icon: Icon(Icons.shopping_cart),
),
CustomNavigationBarItem(
icon: Icon(Icons.lightbulb_outline),
),
CustomNavigationBarItem(
icon: Icon(Icons.search),
),
CustomNavigationBarItem(
icon: Icon(Icons.account_circle),
),
],
currentIndex: _currentIndex,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
);
}
Widget _buildCustomIconDesign() {
return CustomNavigationBar(
iconSize: 30.0,
selectedColor: Color(0xff0c18fb),
strokeColor: Color(0x300c18fb),
unSelectedColor: Colors.grey[600],
backgroundColor: Colors.white,
items: [
CustomNavigationBarItem(
icon: Icon(Icons.home),
),
CustomNavigationBarItem(
icon: Icon(Icons.shopping_cart),
),
CustomNavigationBarItem(
icon: Icon(Icons.lightbulb_outline),
),
CustomNavigationBarItem(
icon: Icon(Icons.search),
),
CustomNavigationBarItem(
icon: Icon(Icons.account_circle),
), ],
currentIndex: _currentIndex,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
);
}
Widget _buildBorderRadiusDesign() {
return CustomNavigationBar(
iconSize: 30.0,
selectedColor: Color(0xff0c18fb),
strokeColor: Color(0x300c18fb),
unSelectedColor: Colors.grey[600],
backgroundColor: Colors.white,
borderRadius: Radius.circular(20.0),
items: [
CustomNavigationBarItem(
icon: Icon(Icons.home),
),
CustomNavigationBarItem(
icon: Icon(Icons.shopping_cart),
),
CustomNavigationBarItem(
icon: Icon(Icons.lightbulb_outline),
),
CustomNavigationBarItem(
icon: Icon(Icons.search),
),
CustomNavigationBarItem(
icon: Icon(Icons.account_circle),
),
],
currentIndex: _currentIndex,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
);
}
Widget _buildFloatingBar() {
return CustomNavigationBar(
iconSize: 30.0,
selectedColor: Color(0xff0c18fb),
strokeColor: Color(0x300c18fb),
unSelectedColor: Colors.grey[600],
backgroundColor: Colors.white,
borderRadius: Radius.circular(20.0),
items: [
CustomNavigationBarItem(
icon: Icon(Icons.home),
),
CustomNavigationBarItem(
icon: Icon(Icons.shopping_cart),
),
CustomNavigationBarItem(
icon: Icon(Icons.lightbulb_outline),
),
CustomNavigationBarItem(
icon: Icon(Icons.search),
),
CustomNavigationBarItem(
icon: Icon(Icons.account_circle),
),
],
currentIndex: _currentIndex,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
isFloating: true,
);
}
Widget _buildBlurEffect() {
return CustomNavigationBar(
iconSize: 30.0,
selectedColor: Colors.white,
strokeColor: Colors.white,
unSelectedColor: Colors.grey[600],
backgroundColor: Colors.black,
borderRadius: Radius.circular(20.0),
blurEffect: true,
opacity: 0.8,
items: [
CustomNavigationBarItem(
icon: Icon(Icons.home),
),
CustomNavigationBarItem(
icon: Icon(Icons.shopping_cart),
),
CustomNavigationBarItem(
icon: Icon(Icons.lightbulb_outline),
),
CustomNavigationBarItem(
icon: Icon(Icons.search),
),
CustomNavigationBarItem(
icon: Icon(Icons.account_circle),
),
],
currentIndex: _currentIndex,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
isFloating: true,
);
}
}
