底部个性化点状导航栏

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

演示示例 (移动端)

演示示例 (平板 1)

演示示例 (平板 2)

软件包概览

  • [x] 拖放您的选项！
  • [x] 更改图标颜色
  • [x] 监听事件 '排序、插入和删除'
  • [x] 动态更改选定选项
  • [x] 自定义选项
  • [x] 无限制选项
  • [x] 定义自定义项目背景色的选项
  • [x] 还有更多...

入门

添加插件

dependencies:
  ...
  bottom_personalized_dot_bar: ^1.0.2

导入包

import 'package:bottom_personalized_dot_bar/bottom_personalized_dot_bar.dart';

如何使用？

重要！ 不要使用 Scaffolding 的 'bottomNavigationBar'，因为它会占据整个屏幕，您需要将其添加在 Stack 中。

要添加选项列表，您必须创建 BottomPersonalizedDotBarItem，并且每个选项都必须具有唯一的属性 'keyItem'。

要修改选定的选项，您必须更新 BottomPersonalizedDotBar 的 keyItemSelected 属性。

String _itemSelected = 'item-1';
...
..
.
Scaffold(
  body: Stack(
    children: <Widget>[
      .... // Your App Home
      BottomPersonalizedDotBar(
          keyItemSelected: _itemSelected,
          doneText: 'Done',
          settingTitleText: 'Your Menu',
          settingSubTitleText: 'Drag and drop options',
          iconSettingColor: const Color(0xFFFFD201),
          buttonDoneColor: const Color(0xFFFFD500),
          settingSubTitleColor: const Color(0xFFFECE02),
          hiddenItems: <BottomPersonalizedDotBarItem>[
              BottomPersonalizedDotBarItem('item-4', icon: Icons.cloud, name: 'Nube', onTap: (itemSelected) { /* event selected */ }),
              BottomPersonalizedDotBarItem('item-5', icon: Icons.access_alarm, name: 'Alarma', onTap: (itemSelected) { /* event selected */ }),
              BottomPersonalizedDotBarItem('item-6', icon: Icons.message, name: 'Mensaje', onTap: (itemSelected) { /* event selected */ }),
              BottomPersonalizedDotBarItem('item-7', icon: Icons.notifications, name: 'Alerta', onTap: (itemSelected) { /* event selected */ }),
              BottomPersonalizedDotBarItem('item-8', icon: Icons.security, name: 'Seguridad', onTap: (itemSelected) { /* event selected */ }),
              BottomPersonalizedDotBarItem('item-9', icon: Icons.help, name: 'Ayuda', onTap: (itemSelected) { /* event selected */ }),
              BottomPersonalizedDotBarItem('item-10', icon: Icons.settings, name: 'Config.', onTap: (itemSelected) { /* event selected */ }),
          ],
          items: <BottomPersonalizedDotBarItem>[
              BottomPersonalizedDotBarItem('item-1', icon: Icons.sentiment_very_satisfied, name: 'Flutter', onTap: (itemSelected) { /* event selected */ }),
              BottomPersonalizedDotBarItem('item-2', icon: Icons.favorite_border, name: 'Favorito', onTap: (itemSelected) { /* event selected */ }),
              BottomPersonalizedDotBarItem('item-3', icon: Icons.face, name: 'Perfil', onTap: (itemSelected) { /* event selected */ }),
          ],
      ),
    ],
  ),
);

自定义

BottomPersonalizedDotBar

属性 描述
items 导航栏中要显示的项列表
hiddenItems 将被隐藏的项列表
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) { /* 您的操作 */ }

BottomPersonalizedDotBarItem

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

GitHub

https://github.com/nnior/bottom_personalized_dot_bar