Transparent bottom navigation bar in flutter

i am new to flutter. I am trying to achieve this UI

[![screenshot][1]][1]

I haven't found any use full solution to create transparent bottom navigation bar in flutter.


I have tried using

```
BottomNavigationBarItem(
backgroundColor: Colors.transparent,
icon: e,
activeIcon: _activeIcons[_index],
title: Text(
title[_index],
style: AppStyle.tabBarItem,
),
)
```

But this doesn't seems to work. Please help.


[1]:

My attempt using the Stack method discussed in the comments:

Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/background.jpg'),
fit: BoxFit.cover),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Theme(
data: Theme.of(context)
.copyWith(canvasColor: Colors.transparent),
child: BottomNavigationBar(
currentIndex: 0,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text('Home'))
],
))),
],
),
),
);
}

[![transparent bottom nav][1]][1]

Edit: The `BottomNavigationBar` has an inbuilt elevation of `8.0` which you can't change and is causing that weird shadow effect. If you want to remove it, you could just implement your own kind of bottom bar like so:

Align(
alignment: Alignment.bottomCenter,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
IconButton(icon: Icon(Icons.home, color: Theme.of(context).accentColor,), onPressed: () {},),
IconButton(icon: Icon(Icons.home, color: Theme.of(context).accentColor,), onPressed: () {},),
IconButton(icon: Icon(Icons.home, color: Theme.of(context).accentColor,), onPressed: () {},),
],)),

[![transparent nav demo 2][2]][2]


[1]:

[2]:

Here's my approach:

Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage("https://cdn.pixabay.com/photo/2018/09/17/16/24/cat-3684184_960_720.jpg")
)
),
),
Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Theme(
data: Theme.of(context).copyWith(canvasColor: Colors.transparent),
child: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.photo_camera), title: Text("Test")),
BottomNavigationBarItem(
icon: Icon(Icons.photo_camera), title: Text("Test")),
],
),
)
],
)
],
);

This will fill the entire screen (the image is purely trivial but you get the thing) with a background image (bottom layer) and a bottom navigation bar inside a column whose content is aligned to `end`.

For a completion purpose I'll paste below the explaination I gave into the comments of the original question.

> Thinking deeper, I'm realizing that this would not deliever the same
> result as the desired, since the image of the two girls would be above
> the NavigationBar. I suggest to use a Stack with the two girls image
> as the bottom layer (bottom of the stack) and a full screen Column
> with MainAxisSize set to MainAxisSize.max and MainAxisAlignment set to
> MainAxisAlignment.end. I could write it in an answer but I cannot test
> it right now, so I prefer to write a comment instead. Hope it helps

**UPDATE**
The previous solution still had the navbar shadow.
This build method for the screen (the widget) does not, since I've implemented my own `BottomNavigationBar` with a `Row`:

@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
"https://media.idownloadblog.com/wp-content/uploads/2016/04/macinmac-portrat-splash.jpg"))),
),
Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
GestureDetector(
onTap: () {
print("Tap!");
},
child: Icon(
Icons.photo_camera,
size: 50,
)),
GestureDetector(
onTap: () {
print("Tap!");
},
child: Icon(
Icons.photo_camera,
size: 50,
)),
GestureDetector(
onTap: () {
print("Tap!");
},
child: Icon(
Icons.photo_camera,
size: 50,
)),
GestureDetector(
onTap: () {
print("Tap!");
},
child: Icon(
Icons.photo_camera,
size: 50,
)),
],
)
],
)
],
);

Here's a screenshot from my phone:

[![Example][1]][1]

**Bonus**

You can achieve full screen by calling

SystemChrome.setEnabledSystemUIOverlays([]);

source: [here][2]


[1]:

[To see links please register here]

[2]:

[To see links please register here]

My solution on high level:

```
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
SingleChildScrollView(
child: Center(
child: Column(
children: <Widget>[
child(),
child(),
child(),
child(),
child(),
],
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Opacity(opacity: showBottomBar ? 1 : 0, child: bottomBar()),
)
],
),
);
```
the idea being a stack with a scrollable view on the lower level and an aligned custom bottom bar on top of it

Found a solution for transparent `BottomNavigationBar`.

1. Open the the source code of `BottomNavigationBar` using the shortcut **Ctrl+B**.
2. Scroll through the file you will find a method named `Widget build`.
3. On that you can find a `Stack widget` where you can find a material widget.
4. Add `shadowColor:Colors.transparent`

Now You Get A Transparent `BottomNavigationBar`


[1]:

In the new Version of flutter(1.2.1) there is a parameter for elevation, you can just put
**elevation: 0.0**

This is how I achieve this
```
return Scaffold(
body: Builder(
builder: (context) => Container(
decoration: bgAuthenticationDecoration(),
child: _HomeBodyWidget(_currentIndex),
),
),
bottomNavigationBar: BottomNavigationBar(items: <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.home,),title: Container()),
BottomNavigationBarItem(icon: Icon(Icons.message),title: Container()),
BottomNavigationBarItem(icon: Icon(Icons.list),title: Container()),
BottomNavigationBarItem(icon: Icon(Icons.favorite),title: Container()),
BottomNavigationBarItem(icon: Icon(Icons.supervised_user_circle),title: Container()),
],
backgroundColor:Colors.black.withOpacity(0.1),),
extendBodyBehindAppBar: true,
extendBody: true,
);
```
Then you have to set the canvas color to transparent in app theme.
```
canvasColor: Colors.transparent
```

Hope this will help.

Happy coding!

Scaffold(
floatingActionButton: _buildTransparentButton()
)

You can try floatingActionButton.

None of the given answers worked for me and I figured out something very important: you have to add the property [```extendBody: true```](

[To see links please register here]

)

> If true, and bottomNavigationBar or persistentFooterButtons is specified, **then the body extends to the bottom of the Scaffold, instead of only extending to the top of the bottomNavigationBar or the persistentFooterButtons.**
>
> This property is often useful when the bottomNavigationBar has a non-rectangular shape, like CircularNotchedRectangle, which adds a FloatingActionButton sized notch to the top edge of the bar. In this case specifying extendBody: true ensures that that scaffold's body will be visible through the bottom navigation bar's notch

along with ```backgroundColor: Color(0x00ffffff),``` .

NB: color with 0x is hexadecimal ARGB value (0xAARRGGBB), so 00 before the ffffff means maximum transparency, you can play to increase opacity by increasing the 00 up to ff (255 in hexadecimal).

[![enter image description here][1]][1]

Full code example:

```dart
import 'package:flutter/material.dart';

class NavigationBar extends StatefulWidget {
static int _selectedIndex = 0;

@override
NavigationBarState createState() => NavigationBarState();
}

class NavigationBarState extends State<NavigationBar> {
void _onItemTapped(int index) {
setState(() {
NavigationBar._selectedIndex = index;
});
}

@override
Widget build(BuildContext context) {

return BottomNavigationBar(
elevation: 0, // to get rid of the shadow
currentIndex: NavigationBar._selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
backgroundColor: Color(0x00ffffff), // transparent, you could use 0x44aaaaff to make it slightly less transparent with a blue hue.
type: BottomNavigationBarType.fixed,
unselectedItemColor: Colors.blue,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.grade),
label: 'Level',
),
BottomNavigationBarItem(
icon: Icon(Icons.notifications),
label: 'Notification',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'Achievements',
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Settings',
),
]
);
}

@override
Size get preferredSize => const Size.fromHeight(kToolbarHeight);
}
```

Then where your have the MaterialApp return:
```
return MaterialApp(
home: Scaffold(
extendBody: true, // very important as noted
bottomNavigationBar: NavigationBar(), // here you make use of the transparent bar.
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: ExactAssetImage("assets/background.png"), // because if you want a transparent navigation bar I assume that you have either a background image or a background color. You need to add the image you want and also authorize it in pubspec.yaml
fit: BoxFit.fill
),
),
child: Container(
// the body of your app
),
),
),
);
}
}
```

I hope it will help.

[1]:

I solved the problem by assigning transparency to the background color:

`backgroundColor: const Color(0x00FFFFFF)`

0x00 = 0% opacity