带标题的底部导航栏

一个美观、简洁、简单的底部导航栏，点击时具有流畅的动画。此包高度可定制，请阅读下面的更多详细信息。

您可以在/lib文件夹内找到此库的源代码。

预览（带反转模式）

reverse

软件包概览

  • [x] 自定义图标颜色
  • [x] 自定义指示器颜色
  • [x] 支持两到五个项目
  • [x] 反转模式（显示选定项目为图标或标题）
  • [x] 选择定义自定义项目背景颜色的选项
  • [x] 使用currentIndex属性通过选项卡位置更新导航栏
  • [x] 无需setState(...)即可更新当前索引
  • [x] 支持RTL文本方向（感谢Victor Uvarov）

入门

请按照以下步骤使用此库

添加插件

dependencies:
  ...
  titled_navigation_bar: ^5.0.0-nullsafety.0

导入包

import 'package:titled_navigation_bar/titled_navigation_bar.dart';

添加小部件

bottomNavigationBar: TitledBottomNavigationBar(
  currentIndex: 2, // Use this to update the Bar giving a position
  onTap: (index){
    print("Selected Index: $index");
  },
  items: [
      TitledNavigationBarItem(title: Text('Home'), icon: Icons.home),
      TitledNavigationBarItem(title: Text('Search'), icon: Icons.search),
      TitledNavigationBarItem(title: Text('Bag'), icon: Icons.card_travel),
      TitledNavigationBarItem(title: Text('Orders'), icon: Icons.shopping_cart),
      TitledNavigationBarItem(title: Text('Profile'), icon: Icons.person_outline),
  ]
)

自定义（可选）

TitledBottomNavigationBar

onTap - 使用此项可在项目被点击时收到通知，您可以在此函数中获取当前项目的索引。不能为空！

items - 底部导航栏的项目。使用TitledNavigationBarItem类添加项目。不能为空！

curve - 使用此项定义您的自定义曲线动画。不能为空！

reverse - 如果为true，则选定项目的可见小部件是文本（带有项目标题）。如果为false，则选定项目的可见小部件是图标。默认为false

activeColor - 活动文本/图标颜色。默认颜色是您应用主题的指示器颜色。

inactiveColor - 非活动文本/图标颜色。默认是黑色。

indicatorColor - 指示器颜色。默认颜色是您应用主题的指示器颜色。

currentIndex - 使用此项通过位置更新导航栏。

enableShadow - 使用此项删除导航栏的阴影

TitledNavigationBarItem

icon -此项目的图标。如果禁用了反转模式，将以此作为默认状态

title -此项目的标题。如果启用了反转模式，将以此作为默认状态

GitHub

https://github.com/pedromassango/titled_navigation_bar