如何使用居中按钮在 flutter 中构建自定义 bottomNavigationBar？

Question

我已经尝试了很多来构建这个 bottomNavigationBar，图标之间有曲线和 space 。想不通。

Answer 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'),
              ],
            ),
          ],
        ),
      ),

检查此代码。

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

如何使用居中按钮在 flutter 中构建自定义 bottomNavigationBar？

How to build a custom bottomNavigationBar in flutter with a centered button?

flutter

flutter-widget

flutter-bottomnavigation