draggable_customized_btn_navy_bar

Pub Awesome Flutter Widget Tests

一个底部导航栏，您可以根据需要自定义选项，没有任何限制。您还可以自定义导航栏的外观。

该软件包解决了 bottom_personalized_dot_bar 软件包的问题，它解决了 i 的问题，问题可概括为以下几点：

  • 它已过时，并且所有者已 3 年未更新。
  • 手势捕获了一些异常。
  • 对显示的项的最大数量和最小数量没有明确的定义。
  • 会忘记每次运行时在显示和隐藏项中所做的更改，因此用户设置将在应用程序关闭后被遗忘。
  • 非跨平台。

这款按钮导航栏非常漂亮，很多人都非常喜欢。因此，我构建了这个公共软件包，以帮助他们将这个漂亮的按钮导航栏添加到他们的项目中。希望这对您有所帮助。

实时预览

image

支持的平台

  • Flutter Android
  • Flutter iOS
  • Flutter Web
  • Flutter 桌面

软件包结构

image

空安全！！

提示：该软件包支持空安全 1_GjeLhjfdpqhmGc3PjRf-BQ

软件包概览

  • 拖放您的选项！
  • 更改图标、背景、文本、项目、项目背景……颜色
  • 控制显示项的最大数量和最小数量
  • 监听事件“排序、插入和删除”
  • 动态更改选定选项
  • 将修改后的设置（项及其索引的更改）保存在共享偏好设置中
  • 自定义选项
  • 无限选项
  • 支持所有平台 [Android – iOS – Web – Linux – Mac – Windows]
  • 以及更多……

入门

首先，依赖该软件包。

dependencies:
  ...
  draggable_customized_btn_navy_bar: ^0.0.1 #Add the latest version

然后在您的 dart 文件中导入该软件包

import 'package:draggable_customized_btn_navy_bar/draggable_customized_btn_navy_bar.dart';

基本设置

String _itemSelected = 'item-1';
...
..
.
Scaffold(
  body: Stack(
    children: <Widget>[
      .... // Your App Home
      DraggableCustomizedBtnNavyBar(
          keyItemSelected: _itemSelected,
          hiddenItems: <DraggableCustomizedDotBarItem>[
              DraggableCustomizedDotBarItem('item-4', icon: Icons.cloud, name: 'Nube', onTap: (itemSelected) { /* event selected */ }),
              DraggableCustomizedDotBarItem('item-5', icon: Icons.access_alarm, name: 'Alarma', onTap: (itemSelected) { /* event selected */ }),
              DraggableCustomizedDotBarItem('item-6', icon: Icons.message, name: 'Mensaje', onTap: (itemSelected) { /* event selected */ }),
              DraggableCustomizedDotBarItem('item-7', icon: Icons.notifications, name: 'Alerta', onTap: (itemSelected) { /* event selected */ }),
              DraggableCustomizedDotBarItem('item-8', icon: Icons.security, name: 'Seguridad', onTap: (itemSelected) { /* event selected */ }),
              DraggableCustomizedDotBarItem('item-9', icon: Icons.help, name: 'Ayuda', onTap: (itemSelected) { /* event selected */ }),
              DraggableCustomizedDotBarItem('item-10', icon: Icons.settings, name: 'Config.', onTap: (itemSelected) { /* event selected */ }),
          ],
          items: <DraggableCustomizedDotBarItem>[
              DraggableCustomizedDotBarItem('item-1', icon: Icons.sentiment_very_satisfied, name: 'Flutter', onTap: (itemSelected) { /* event selected */ }),
              DraggableCustomizedDotBarItem('item-2', icon: Icons.favorite_border, name: 'Favorito', onTap: (itemSelected) { /* event selected */ }),
              DraggableCustomizedDotBarItem('item-3', icon: Icons.face, name: 'Perfil', onTap: (itemSelected) { /* event selected */ }),
          ],
      ),
    ],
  ),
);

自定义

DraggableCustomizedBtnNavyBar

属性 描述
items 要显示在导航栏中的项目列表
hiddenItems 将隐藏的项目列表
maximumNumberOfDisplayItems 显示的最多项目数 – 默认：5
onDisplayedStackOverflows 如果用户想向显示的项目添加项目并且达到了最大显示数量，则要执行的函数 – 默认：showSnackBar。 onDisplayedStackOverflows: () { /* 您的操作 */ }
minimumNumberOfDisplayedItems 最少的显示项目数 – 默认：1
onDisplayedStackIsEmpty 如果用户想从显示的项目中删除项目并且达到了最小显示数量，则要执行的函数 – 默认：showSnackBar。 onDisplayedStackIsEmpty: () { /* 您的操作 */ }
keyItemSelected 选中的项目键
width 导航栏宽度
高度 导航栏高度
borderRadius 导航栏半径
selectedColorIcon 选中图标颜色
unSelectedColorIcon 未选中图标颜色
navigatorBackground 导航器容器背景色
settingBackground 设置容器背景色（隐藏的项目）
iconSetting 设置按钮图标
iconSettingColor 设置按钮图标颜色
settingTitleText 设置标题文本
settingTitleColor 设置标题颜色
settingSubTitleText 设置副标题文本
settingSubTitleColor 设置副标题颜色
doneText 完成按钮文本
textDoneColor 完成文本颜色
buttonDoneColor 完成按钮颜色
hiddenItemBackground 隐藏项目的背景
iconHiddenColor 隐藏图标颜色
textHiddenColor 隐藏文本颜色
dotColor 选择指示器颜色（圆点）
boxShadow 容器的阴影
onOrderHideItems 对隐藏选项进行排序时的事件，该事件的参数是按新顺序排列的隐藏选项列表。 onOrderHideItems: (List<BottomPersonalizedDotBarItem> hiddenItems) { /* 您的操作 */ }
onOrderItems 在排序浏览器选项时的事件，该事件的参数是按新顺序排列的选项列表。 onOrderItems: (List<BottomPersonalizedDotBarItem> items) { /* 您的操作 */ }
onAddItem 添加新选项到导航栏时的事件，该事件的参数是您添加的项和选项列表。 onAddItem: (BottomPersonalizedDotBarItem itemAdd, List<BottomPersonalizedDotBarItem> items) { /* 您的操作 */ }
onRemoveItem 从导航栏中删除选项时的事件，该事件的参数是要删除的项和隐藏选项列表。 onRemoveItem: (BottomPersonalizedDotBarItem itemRemove, List<BottomPersonalizedDotBarItem> hiddenItems) { /* 您的操作 */ }

DraggableCustomizedDotBarItem

属性 描述
keyItem 唯一键
icon 项目图标
名称 项目名称
onTap 按下项目时的事件。 onTap: (String keyItem) { /* 您的操作 */ }

许可与可访问性

  • 这是我的第一个软件包版本，如果您发现任何问题，可以随时提出 issue。

1200px-Public_Domain_Mark_button svg

贡献

欢迎 Pull requests。对于重大更改，请先打开一个 issue 来讨论您想进行的更改。

GitHub

查看 Github