CODEWITHSUNDEEP
androidflutterandroid-studiodartflutter-bottomnavigation
Mina
Mina

Reputation: 315

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

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:

Black87

Bluegrey

Yellow

Black

Red

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

Upvotes: 1

Views: 159

Answers (1)

FDuhen
FDuhen

Reputation: 4826

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"

Upvotes: 1

Related Questions