Support for badges on the NavbarItem

[bebaoboy]

This PR implements the badges and dot feature and integrate them to the navbar_router, with minimal codebase changes.
Based on badges packagae of flutter.

Features:

• Customize badges according to badges packagae, including size, color, position, animation,.. and put them into NavbarItem to set up initial badges. Supported const.

NavbarItem(Icons.home_outlined, 'Home',
        backgroundColor: colors[0],
        selectedIcon: const Icon(
          Icons.home,
          size: 26,
        ),
        // --- it's here ----
        badge: const NavbarBadge(
          badgeText: "11",
          showBadge: true,
        ))

• Next, you can update your badges by using NavbarNotifier.
  NavbarNotifier.updateBadges(int index, NavbarBadge badge) // new badges

• Customize your badge with copyWith:
  NavbarBadge.copyWith(...)

• Flexibly show or hide badges on demand
  NavbarNotifier.makeBadgeVisible(int index, bool visible)

• or set the default behaviour of hiding on tap:

-- Setting the attributes in NavbarRouter when you setup your navbar:

final bool hideBadgeOnPageChanged;

-- Setting it manually anywhere:

NavbarNotifier.hideBadgeOnPageChanged = true;

Demo video

Showing random badges/dots on button click (taking from main.dart in example folder)

5355174357608.mp4

• Support all types of navbar available (I think so).

List which issues are fixed by this PR. You must list at least one issue.
Reference: #36 and #30

Pre-launch Checklist

• ✅ I read the Contributor Guide and followed the process outlined there for submitting PRs.
• ✅ I listed at least one issue that this PR fixes in the description above.
• ✅ I updated/added relevant documentation (doc comments with ///).
• ✅ I added new tests to check the change I am making, or this PR is [test-exempt].
• ✅ All existing and new tests are passing using flutter test
  

P.s: This is my first-time fork so if anything's gone wrong please tell me! Thank you, have a good day! @maheshmnj

[maheshj01]

Awesome! @bebaoboy I am currently traveling will review it soon.

[maheshj01]

Meanwhile, can you please add some tests regarding this change? You can refer to existing tests in test folder for your reference. Let me know if you need any help.

[bebaoboy]

I'll make some tests when I'm available soon, as I'm still working on my college projects (using the M3 navbar too)
Pretty awesome work!

Enjoy your traveling 😆

[maheshj01]

Sure thing take your time, Good luck with your school project. I won't be able to review it for another two days. I need to prepare for my conference too and be back be on this PR soon.

[bebaoboy]

Yeah so i made some enhancement and added some badge tests. They're all passed (together with current tests) for all types of navigation bar.

Also, the badges look a bit weird on the default UI for web (default). And umm, this is because I don't know how to customize the background of the navigation bar on web, as of now. Below is the picture, taken from my app:

Another thing I want to ask is whether we want to wrap badges over user's child widget of NavbarItem. (The widget user gives not the default navbar text and icon).

Again, take a look on this PR when you're free 😊 Thank you.

[maheshj01]

Another thing I want to ask is whether we want to wrap badges over user's child widget of NavbarItem.

I think having a badge parameter in NavbarItem class would be the right approach.

[maheshj01]

Perhaps we should also take into consideration that parameters in NavbarItems can be updated in runtime.
Otherwise we wrill run into this issue #38, This is yet to be addressed.

Edit: I see you have exposed NavbarNotifier.updateBadge, perhaps this will take care of updates, Will take a look at this PR this weekend.

Again Great work! I really appreciate your contribution.

[maheshj01]

@bebaoboy I reviewed your PR its kind of lagging on the web when switching to profile tab, need to investigate further. If you run the app on the web it freezes on switching tabs and the app is no longer usable.

[bebaoboy]

Hello, How do I run the app on the web like you said to test it?

That's so strange, even on landscape mode/navigation rail in mobile, it doesnt seem quite lagging.

[maheshj01]

Strange, I saw severe lag issue last night and now I can't reproduce it. It seems to work pretty smooth. I think we are good on the performance part as of now. I am reviewing the code will share the feedback soon.

[maheshj01]

@bebaoboy I have made some comments can you please review and incorporate them?

Thanks

[bebaoboy]

@bebaoboy I have made some comments can you please review and incorporate them?

Thanks

Help I don't see them, where are your comments ... Please tell me, thank you

[maheshj01]

Oops I did not submit the review, Apologies you should see them now. You are welcome to share you thoughts for each of the review, I am not an expert.

[maheshj01]

Rest looks good to me, Once this is merged I will update the documentation here https://github.com/maheshmnj/docs/tree/main/docs/navbar_router and the readme.md with a small example

If you would like you are welcome to contribute to the documentation.

[maheshj01]

Great work @bebaoboy. Thank you for contribution!
This feature will be available in the next release.