如何使用居中按钮构建自定义底部导航栏？答案

【问题标题】：How to build a custom bottomNavigationBar in flutter with a centered button?如何使用居中按钮构建自定义底部导航栏？
【发布时间】：2021-02-20 15:17:31
【问题描述】：

我做了很多尝试来构建这个 bottomNavigationBar 与曲线和 图标之间的空间。想不通。

【问题讨论】：

标签： flutter flutter-widget flutter-bottomnavigation

【解决方案1】：

 floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
        elevation: 2.0,
      ),
      bottomNavigationBar: BottomAppBar(
        clipBehavior: Clip.antiAlias,
        notchMargin: 5,
        shape: CircularNotchedRectangle(),
        child: Wrap(
          children: [
            BottomNavigationBar(
              type: BottomNavigationBarType.fixed,
              currentIndex: 0,
              onTap: (int index) {},
              items: [
                BottomNavigationBarItem(icon: Icon(Icons.radio), label: 'A'),
                BottomNavigationBarItem(icon: Icon(Icons.radio), label: 'A'),
                BottomNavigationBarItem(icon: Icon(Icons.radio), label: 'A'),
                BottomNavigationBarItem(icon: Icon(Icons.radio), label: 'A'),
              ],
            ),
          ],
        ),
      ),

检查此代码。

【讨论】：

完美，如何在按钮上方制作凹口？？如您所见，它应该在顶部并显示一条曲线！

【解决方案2】：

看看这个包：convex_bottom_bar。

可以通过编写一个扩展 NotchedShape 的类并实现包含缺口曲线逻辑的 getOuterPath 来自定义缺口形状。检查这个以了解确切的实现convex_shape.dart

在底部有一个绿色图标：

import 'package:convex_bottom_bar/convex_bottom_bar.dart';

Scaffold(
  bottomNavigationBar: ConvexAppBar(
    items: [
      TabItem(icon: Icons.home, title: 'Left'),
      TabItem(icon: new Icon(Icons.add, color: Colors.green,), activeIcon: new Icon(Icons.add, color: Colors.green,) title: 'Middle'),
      TabItem(icon: Icons.message, title: 'Right'),
    ],
    initialActiveIndex: 2,//optional, default as 0
    onTap: (int i) => print('click index=$i'),
  )
);

【讨论】：

问题是，无论是否激活，都不能为中间设置默认颜色！我需要中间按钮一直保持绿色
为什么不指定图标的颜色并在中间选项卡的tabItem中设置该图标。要在活动或不活动时保持相同，只需传递与 activeIcon 相同的图标
更新了一个 sn-p。希望这是你所期待的。请注意，根据包实现，默认情况下activeIcon 等于icon（如果未提供）。所以你应该能够在没有activeIcon的情况下实现你想要的（固定的绿色）