Title Only On Selected Bottom Navigation Bar - flutter

Question

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

Answer 1

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),
),
],
),
),
],
),
);
}
}

Answer 2

U should use this code :
bottomNavigationBar: BottomNavigationBar(
//use both properties
type: BottomNavigationBarType.fixed,
showUnselectedLabels: true,
//-----------
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.icon1),
label:'item 1',
),
BottomNavigationBarItem(
icon: Icon(Icons.icon2),
label: 'item 2',
),
],
)