Weird block of color in navigation bar with certain colors in Flutter

Question

When I use colors like black87 (first image) or black54, I get a weird line one the nav bar, it doesn't happen with other colors. Also, when I set it to transparent, it just looks the same as the true black version (image 4).

Examples:

Part of the code where I change the colors:

bottomNavigationBar: BottomNavigationBar(
    backgroundColor: Colors.black87,
      items: const <BottomNavigationBarItem>[

        BottomNavigationBarItem(
            icon: Icon(Icons.home,
            color: Colors.greenAccent,
        ),
            title: Text('Home', style: TextStyle(color:Colors.greenAccent)),
        ),

      //same thing for each nav bar item

  type: BottomNavigationBarType.fixed,
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.black87,
      iconSize: 30,
      onTap: _onItemTapped,
      elevation: 7

Well, why does it happen with that color and how do I fix it? — Mina, Apr 03 '21 at 14:53
Looks like a weird rendering artifact. Does it happen on multiple devices? — Edward van Raak, Apr 03 '21 at 15:07
Actually no, it only happens on this Pixel 4XL Android Q @EdwardvanRaak — Mina, Apr 03 '21 at 15:14
Would be interesting to see what happens if you change the color hex values just slightly — Edward van Raak, Apr 03 '21 at 15:17

score 1 · Answer 1 · answered Apr 03 '21 at 15:18

1

Those values of Black are including some opacity. Black54 is black with 54% opacity for example !

I guess you're probably seeing another widget behind your bottom nav bar and it explains the "weird line"

answered Apr 03 '21 at 15:18

FDuhen

4,097
1
15
26

That makes sense, but why doesn't it happen on other devices, or even with lighter colors like grey[900]? – Mina Apr 03 '21 at 15:21

Weird block of color in navigation bar with certain colors in Flutter

1 Answers1