Improvements for Navigation Bar and Rail

[goottime]

I tried the new Navigation Bar and Rail components and noticed some issues:

• When adding multiple icons there is a rendering issue.
  
  

• Do the elements seem too big to you? I think they look too bulky and I would stick to the Material 3 or forui sizes.

• Also, there is a lack of customization for NavigationButton. You can add modes to always show the label, hide it completely (NavigationLabelType.none not work) or show it only for the selected element. I would like to achieve a similar visual with customizations.

• I tried adding NavigationBar as a child and as a footer, but in neither case there is a safe area. Rail also suffers from this problem.

• I would add full-area placement to NavigationAlignment so that you can make the icons spread evenly across the available area (as it is implemented in Material).

[goottime]

Almost everything is as I suggested, great job. I would suggest a few more additions, if you don't mind:

• The selected icon can be painted in the primary color both with a custom style and when the container is visible. And all other icons can be painted as in Muted Button to get something like this.
  
  

• Now if the item container is square, then it is quite difficult to hit it. You can do it like in other libraries - the entire navigation bar is divided into sections and when you click on it, the item in this section is selected. At the same time, if you click on the section itself, and not on the container, there will be no click or focus effect. It appears only if you click directly on the container. But here you do the implementation as you see fit

• I also wanted to use styles to increase the space inside the icon container, without increasing the icon itself. How can this be implemented?

• Is it possible to slightly redesign the architecture of the Navigation Bar so that the state is stored inside? Something like this. Then there will be less code involved and it will look more elegant.

[goottime]

I also suggest adding a NavigationLabel setting to NavigationSidebar. Will it be floating or will it hide when scrolling, like all the other buttons.
In NavigationButton, you can add a text setting when it is too long, will it scroll or just end with an ellipsis.
I also noticed a gap of a few pixels between NavigationLabel, as well as when scrolling the text

[sunarya-thito]

I also suggest adding a NavigationLabel setting to NavigationSidebar. Will it be floating or will it hide when scrolling, like all the other buttons. In NavigationButton, you can add a text setting when it is too long, will it scroll or just end with an ellipsis. I also noticed a gap of a few pixels between NavigationLabel, as well as when scrolling the text

I fixed the issue with the marquee overflow component, but the other one is just really a flutter antialiasing issue

[sunarya-thito]

The selected icon can be painted in the primary color both with a custom style and when the container is visible. And all other icons can be painted as in Muted Button to get something like this.

NavigationButton accepts two style parameter (normal and the selected one). You can style the NavigationButton like this:

return NavigationButton(
  style: ButtonStyle.ghost().copyWith(
    iconTheme: ButtonStylePropertyAll(IconThemeData(size: 24)),
  ),
  selectedStyle: ButtonStyle.ghost().copyWith(
    iconTheme: ButtonStylePropertyAll(IconThemeData(size: 24, color: Colors.blue)),
  ),
  label: Text(label),
  child: Icon(icon),
);

Now if the item container is square, then it is quite difficult to hit it. You can do it like in other libraries - the entire navigation bar is divided into sections and when you click on it, the item in this section is selected. At the same time, if you click on the section itself, and not on the container, there will be no click or focus effect. It appears only if you click directly on the container. But here you do the implementation as you see fit

Set the expands to true for this case, it will expand the button to fit the remaining space.

I also wanted to use styles to increase the space inside the icon container, without increasing the icon itself. How can this be implemented?

See my example above.

Is it possible to slightly redesign the architecture of the Navigation Bar so that the state is stored inside? Something like this. Then there will be less code involved and it will look more elegant.

I added the option in the latest commit also updated the example code in the docs to use the bar state instead of child state.

[goottime]

Now the alignment parameter does not affect items

[goottime]

Set the expands to true for this case, it will expand the button to fit the remaining space.

I would like to keep the container square with the same aspect ratio. If I set expands to true, the container becomes rectangular

[sunarya-thito]

Set the expands to true for this case, it will expand the button to fit the remaining space.

I would like to keep the container square with the same aspect ratio. If I set expands to true, the container becomes rectangular

I added marginAlignment to the NavigationButton. Set the expands in the NavigationBar to true and marginAlignment in the NavigationButton to Alignment.center