space in bottom navigation tab flutter - flutter

Question

How can I add space equally where I use the dart logo as a floating action button.
I want to use this floating action button in the center so there will be the same space between the five of them. The other 4 icons are the bottom navigation bar item.
Can anyone please help me to find out the solution to this problem?
Here is my code:
import 'package:convex_bottom_bar/convex_bottom_bar.dart';
import 'package:eye_buddy/screen/homepage/pages/profile.dart';
import 'package:eye_buddy/screen/homepage/pages/settings.dart';
import 'package:flutter/material.dart';
import 'chat.dart';
import 'dashboard.dart';
import 'package:eye_buddy/util/colorconfig.dart';
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
int currentTab = 0; // to keep track of active tab index
final List<Widget> screens = [
Dashboard(),
Chat(),
Profile(),
Settings(),
]; // to store nested tabs
final PageStorageBucket bucket = PageStorageBucket();
Widget currentScreen = Dashboard(); // Our first view in viewport
#override
Widget build(BuildContext context) {
return Scaffold(
body: PageStorage(
child: currentScreen,
bucket: bucket,
),
floatingActionButton: GestureDetector(
onTap: () {
// Do Something
},
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/icon/eye.png'),
),
// borderRadius: BorderRadius.circular(0.50),
),
width: 110,
height: 94.68,
),
),
// FloatingActionButton(
// elevation: 0.0,
// child: Image.asset("assets/icon/eye.png"),
// backgroundColor: Colors.transparent,
// onPressed: () {},
// ),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: ConvexAppBar(
backgroundColor: colorFromHex('#181D3D'),
style: TabStyle.react,
items: [
TabItem(icon: Icons.search),
TabItem(icon: Icons.bubble_chart),
TabItem(icon: Icons.assessment),
TabItem(icon: Icons.baby_changing_station),
],
initialActiveIndex: 1 /*optional*/,
onTap: (int i) => print('click index=$i'),
),
);
}
}

Answer 1

Try padding your dart logo :
Container(
padding: EdgeInsets.fromLTRB(16, 16, 16, 16),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/icon/eye.png'),
),
// borderRadius: BorderRadius.circular(0.50),
),
If till not works, then :
return BottomAppBar(
color: Colors.white,
child: Container(
height: 64,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [--your nav icons---],
),
),
shape: CircularNotchedRectangle(),
clipBehavior: Clip.antiAlias,
notchMargin: 5.0,
);