space in bottom navigation tab 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,
              );