diff --git a/CHANGELOG.md b/CHANGELOG.md index bd8a892..1b870ba 100644 --- 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 index 939ddb4..4dd4a5f 100644 --- 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 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 index f02f5d2..90d2c67 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -83,7 +83,11 @@ class _MyHomePageState extends State { onTap: () { page.jumpToPage(0); }, - icon: Icons.home, + icon: Icon(Icons.home), + badgeContent: Text( + '3', + style: TextStyle(color: Colors.white), + ), ), SideMenuItem( priority: 1, @@ -91,7 +95,7 @@ class _MyHomePageState extends State { onTap: () { page.jumpToPage(1); }, - icon: Icons.supervisor_account, + icon: Icon(Icons.supervisor_account), ), SideMenuItem( priority: 2, @@ -99,7 +103,7 @@ class _MyHomePageState extends State { onTap: () { page.jumpToPage(2); }, - icon: Icons.file_copy_rounded, + icon: Icon(Icons.file_copy_rounded), ), SideMenuItem( priority: 3, @@ -107,7 +111,7 @@ class _MyHomePageState extends State { onTap: () { page.jumpToPage(3); }, - icon: Icons.download, + icon: Icon(Icons.download), ), SideMenuItem( priority: 4, @@ -115,13 +119,13 @@ class _MyHomePageState extends State { 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 index 436d458..f3a891f 100644 --- 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 index ec5aac0..64b4471 100644 Binary files a/images/Screenshot_1.png and b/images/Screenshot_1.png differ diff --git a/images/Screenshot_2.png b/images/Screenshot_2.png index 29321a7..0f6a5c8 100644 Binary files a/images/Screenshot_2.png and b/images/Screenshot_2.png differ diff --git a/lib/src/SideMenuItem.dart b/lib/src/SideMenuItem.dart index 44e909f..b60de1e 100644 --- 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,12 +34,19 @@ 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 { - double curentPage = 0; + double currentPage = 0; bool isHovered = false; @override @@ -43,14 +54,14 @@ class _SideMenuItemState extends State { 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 { } } + /// 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,13 +114,7 @@ class _SideMenuItemState extends State { 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, ), @@ -95,7 +122,7 @@ class _SideMenuItemState extends State { 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 index 010beab..a819451 100644 --- 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 index f82753a..223cb0d 100644 --- 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