BottomBar项目无法对齐

如何解决BottomBar项目无法对齐

我正在制作底部的应用程序栏，但样式上有问题。栏中的项目没有居中和对齐。我知道如何实现这种外观：https://cdn.dribbble.com/users/195056/screenshots/4029397/bottom_bar.png

这就是我所拥有的：

这是我正在使用的代码：

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,activeIcon: Icon(
                            Icons.dashboard,title: Text("Saved")),icon:
                              Icon(Icons.search,title: Text("Search")),icon: Icon(Icons.send,title: Text("Messages")),]))));
  }
}

我应该改变什么？

解决方法

用一列包裹您的BubbleBar，并设置对齐方式以使其居中

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