BottomBar items aren't align flutter

Question

I am making the bottom app bar and I have a problem with the style of it. The items in the bar aren't centered and align. Any idea how I can achieve this look : https://cdn.dribbble.com/users/195056/screenshots/4029397/bottom_bar.png

This is what I have:

This is the code I am using :

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:tariffo/Detail.dart';
import 'package:tariffo/favoriteProviders.dart';
import 'package:tariffo/messages_list.dart';
import 'package:bubble_bottom_bar/bubble_bottom_bar.dart';
import 'HomePage.dart';

class BarDetail extends StatefulWidget {
  @override
  _BarDetailState createState() => _BarDetailState();
}

class _BarDetailState extends State<BarDetail> {
  int currentIndex;
  @override
  void initState() {
    super.initState();
    currentIndex = 0;
  }

  changePage(int index) {
    setState(() {
      currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Transform.translate(
        offset: Offset(0.0, -10),
        child: Container(
            height: 50,
            margin: EdgeInsets.only(left: 20, right: 20),
            child: ClipRRect(
                borderRadius: BorderRadius.all(
                  Radius.circular(80),
                ),
                child: BubbleBottomBar(
                    opacity: 0.2,
                    backgroundColor: Colors.white30,
                    borderRadius:
                        BorderRadius.vertical(top: Radius.circular(80.0)),
                    currentIndex: currentIndex,
                    hasInk: true,
                    inkColor: Colors.black12,
                    hasNotch: true,
                    fabLocation: BubbleBottomBarFabLocation.end,
                    onTap: (index) {
                      if (index == 1)
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => FavoriteProviders()),
                        );
                      if (index == 2)
                        Navigator.push(
                          context,
                          MaterialPageRoute(builder: (context) => Searchbar()),
                        );
                      if (index == 3)
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => MessageList()),
                        );
                    },
                    items: <BubbleBottomBarItem>[
                      BubbleBottomBarItem(
                          backgroundColor: Colors.red,
                          icon: Icon(
                            Icons.dashboard,
                            color: Colors.black,
                            size: 30,
                          ),
                          activeIcon: Icon(Icons.dashboard,
                              color: Colors.red, size: 30),
                          title: Text("Home")),
                      BubbleBottomBarItem(
                          backgroundColor: Colors.red,
                          icon: Icon(Icons.favorite_border,
                              color: Colors.black, size: 30),
                          activeIcon: Icon(
                            Icons.dashboard,
                            color: Colors.red,
                            size: 30,
                          ),
                          title: Text("Saved")),
                      BubbleBottomBarItem(
                          backgroundColor: Colors.red,
                          icon:
                              Icon(Icons.search, color: Colors.black, size: 30),
                          activeIcon: Icon(Icons.dashboard,
                              color: Colors.red, size: 30),
                          title: Text("Search")),
                      BubbleBottomBarItem(
                          backgroundColor: Colors.red,
                          icon: Icon(Icons.send, color: Colors.black, size: 30),
                          activeIcon: Icon(Icons.dashboard,
                              color: Colors.red, size: 30),
                          title: Text("Messages")),
                    ]))));
  }
}

What I should change?

Answer 1

Wrap your BubbleBar with a column and set alignment to center likr this

child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                   BubbleBottomBar(..)
                        ])