SideNavigationBarItem items are faded

[Deishelon]

Dev environment:

$ flutter --version
Flutter 3.3.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision d9111f6402 (6 days ago) • 2022-10-19 12:27:13 -0700
Engine • revision 3ad69d7be3
Tools • Dart 2.18.2 • DevTools 2.15.0

Lib version:
side_navigation: ^1.0.4

Project: Created a sample flutter project for Web and Linux, added the side bar, and the items (aka SideNavigationBarItem) are faded.

Code:

   @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      body: Row(
        children: [
          SideNavigationBar(
            selectedIndex: _index,
            header: SideNavigationBarHeader(
                image: CircleAvatar(
                  child: Icon(Icons.wallet),
                ),
                title: Text('Test', style: Theme.of(context).textTheme.headline6),
                subtitle: SizedBox.shrink(),
            ),
            footer: const SideNavigationBarFooter(
                label: Text('Footer label')
            ),
            items: const [
              SideNavigationBarItem(
                icon: Icons.dashboard,
                label: 'Dashboard',
              ),
              SideNavigationBarItem(
                icon: Icons.person,
                label: 'Account',
              ),
              SideNavigationBarItem(
                icon: Icons.settings,
                label: 'Settings',
              ),
            ],
            onTap: (index) {
              setState(() {
                _index = index;
              });
            },
          ),
          Expanded(
            child: ListView(
              children: [
                Text('Main body', style: Theme.of(context).textTheme.headline4,),
              ],
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

Result (Web):

Result (Linux):

Any idea why items have a bit of a fade? Anything that I'm missing in the config?

[Deishelon]

NOTE, with dark theme (brightness: Brightness.dark,)
all looks fine, just light version has that fade

[jksevend]

Hey @Deishelon
Thank you very much for your finding and all the additional information you provided.

When the bar is expanded the items you see are pretty much just simple ListTiles which the library populates with data obtained from the SideNavigationBarItem. In the code somewhere is a check to evaluate the current themes brightness to retrieve the color to be used for display unselected items. In your example however both selected and unselected items seem to be a bit faded which confuses me.

I have to check if this is caused by using the ListTile widget because I am thinking for some time now to replace the ListTile with my own widget.

Will let you know as soon as I take a look at it if:

• I can reproduce this (thank you for provided images)
• This is really caused by the ListTile widget

Thank you again!

[jksevend]

Ok @Deishelon
I was able to reproduce this on a windows flutter app. The items are indeed faded out when the brightness is light. After looking at the code a bit more i realized that with the latest 1.0.4 update where support to customize the background color of said items was added - for this the ListTile#tileColor property is used. However after reading the documentation about this value it states:

When the value is null, the tileColor is set to ListTileTheme.tileColor if it's not null and to Colors.transparent if it's null.

So I believe I somehow broke the existing item background color if the user does not provide one by itself (Default case is tileColor = null)

I believe this could be dealt with by replacing the ListTile with a custom widget.
I will handle this bugfix with the next release 1.0.5

In the meantime you can experiment with the SideNavigationBarItemTheme#selectedBackgroundColor and SideNavigationBarItemTheme#unselectedBackgroundColor and maybe provide a little feedback if experimenting with those values helped finding a workaround for this issue - or If my assumption is completely off.

[Deishelon]

Thank you for quick response & your investigations! I will wait for the new release & meanwhile check out your suggestion

[Deishelon]

Thanks for the pointers, I think I found a way to make the side bar look less 'faded'

Apparently it all came down to playing with SideNavigationBarItemTheme::selectedItemColor and SideNavigationBarItemTheme::unselectedItemColor

Here is the result with (brightness=light):

selectedItemColor: Colors.blue[500],
unselectedItemColor: Colors.grey[600],

or:

selectedItemColor: Colors.blue[500],
unselectedItemColor: Colors.grey,  <-- which is your default for light brightness theme

I'd say after looking at this, my suggestion would be maybe in SideNavigationBarItemTheme possibly to change
static final Color defaultSelectedItemColor = Colors.blue[200]!; to Colors.blue[500] (500 seems to look good in both default light & dark)
Curios: if defaultSelectedItemColor should be taken from default theme (i.e primarySwatch ?) so if user has green UI, it will work out of the box ?

unselectedItemColor is up to you, Colors.grey seems to be looking good for both light & dark, but switching it to white for dark brightness is also fine (current behaviour: (brightness == Brightness.light ? Colors.grey : Colors.white))

vs

(I personally prefer the gray for unselected in both light & dark)

[regisandre]

Ok @Deishelon I was able to reproduce this on a windows flutter app. The items are indeed faded out when the brightness is light. After looking at the code a bit more i realized that with the latest 1.0.4 update where support to customize the background color of said items was added - for this the ListTile#tileColor property is used. However after reading the documentation about this value it states:

When the value is null, the tileColor is set to ListTileTheme.tileColor if it's not null and to Colors.transparent if it's null.

So I believe I somehow broke the existing item background color if the user does not provide one by itself (Default case is tileColor = null)

I believe this could be dealt with by replacing the ListTile with a custom widget. I will handle this bugfix with the next release 1.0.5

In the meantime you can experiment with the SideNavigationBarItemTheme#selectedBackgroundColor and SideNavigationBarItemTheme#unselectedBackgroundColor and maybe provide a little feedback if experimenting with those values helped finding a workaround for this issue - or If my assumption is completely off.

Hi,

I experienced the same issue. So I created a custom widget.
Pull request
Here is an example:

/// Return a basic list-tile for now
  return Tooltip(
    waitDuration: const Duration(seconds: 1),
    message: widget.itemData.label,
    child: widget.expanded
      ? InkWell(
        borderRadius: BorderRadius.circular(10),
        onTap: () {
        widget.onTap(widget.index);
        },
        child: Material(
        color: Colors.transparent,
        child: Ink(
          decoration: ShapeDecoration(
          color: _evaluateBackgroundColor(isSelected),
          shape: widget.itemTheme.iconShape,
          ),
          child: Row(
          children: [
            IconButton(
            padding: const EdgeInsets.all(16),
            icon: Icon(
              widget.itemData.icon,
              color: currentColor,
              size: widget.itemTheme.iconSize,
            ),
            onPressed: () {
              widget.onTap(widget.index);
            },
            ),
            Text(widget.itemData.label,
              style: _evaluateTextStyle(currentColor)),
          ],
          ),
        ),
        ),
      )
      : Material(
        color: Colors.transparent,
        child: Ink(
        decoration: ShapeDecoration(
          color: _evaluateBackgroundColor(isSelected),
          shape: widget.itemTheme.iconShape,
        ),
        child: IconButton(
          icon: Icon(
          widget.itemData.icon,
          color: currentColor,
          size: widget.itemTheme.iconSize,
          ),
          onPressed: () {
          widget.onTap(widget.index);
          },
        ),
        ),
      ),
  );