Highlighting current selected icon when using Neurmorphic style

[RickBoyerDev]

Here's a screenshot of what I'm trying to achieve:

So far, this is what I actually have:

As you can see, I don't have the labels nor can I tell which icon/screen is currently selected. The documentation shows the following two neumorphic styles: Neumorphic Neumorphic without subtitle

I don't actually see the "Neumorphic without subtitle" as an option when I'm looking at the available styles.

Here is the code I'm using to create one of the icons:

PersistentBottomNavBarItem(
        icon: const Icon(Icons.settings),
        title: ("Settings"),
        textStyle: const TextStyle(color: kPrimaryColor),
        activeColorPrimary: Colors.white,
        activeColorSecondary: kPrimaryColor,
        inactiveColorPrimary: kPrimaryColor,
        inactiveColorSecondary: Colors.white,
        onPressed: (_) {
          pushNewScreen(tabContext!,
              screen: SettingsScreen(),
              withNavBar: true,
},),

It seems only the activeColorPrimary and activeColorSecondary make a difference.

Any tips would be appreciated. Maybe I'm just not using the properties correctly?

[jb3rndt]

in your PersistentTabView you can pass neumorphicProperties where you can specify that you want the subtitle. Regarding your colors it seems that the secondary colors are not applied to the items background. And I think it is not possible to use BoxShape.circle in the neumorphicProperties. Also, the subtitle will be inside the neumorphic box, which is not what is needed regarding your image. Maybe we should make a list of what is not working, to fix that?

[RickBoyerDev]

Thanks again @jb3rndt! I really do appreciate your help.

in your PersistentTabView you can pass neumorphicProperties I didn't realize neumorphicProperties option existed!

And I think it is not possible to use BoxShape.circle in the neumorphicProperties. You seem to be correct. The borderRadius property does work though, so I can round out the rectangles.

the subtitle will be inside the neumorphic box Correct again.

Maybe we should make a list of what is not working,

1. Secondary color not being used
2. Display icon titles below icon, not inside.

[jb3rndt]

Hi, I thought a bit more about this and I am not sure regarding some points. First of all, there are quite some individual changes needed to fulfil the design on your design template, which makes the neumorphic style behave a bit differently from all the other styles. This on itself is not a big problem, some might argue that it should not be included in the package as a predefined style so the user should implement a custom navbar for that. The discussion point is what you can see in the gif: when clicking on the neumorphic item, it has some effects that are being played. I dont know if that is desired, but at that point I asked myself if the neumorphic stuff is the right thing for your use case? As is seems, you just need a shadow for the inactive items and thats it right?

[jb3rndt]

Ah and if you want to try out the current state, just change the dependency of this package to point to the git branch like this:

persistent_bottom_nav_bar_v2:
 git:
   url: git://github.com/jb3rndt/PersistentBottomNavBar.git
   ref: fix/neumorphic-style

[RickBoyerDev]

I dont know if that is desired, but at that point I asked myself if the neumorphic stuff is the right thing for your use case?

Well, the neumorphic option was the only reason I chose this package, as the app I'm doing is based on the neumorphic design.

What you have in your picture looks very close to what I need.

[jb3rndt]

Ok if the effect is no problem, did you try out using the adjusted dependency? Is there something not working still?:

persistent_bottom_nav_bar_v2:
 git:
   url: git://github.com/jb3rndt/PersistentBottomNavBar.git
   ref: fix/neumorphic-style

PS: there is a new NavBarStyle.neurmorphic2 that I built for your case