custom_navigation_bar

一个带有气泡点击效果的自定义导航栏。

此包在您单击导航栏时会给您一个可爱的泡泡效果。

Dribbble

68747470733a2f2f63646e2e6472696262626c652e636f6d2f75736572732f323131343538342f73637265656e73686f74732f373133343834392f6d656469612f39366534613630303261343736626164376264383039616337316532383639382e676966
已实现

screenshot

1--1-

2--1-

3--1-

4--1-

5--1-

6--1-

如何安装

将此添加到您的 package 的 pubspec.yaml 文件中

dependencies:
  custom_navigation_bar: ^0.3.0

文档

您可以在导航栏中自定义这些属性。

属性 类型 描述 默认值
scaleFactor 双精度 图标缩放动画的缩放因子。 0.2
elevation 双精度 此 CustomNavigationBar 的 z 坐标 8.0
items 列表 CustomNavigationBar 中的项目数据 必需
selectedColor 颜色 [Color] 当 [CustomNavigationBarItem] 被选中时 [blueAccent]
unSelectedColor 颜色 [Color] 当 [CustomNavigationBarItem] 未被选中时。 grey[600]
onTap Function(int) 单击项目时调用的回调函数 空
currentIndex 整数 导航栏的当前索引。 0
iconSize 双精度 图标的大小。也代表了泡泡效果动画的最大半径。 24.0
backgroundColor 颜色 [CustomNavigationBar] 的背景颜色 Colors.white
strokeColor 颜色 描边颜色 blueAccent
bubbleCurve Curve 泡泡效果的动画曲线 linear
scaleCurve Curve 缩放效果的动画曲线 linear
borderRadius Radius 导航栏的边框半径 Radius.zero
isFloating 布尔值 控制 CustomNavigationBar 是否是浮动的 假

要自定义导航栏中的图标，只需像这样将您想要的图标放在 CustomNavigationBarItem 中。

CustomNavigationBar(
        ...
        items: [
          CustomNavigationBarItem(
            icon: Icons.home,
          ),
          CustomNavigationBarItem(
            icon: Icons.shopping_cart,
          ),
          CustomNavigationBarItem(
            icon: Icons.lightbulb_outline,
          ),
          CustomNavigationBarItem(
            icon: Icons.search,
          ),
          CustomNavigationBarItem(
            icon: Icons.account_circle,
          ),
        ],
        ...
      )

注意：如果您将 isFloating 设置为 true，我建议您在 Scaffold 中将 extendBody 设置为 true 以获得更好的性能。

示例

有关更多详细信息，请查看示例应用程序。

未来计划

  • [x] 代码格式
  • [x] 使其更像 Flutter 中的原生导航栏。
  • [x] 更好的文档
  • [ ] 更多的自定义选项！！

GitHub

https://github.com/rickywen911/custom_bubble_navigation_bar