CODEWITHSUNDEEP
fluttertransparentbottombar
mitesh chodvadiya
mitesh chodvadiya

Reputation: 11

How to set bottom navigation bar color transparent like phone x?

Now I am running the latest stable 1.12.13+hotfix.5

I need complete full screen as I phone in an android flutter.

enter image description here

enter image description here

Is it possible in flutter? We can show a lot of the app such as an android setting app, contacts, etc.....

enter image description here

Upvotes: 1

Views: 2673

Answers (3)

Agshin Huseynov
Agshin Huseynov

Reputation: 170

You can do that by adding this code snippet to your build method

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.transparent);

Upvotes: 0

Roman Jaquez
Roman Jaquez

Reputation: 2779

I've tried this but with the App Bar where it is transparent, but the issue is that these widgets still hold their height once placed inside the scaffold. I assume it'll be the same case with the BotttomNavigationBar, so in this case, you can add it to a Stack (this is how I did it), so it does appear on top of your content and it does reflect its transparency, as follows: 

Scaffold(
      body: Container(
          color: Colors.red,
          child: Stack(children: <Widget>[
            Align(
                alignment: Alignment.bottomCenter,
                child: BottomNavigationBar(
                    elevation: 0,
                    backgroundColor: Colors.transparent,
                    items: const <BottomNavigationBarItem>[
                      BottomNavigationBarItem(
                        icon: Icon(Icons.home),
                        title: Text('Home'),
                      ),
                      BottomNavigationBarItem(
                        icon: Icon(Icons.business),
                        title: Text('Business'),
                      ),
                      BottomNavigationBarItem(
                        icon: Icon(Icons.school),
                        title: Text('School'),
                      ),
                    ],
                    currentIndex: 0,
                    selectedItemColor: Colors.amber[800])),
            Center(child: Text('hello'))
          ])))

You will notice that the bottom navigation bar will show red (because it is transparent and will show the parent's color (Container color of red).

Upvotes: -1

Lucas Lima da Silva
Lucas Lima da Silva

Reputation: 118

There's a property in BottomNavigationBar called "backgroundColor", which you can use Colors.transparent to make it like the pictures. But, there are two more tricks:

  • You have to change BottomNavigationBar type to BottomNavigationBar.fixed;
  • You have to change the elevation, since it'll be a large "shadow" where the color should be.

Code example:

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

And if You want to have the shifting effect on icons, declare a color to each one.

Upvotes: -1

Related Questions