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

Question

我已经尝试了很多方法来使用图标之间的曲线和空间来构建这个底部导航栏。想不通。

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