Reputation: 543

Transparent bottom navigation bar in flutter

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.

Upvotes: 52

Answers (14)

Elle Bishop

Reputation: 461

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

Upvotes: 0

shamnad sherief

Reputation: 638

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

Upvotes: 1

Anas Shoaib

Reputation: 11

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

Upvotes: 1

AmirahmadAdibi

Reputation: 586

2022 solution it's very very simpgle

1 - transparent color 2 - zero elevation

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

Upvotes: 0

Shrawan Thakur

Reputation: 869

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: [

Upvotes: 1

Daniele Dolci

Reputation: 884

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

backgroundColor: const Color(0x00FFFFFF)

0x00 = 0% opacity

Upvotes: 0

Antonin GAVREL

Reputation: 11239

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.

Upvotes: 100

simuhunluo

Reputation: 31

Scaffold(  
  floatingActionButton: _buildTransparentButton()
)

You can try floatingActionButton.

Upvotes: 0

pasanbuddhika

Reputation: 526

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!

Upvotes: 10

JohnJerry

Reputation: 86

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

Upvotes: 5

Bala Kumar

Reputation: 11

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

Upvotes: -4

Kit Gerasimov

Reputation: 9

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

Upvotes: 1

magicleon94

Reputation: 5172

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

Upvotes: 3

soupjake

Reputation: 3449

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

Upvotes: 23

Transparent bottom navigation bar in flutter

Answers (14)

Related Questions