Title Only On Selected Bottom Navigation Bar

Issue

I am trying to create an effect on the Bottom Navigation Bar such as that of Google Drive. I want the title of the item only to be displayed, on the selected item, and the others to only display the icons.

Also, this bottom bar becomes somewhat transparent, so you can barely see what's under it. Is this possible to do in flutter? I know it is not possible on the main app bar, since there is an issue talking about it here

image for reference

Solution

Hide Title of Unselected BottomNavigationBarItem

You just need to set the show unselected labels property of the bottom navigation bar to false

showUnselectedLabels: false,

Transparent BottomNavigation bar

The Scaffold provides placeholders for both Appbar and BottomNavigation bars. This is how they are placed.

The problem here is that the body does not overlap the Appbar or the BottomNavigation bar, and thus even if you give transparent background it would appear to do nothing.

A workaround would be to put the Body, AppBar and BottomNavigationBar inside a stack and position the AppBar and BottomNavigationBar appropriately.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            color: Colors.green, // Content of body here
          ),
          Positioned(
            left: 0,
            right: 0,
            top: 0,
            child: AppBar(
              elevation: 0,
              backgroundColor: Colors.indigo.withAlpha(80),
              title: Text('Some Text'),
            ),
          ),
          Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            child: BottomNavigationBar(
              elevation: 0,
              showUnselectedLabels: false,
              backgroundColor: Colors.red.withAlpha(80),
              items: [
                BottomNavigationBarItem(
                  title: Text('A'),
                  icon: Icon(Icons.add),
                ),
                BottomNavigationBarItem(
                  title: Text('B'),
                  icon: Icon(Icons.remove),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Answered By - Ajil O.