Bubble Bottom Bar Flutter
Tags: flutter, dart, tutorial, beginners
Published: 2020-08-09 03:31:14

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:
{% youtube kzS4uvlR4kU %}

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

![Customizable Bottom Navigation Bar](https://dev-to-uploads.s3.amazonaws.com/i/94wk5d3n8yhcb8zzds9w.gif)

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](https://pub.dev/packages/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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xrem4w20spteesogwdul.jpg)
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...
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/73dcbcfxba0exrd1bncv.png)

__Full Source Code:__
{% gist https://gist.github.com/Maadhav/087a446bff600c9f0d91e3da66c783a4 file=home.dart %}