How to Create Transparent Bottom Navigation Bar In Flutter??

How to Create Transparent Bottom Navigation Bar In Flutter??

Bottom Navigation Bar always stays at the bottom of your mobile application and provides navigation between the views of the mobile application. So in today’s article, we will go through how to create Transparent Bottom Navigation Bar in flutter.

Let’s jump right away into learning!!

How to create a transparent bottom navigation bar in flutter??

In order to create a transparent bottom navigation bar consider a code snippet like the below:

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

we will get output like a below:

Hide Statusbar

void main() {
  SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
  runApp(MaterialApp(
     home: MyApp()));
}

BottomNavigationBar transparent

BottomNavigationBar(
  backgroundColor: Colors.black.withOpacity(0.1), //here set your transparent level
  elevation: 0,
);

The complete code snippet will look like the below:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      children: <Widget>[
        Container(
         child: Image.network("https://picsum.photos/660/1420"),
        ),
        Align(
            alignment: Alignment.bottomCenter,
            child: BottomNavigationBar(
              backgroundColor: Colors.black.withOpacity(0.1), //here set your transparent level
              elevation: 0,
              selectedItemColor:  Colors.blueAccent,
              unselectedItemColor: Colors.white,
              type: BottomNavigationBarType.fixed,
              currentIndex: 0,
              showSelectedLabels: false,
              showUnselectedLabels: false,
              items: [
                BottomNavigationBarItem(
                    icon: Icon(Icons.notifications_none, size: 30), title: Text('Notifications')),
                BottomNavigationBarItem(
                    icon: Icon(Icons.search, size: 30), title: Text('Search')),
                BottomNavigationBarItem(
                    icon: Icon(Icons.perm_identity, size: 30), title: Text('User'))
              ],
            )),
      ],
    ),
  );
}

So we will get output as shown in the below example:

You could also try with the below code snippet as below:

Scaffold(  
  floatingActionButton: _buildTransparentButton()
)

Stay tuned for more articles like bottom navigation bar with rounded corners, flutter bottom navigation bar with routes, transparent system navigation bar, flutter animated bottom navigation bar, transparent bottom navigation bar in android.

Conclusion:

Thank you for reading, Don’t forget to drop feedback in the comments to keep the enthusiasm going on 🙂

So Today, we have been through how to create a transparent bottom navigation bar in flutter.

Keep Learning !!! Keep Fluttering !!!

Do let us know in the comments if you are still confused in flutter!! we are here to help you with your Flutter Development Problems.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.