Transparent bottom navigation bar in flutter

Question

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

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.

I think this might be what you need: https://stackoverflow.com/questions/49307858/style-bottomnavigationbar-in-flutter — magicleon94, Jan 25 '19 at 14:23
i have tried it just now, but it's not working. Can you please upvote this question? i am new to stack-overflow and people are downvoting. — DaIOSGuy, Jan 25 '19 at 14:27
Can you show you using the `Theme` method @magicleon94 linked to just so we can see possibly why it's not working? — soupjake, Jan 25 '19 at 14:38
Right now I can't since I'm at work. If I could, I would've explained how to adapt the linked question to your need. As for now, I've just that the linked answer solves the background need for a NavigationBar. — magicleon94, Jan 25 '19 at 14:41
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 — magicleon94, Jan 25 '19 at 14:44
@SnakeyHips Here is output for that answer with transparent background https://imgur.com/a/0DzIfXb. Maybe because bottomNavigationbar don't have anything below it that why we aren't seeing anything. — DaIOSGuy, Jan 25 '19 at 14:44
@magicleon94 That's interesting, so you are saying i should put stack as child for column? — DaIOSGuy, Jan 25 '19 at 14:46
Nope, I'm saying you use a `Stack` with two children: an image (bottom layer) and a column (top layer) made as I wrote before — magicleon94, Jan 25 '19 at 14:49
In a bit I'll see if I can have a quick try and provide you a working solution — magicleon94, Jan 25 '19 at 14:52

Antonin GAVREL · Answer 1 · 2021-05-06T13:50:02.177

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

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).

Full code example:

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.

This should be the official accepted answer! It's so simple. Instead of using a double or triple scaffold lol — Peter Poliwoda, Mar 14 '21 at 10:38
This is the best answer in my opinion. Also, if you have SafeArea Widget in your widget tree, you might have to set bottom to false. (SafeArea( bottom: false, child:...) — goldensoju, Mar 29 '21 at 09:01
also add `type: BottomNavigationBarType.fixed,` in short info above the code, tnx — Mamrezo, Dec 30 '21 at 08:50

soupjake · Accepted Answer · 2019-01-25T15:04:09.000

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

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: () {},),
                ],)),

Thanks a lot. Saved my day. can you help out with another question? I want ListItem to occupy full available height and width but it doesn't seems to work work with Expanded. — DaIOSGuy, Jan 25 '19 at 15:08
No problem but I imagine you'd want to use something else other than a `ListTile` as they have a fixed height afaik. — soupjake, Jan 25 '19 at 15:18
Which other collection structure provides such capabilities? — DaIOSGuy, Jan 25 '19 at 15:19
A `ListView` doesn't HAVE to consist of `ListTile`s, the children can be any kind of Widget so I imagine you could just use a `Row` or create your own version of a `ListTile`. — soupjake, Jan 25 '19 at 15:26

score 9 · Answer 3 · answered Apr 29 '20 at 08:32

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!

score 5 · Answer 4 · answered Jun 28 '19 at 13:21

5

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

answered Jun 28 '19 at 13:21

JohnJerry

86
2
9

magicleon94 · Answer 5 · 2019-01-25T16:26:33.513

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:

Bonus

You can achieve full screen by calling

SystemChrome.setEnabledSystemUIOverlays([]);

source: here

Thanks a lot. Saved my day. can you help out with another question? I want ListItem to occupy full available height and width but it doesn't seems to work work with Expanded. — DaIOSGuy, Jan 25 '19 at 15:10
Oh, no I don't think so. I was slower, no problem, I'll gradly take just an upvote as a consolation prize :) — magicleon94, Jan 25 '19 at 15:14
Haha sorry @magicleon94! Does your method still have the elevation shadow on the navbar? — soupjake, Jan 25 '19 at 15:16
Oh sorry yeah it has, I hadn't noticed since I used a dark image! — magicleon94, Jan 25 '19 at 15:20
Ah shame. At least you can still kinda make your own navbar. — soupjake, Jan 25 '19 at 15:21
I have updated the answer with a non-shadowed `NavigationBar`-like layout. It has buttons and taps, on the bottom, like a `NavigationBar`, even if it's still a normal `Row`. This should be what you're asking for — magicleon94, Jan 25 '19 at 16:12

Kit Gerasimov · Answer 6 · 2019-02-20T18:56:16.587

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

score 1 · Answer 7 · answered Jul 26 '22 at 08:23

It's pretty simple with BottomNavigationBar.

Just add these attributes only in BottomNavigationBar,

backgroundColor: Color(0x00ffffff),
elevation: 0,
type: BottomNavigationBarType.fixed,

After adding these my code looks like this.

BottomNavigationBar(
selectedItemColor: MyTheme.primary_color,
unselectedItemColor: Color.fromRGBO(153, 153, 153, 1),
backgroundColor: Color(0x00ffffff),
elevation: 0,
type: BottomNavigationBarType.fixed,
currentIndex: _currentIndex,
onTap: (index) {
_currentIndex = index;                  
},
items: [

score 1 · Answer 8 · edited Apr 28 '23 at 18:04

Well, good news for you, I found the solution, and it's very easy!

 Widget build(BuildContext context) {
// Set Android Bar Transparent
SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
SystemChrome.setSystemUIOverlayStyle(
  const SystemUiOverlayStyle(
    //NavigationBar
    systemNavigationBarColor: Colors.transparent,
    systemNavigationBarContrastEnforced: false,
    systemNavigationBarIconBrightness: Brightness.dark,
    //StatusBar
    // systemStatusBarContrastEnforced: false,
    statusBarColor: Colors.transparent,
    statusBarIconBrightness: Brightness.dark,
  ),
);

score 0 · Answer 9 · answered Jan 02 '21 at 18:55

0

Scaffold(  
  floatingActionButton: _buildTransparentButton()
)

You can try floatingActionButton.

answered Jan 02 '21 at 18:55

simuhunluo

31
1

score 0 · Answer 10 · answered Feb 03 '22 at 11:23

0

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

backgroundColor: const Color(0x00FFFFFF)

0x00 = 0% opacity

answered Feb 03 '22 at 11:23

Daniele Dolci

884
1
9
22

score 0 · Answer 11 · answered Nov 14 '22 at 18:31

0

2022 solution it's very very simpgle

1 - transparent color 2 - zero elevation

BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          backgroundColor: Colors.transparent,
          elevation: 0,

answered Nov 14 '22 at 18:31

AmirahmadAdibi

358
3
9

score 0 · Answer 12 · answered Jun 08 '23 at 16:52

Make this three changes:-

use the extendBody property of the Scaffold widget and set it to true

set the backgrund color of BottomNavigationBar to transparent backgroundColor: Colors.transparent

Set elevation to zero to remove the shadow elevation: 0,

return MaterialApp(
      home: Scaffold(
        extendBody: true,
        bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.explore),
            label: 'Explore',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.redAccent,
//         onTap: _onItemTapped,
      ),
      ),
    );

Elle Bishop · Answer 13 · 2023-07-24T16:27:38.730

How to customize BottomNavigationBar in 2023:

bottomNavigationBar: BottomNavigationBar(
    selectedItemColor: Colors.yellowAccent,
    unselectedItemColor: kAccentColor,
    backgroundColor: kMainColor,
    elevation: 0,
    type: BottomNavigationBarType.fixed,
    items: [
      BottomNavigationBarItem(
        icon: Icon(
            Icons.one_x_mobiledata,
          color: kAccentColor,
        ),
        label: 'Selected',
      ),
      BottomNavigationBarItem(
        icon: Icon(
          Icons.two_k,
          color: kAccentColor,
        ),
        label: 'Unselected',
      ),
      
    ],
  ),

const kMainColor = Color(0xff071330);

const kAccentColor = Color(0xffC3CEDA);

score -4 · Answer 14 · edited Apr 09 '19 at 11:21

-4

Found a solution for transparent BottomNavigationBar.

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

Now You Get A Transparent BottomNavigationBar

edited Apr 09 '19 at 11:21

SaschaM78

4,376
4
33
42

answered Apr 09 '19 at 10:19

Bala Kumar

11
1

1

Please, do not modify the flutter framework itself or you will have issues when upgrading. – hawkbee Apr 20 '20 at 16:08

Transparent bottom navigation bar in flutter

14 Answers14

Linked