How to Create Transparent Bottom Navigation Bar In Flutter??

4 min read
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:

Transparent Bottom Navigation Bar
Transparent Bottom Navigation Bar

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:

transparent bottom navigation
transparent bottom navigation

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.

Leave a Reply