add badge, change icon type

Jamalianpour · Mar 14, 2022 · 3156873 · 3156873
1 parent 3a59a70
commit 3156873
Show file tree

Hide file tree

Showing 9 changed files with 110 additions and 41 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## [0.2.0]
+* add badge support to the sidemenu
+* change IconData to Icon for more flexibility
+
 ## [0.1.1+1]
 * add demo to readme
 

diff --git a/README.md b/README.md
@@ -38,7 +38,7 @@ You can see web demo here: [https://jamalianpour.github.io/easy_sidemenu](https:
 
 ```yaml
 dependencies:
-  easy_sidemenu: ^0.1.1+1
+  easy_sidemenu: ^0.2.0
 ```
 
 Run `flutter packages get` in the root directory of your app.
@@ -62,19 +62,23 @@ List<SideMenuItem> items = [
     priority: 0,
     title: 'Dashboard',
     onTap: () => page.jumpToPage(0),
-    icon: Icons.home,
+    icon: Icon(Icons.home),
+    badgeContent: Text(
+      '3',
+      style: TextStyle(color: Colors.white),
+    ),
   ),
   SideMenuItem(
     priority: 1,
     title: 'Settings',
     onTap: () => page.jumpToPage(1),
-    icon: Icons.settings,
+    icon: Icon(Icons.settings),
   ),
   SideMenuItem(
     priority: 2,
     title: 'Exit',
     onTap: () {},
-    icon: Icons.exit_to_app,
+    icon: Icon(Icons.exit_to_app),
   ),
 ];
 ```

diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -83,45 +83,49 @@ class _MyHomePageState extends State<MyHomePage> {
                 onTap: () {
                   page.jumpToPage(0);
                 },
-                icon: Icons.home,
+                icon: Icon(Icons.home),
+                badgeContent: Text(
+                  '3',
+                  style: TextStyle(color: Colors.white),
+                ),
               ),
               SideMenuItem(
                 priority: 1,
                 title: 'Users',
                 onTap: () {
                   page.jumpToPage(1);
                 },
-                icon: Icons.supervisor_account,
+                icon: Icon(Icons.supervisor_account),
               ),
               SideMenuItem(
                 priority: 2,
                 title: 'Files',
                 onTap: () {
                   page.jumpToPage(2);
                 },
-                icon: Icons.file_copy_rounded,
+                icon: Icon(Icons.file_copy_rounded),
               ),
               SideMenuItem(
                 priority: 3,
                 title: 'Download',
                 onTap: () {
                   page.jumpToPage(3);
                 },
-                icon: Icons.download,
+                icon: Icon(Icons.download),
               ),
               SideMenuItem(
                 priority: 4,
                 title: 'Settings',
                 onTap: () {
                   page.jumpToPage(4);
                 },
-                icon: Icons.settings,
+                icon: Icon(Icons.settings),
               ),
               SideMenuItem(
                 priority: 6,
                 title: 'Exit',
                 onTap: () async {},
-                icon: Icons.exit_to_app,
+                icon: Icon(Icons.exit_to_app),
               ),
             ],
           ),

diff --git a/example/pubspec.lock b/example/pubspec.lock
@@ -7,7 +7,14 @@ packages:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.6.1"
+    version: "2.8.2"
+  badges:
+    dependency: transitive
+    description:
+      name: badges
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.2"
   boolean_selector:
     dependency: transitive
     description:
@@ -21,14 +28,14 @@ packages:
       name: characters
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0"
+    version: "1.2.0"
   charcode:
     dependency: transitive
     description:
       name: charcode
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0"
+    version: "1.3.1"
   clock:
     dependency: transitive
     description:
@@ -56,7 +63,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.1.1+1"
+    version: "0.2.0"
   fake_async:
     dependency: transitive
     description:
@@ -80,14 +87,21 @@ packages:
       name: matcher
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.12.10"
+    version: "0.12.11"
+  material_color_utilities:
+    dependency: transitive
+    description:
+      name: material_color_utilities
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.1.3"
   meta:
     dependency: transitive
     description:
       name: meta
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.3.0"
+    version: "1.7.0"
   path:
     dependency: transitive
     description:
@@ -141,7 +155,7 @@ packages:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.3.0"
+    version: "0.4.8"
   typed_data:
     dependency: transitive
     description:
@@ -155,7 +169,7 @@ packages:
       name: vector_math
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.0"
+    version: "2.1.1"
 sdks:
-  dart: ">=2.12.0 <3.0.0"
+  dart: ">=2.14.0 <3.0.0"
   flutter: ">=1.17.0"
diff --git a/images/Screenshot_1.png b/images/Screenshot_1.png
diff --git a/images/Screenshot_2.png b/images/Screenshot_2.png
diff --git a/lib/src/SideMenuItem.dart b/lib/src/SideMenuItem.dart
@@ -1,3 +1,5 @@
+import 'package:badges/badges.dart';
+
 import 'SideMenuDisplayMode.dart';
 import 'Global/Global.dart';
 import 'package:flutter/material.dart';
@@ -12,6 +14,8 @@ class SideMenuItem extends StatefulWidget {
     required this.title,
     required this.icon,
     required this.priority,
+    this.badgeContent,
+    this.badgeColor,
   }) : super(key: key);
 
   /// A function that call when tap on [SideMenuItem]
@@ -21,7 +25,7 @@ class SideMenuItem extends StatefulWidget {
   final String title;
 
   /// A Icon to display before [title]
-  final IconData icon;
+  final Icon icon;
 
   /// Priority of item to show on [SideMenu], lower value is displayed at the top
   ///
@@ -30,27 +34,34 @@ class SideMenuItem extends StatefulWidget {
   /// * This value used for page controller index
   final int priority;
 
+  /// Text show next to the icon as badge
+  /// By default this is null
+  final Widget? badgeContent;
+
+  // Background color for badge
+  final Color? badgeColor;
+
   @override
   _SideMenuItemState createState() => _SideMenuItemState();
 }
 
 class _SideMenuItemState extends State<SideMenuItem> {
-  double curentPage = 0;
+  double currentPage = 0;
   bool isHovered = false;
 
   @override
   void initState() {
     super.initState();
     Global.controller.addListener(() {
       setState(() {
-        curentPage = Global.controller.page!;
+        currentPage = Global.controller.page!;
       });
     });
   }
 
   /// Set background color of [SideMenuItem]
   Color _setColor() {
-    if (widget.priority == curentPage) {
+    if (widget.priority == currentPage) {
       return Global.style.selectedColor ?? Theme.of(context).highlightColor;
     } else if (isHovered) {
       return Global.style.hoverColor ?? Colors.transparent;
@@ -59,6 +70,28 @@ class _SideMenuItemState extends State<SideMenuItem> {
     }
   }
 
+  /// Set icon for of [SideMenuItem]
+  Widget _generateIcon(Icon mainIcon) {
+    Icon icon = Icon(
+      mainIcon.icon,
+      color: widget.priority == currentPage
+          ? Global.style.selectedIconColor ?? Colors.black
+          : Global.style.unselectedIconColor ?? Colors.black54,
+      size: Global.style.iconSize ?? 24,
+    );
+    if (widget.badgeContent == null) {
+      return icon;
+    } else {
+      return Badge(
+        badgeContent: widget.badgeContent!,
+        badgeColor: widget.badgeColor ?? Colors.red,
+        alignment: Alignment.bottomRight,
+        position: BadgePosition(top: -13, end: -7),
+        child: icon,
+      );
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     return InkWell(
@@ -81,21 +114,15 @@ class _SideMenuItemState extends State<SideMenuItem> {
                 child: Row(
                   crossAxisAlignment: CrossAxisAlignment.center,
                   children: [
-                    Icon(
-                      widget.icon,
-                      color: widget.priority == curentPage
-                          ? Global.style.selectedIconColor ?? Colors.black
-                          : Global.style.unselectedIconColor ?? Colors.black54,
-                      size: Global.style.iconSize ?? 24,
-                    ),
+                    _generateIcon(widget.icon),
                     SizedBox(
                       width: 8.0,
                     ),
                     if (value == SideMenuDisplayMode.open)
                       Expanded(
                         child: Text(
                           widget.title,
-                          style: widget.priority == curentPage
+                          style: widget.priority == currentPage
                               ? TextStyle(fontSize: 17, color: Colors.black)
                                   .merge(Global.style.selectedTitleTextStyle)
                               : TextStyle(fontSize: 17, color: Colors.black54)

diff --git a/pubspec.lock b/pubspec.lock
@@ -7,7 +7,14 @@ packages:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.6.1"
+    version: "2.8.2"
+  badges:
+    dependency: "direct main"
+    description:
+      name: badges
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.2"
   boolean_selector:
     dependency: transitive
     description:
@@ -21,14 +28,14 @@ packages:
       name: characters
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0"
+    version: "1.2.0"
   charcode:
     dependency: transitive
     description:
       name: charcode
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0"
+    version: "1.3.1"
   clock:
     dependency: transitive
     description:
@@ -66,14 +73,21 @@ packages:
       name: matcher
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.12.10"
+    version: "0.12.11"
+  material_color_utilities:
+    dependency: transitive
+    description:
+      name: material_color_utilities
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.1.3"
   meta:
     dependency: transitive
     description:
       name: meta
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.3.0"
+    version: "1.7.0"
   path:
     dependency: transitive
     description:
@@ -127,7 +141,7 @@ packages:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.3.0"
+    version: "0.4.8"
   typed_data:
     dependency: transitive
     description:
@@ -141,7 +155,7 @@ packages:
       name: vector_math
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.0"
+    version: "2.1.1"
 sdks:
-  dart: ">=2.12.0 <3.0.0"
+  dart: ">=2.14.0 <3.0.0"
   flutter: ">=1.17.0"
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -1,6 +1,6 @@
 name: easy_sidemenu
-description: An easy to use side menu in flutter and can used for navigations
-version: 0.1.1+1
+description: An easy to use side menu in flutter and can used for navigation
+version: 0.2.0
 homepage: https://github.com/Jamalianpour/easy_sidemenu
 
 environment:
@@ -11,6 +11,8 @@ dependencies:
   flutter:
     sdk: flutter
 
+  badges: ^2.0.2
+
 dev_dependencies:
   flutter_test:
     sdk: flutter