底部导航选项卡中的空间颤动答案

【问题标题】：space in bottom navigation tab flutter底部导航选项卡中的空间颤动
【发布时间】：2021-01-14 08:44:22
【问题描述】：

如何在将飞镖徽标用作浮动操作按钮的地方平均添加空间。 我想在中间使用这个浮动操作按钮，所以它们五个之间会有相同的空间。其他 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'),
      ),
      
    );
      }
    }

【问题讨论】：

标签： flutter icons flutter-dependencies floating-action-button react-navigation-bottom-tab

【解决方案1】：

尝试填充你的飞镖标志：

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

【讨论】：