底部導航選項卡中的空間 flutter

Question

我如何在使用 dart 徽標作為浮動操作按鈕的地方平均添加空間。 我想在中央使用這個浮動操作按鈕，這樣五個按鈕之間的空間就會相同。 其他 4 個圖標是底部導航欄項目。 任何人都可以幫我找出解決這個問題的方法嗎？

這是我的代碼：

  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

嘗試填充您的 dart 徽標：

      Container(
          padding: EdgeInsets.fromLTRB(16, 16, 16, 16),
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/icon/eye.png'),
            ),
            // borderRadius: BorderRadius.circular(0.50),
          ),

如果直到不起作用，那么：

         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,
              );