Bubble Bottom Bar Flutter

Hello guys, this blog post is a part of a video series we are starting to upload on YouTube.
Flutter News App (Frontend to Backend)

Here is the video:

In this blog post, we will have a look at a package that allows us to create a customizable bottom navigation bar.

So now first open our project and create a home.dart file.

Now let's create a StateFull Widget named as Home().

Home would return a Saffold().

In the Scaffold there is a parameter, bottomNavigationBar:
Instead of returning the default BottomNavigationBar widget which is provided by Flutter, we would use a package, bubble_bottom_bar.

Add this to your package's pubspec.yaml file:

...
dependencies:
  bubble_bottom_bar: ^1.2.0

Now in your Dart code, you can use:

import 'package:bubble_bottom_bar/bubble_bottom_bar.dart';

Now in the bottomNavigationBar: pass BubbleBottomBar()

As in our app, we don't need any background shade behind the selected item, we would keep the opacity to 0.

bottomNavigationBar: BubbleBottomBar(
        opacity: 0,
        ...
      ),

Now we also need to declare a variable in which we will be storing the current index.

int currentIndex = 0;
.
.
currentIndex: currentIndex,

Now in the onTap() parameter, we need to pass a function that would update the currentIndex.

  void changePage(int index){
    setState(() {
      currentIndex = index;
    });
  }
.
.
onTap: changePage,

Now the most important thing is the items: parameter.

As seen in the image above the items needs a List of BubbleBottomBarItems.

So, our first item:

BubbleBottomBarItem(
              backgroundColor: Colors.black,
              icon: SvgPicture.asset(
                'assets/icons/home.svg',
                width: 21,
                color: Colors.black54,
                height: 21,
              ),
              activeIcon: SvgPicture.asset(
                'assets/icons/home.svg',
                width: 21,
                color: Colors.black,
                height: 21,
              ),
              title: Text("Home")),

Three out of the four items in our app are similar, but the fourth item does not need an activeIcon as its the image of the user. So for the fourth item.

BubbleBottomBarItem(
              backgroundColor: Colors.black,
              icon: Container(
                height: 24,
                width: 24,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  image: DecorationImage(image: AssetImage('assets/user.png')),
                  boxShadow: [
                    BoxShadow(
                        color: Color(0x5c000000),
                        offset: Offset(0, 1),
                        blurRadius: 5)
                  ],
                ),
              ),
              title: Text("Profile")),

Now lets see the final output...

Full Source Code:

Comments

[Manyong'oments]

Looks great. Does the same principle apply to the convex bottom bars?

[Maadhav]

If you meant to ask about this: pub.dev/packages/convex_bottom_bar.
Then you should just follow the docs in there.
The basic implementation is as follows:

bottomNavigationBar: ConvexAppBar(
    items: [
      TabItem(icon: Icons.home, title: 'Home'),
      TabItem(icon: Icons.map, title: 'Discovery'),
      TabItem(icon: Icons.add, title: 'Add'),
      TabItem(icon: Icons.message, title: 'Message'),
      TabItem(icon: Icons.people, title: 'Profile'),
    ],
    initialActiveIndex: 2,//optional, default as 0
    onTap: (int i) => print('click index=$i'),
  )

[Manyong'oments]

Thanks