App bar is too big and the icons don't fit - flutter

Question

I am trying to resize the app bar but no change to make the width perfect for the icons to fit.
This is the code that I am using for it
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, -50),
child: Container(
height: 82,
margin: EdgeInsets.only(left: 20, right: 20),
child: ClipRRect(
borderRadius: BorderRadius.all(
Radius.circular(40),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
BubbleBottomBar(
opacity: 0.2,
backgroundColor: Colors.white10,
borderRadius:
BorderRadius.vertical(top: Radius.circular(80.0)),
currentIndex: currentIndex,
hasInk: true,
inkColor: Colors.black12,
hasNotch: true,
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()),
);
},
elevation: 100,
items: <BubbleBottomBarItem>[
BubbleBottomBarItem(
backgroundColor: Colors.blue,
icon: Icon(
Icons.dashboard,
color: Colors.black,
size: 20,
),
activeIcon: Icon(Icons.dashboard,
color: Colors.blue, size: 20),
title: Text(
"Home",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 15),
),
),
BubbleBottomBarItem(
backgroundColor: Colors.red,
icon: Icon(Icons.favorite_border,
color: Colors.black, size: 20),
activeIcon: Icon(Icons.dashboard,
color: Colors.red, size: 20),
title: Text("Saved")),
BubbleBottomBarItem(
backgroundColor: Colors.red,
icon: Icon(Icons.whatshot,
color: Colors.black, size: 20),
activeIcon: Icon(Icons.dashboard,
color: Colors.red, size: 20),
title: Text("Search")),
BubbleBottomBarItem(
backgroundColor: Colors.red,
icon: Icon(Icons.send,
color: Colors.black, size: 20),
activeIcon: Icon(Icons.dashboard,
color: Colors.red, size: 20),
title: Text("Messages")),
]),
],
))));
}
}
Any idea what I should change? the height of the container ? the border radius? It's about the elevation? This app bar is only on my homepage.
[1]: https://i.stack.imgur.com/ZDjNv.png

Answer 1

I would say to remove the Column, the height of the container, and change the margin to all :
margin: EdgeInsets.all(20),
If you need to align some stuff :
How to align single widgets in Flutter?
EDIT :
Using the example from the package (bubble_bottom_bar) works pretty well :
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
backgroundColor: Colors.red,
bottomNavigationBar: BarDetail(),
),
);
}
}
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 BubbleBottomBar(
// backgroundColor: Colors.red,
opacity: 0.2,
currentIndex: currentIndex,
onTap: changePage,
borderRadius: BorderRadius.vertical(top: Radius.circular(50)),
elevation: 8,
hasNotch: true,
hasInk: true,
inkColor: Colors.black12,
items: <BubbleBottomBarItem>[
BubbleBottomBarItem(
backgroundColor: Colors.red,
icon: Icon(
Icons.dashboard,
color: Colors.black,
),
activeIcon: Icon(
Icons.dashboard,
color: Colors.red,
),
title: Text("Home")),
BubbleBottomBarItem(
backgroundColor: Colors.deepPurple,
icon: Icon(
Icons.access_time,
color: Colors.black,
),
activeIcon: Icon(
Icons.access_time,
color: Colors.deepPurple,
),
title: Text("Logs")),
BubbleBottomBarItem(
backgroundColor: Colors.indigo,
icon: Icon(
Icons.folder_open,
color: Colors.black,
),
activeIcon: Icon(
Icons.folder_open,
color: Colors.indigo,
),
title: Text("Folders")),
BubbleBottomBarItem(
backgroundColor: Colors.green,
icon: Icon(
Icons.menu,
color: Colors.black,
),
activeIcon: Icon(
Icons.menu,
color: Colors.green,
),
title: Text("Menu"))
],
);
}
}