搜索插件、代码仓与 APP 分类

flip_box_bar_plus 封面
插件详情v1.0.0

flip_box_bar_plus

受 Dribbble 设计师 Dannniel 启发的 3D 底部导航栏

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
38
喜欢数
34
Pub 分数
140

安装插件

flutter pub add flip_box_bar_plus

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

FlipBoxBarPlus 是一个受 3D 启发的底部导航栏,专为 Flutter 设计,其设计灵感来自 Dribbble 上 Dannniel 的概念。它具有动态翻转动画效果,增强了用户交互性和视觉吸引力。该组件支持 Android、iOS、Web、macOS、Windows 和 Linux 多个平台,具有高度的通用性。通过流畅的过渡效果和可自定义的样式,非常适合追求趣味性与专业感兼具的现代应用界面。该包可通过 pub.dev 轻松集成,且为开源项目,鼓励社区贡献。

适合场景

  • 现代移动应用界面
  • 交互式用户界面元素
  • 跨平台应用程序
  • 以设计为重点的仪表板
  • 动画导航栏

主要特点

  • 3D翻转动画
  • 跨平台兼容性
  • 可自定义外观
  • 平滑过渡效果
  • 开源且由社区驱动

适合对象

  • 寻求动画导航的开发者
  • 注重设计的应用程序创作者
  • 具有交互式 UI 的 Flutter 项目
  • 针对多个操作系统的应用程序
  • 创意且视觉吸引人的应用

使用建议

  • 可能会影响低端设备的性能
  • 需要仔细调整以获得最佳动画速度
  • 超出核心功能的定制化有限
  • 最适合导航项较少的应用程序
  • 不推荐用于对可访问性要求较高的应用程序

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

Flip_box_bar_plus

Forked from Flip_box_bar, added support for vertical position

Installation Guide

A 3D BottomNavigationBar inspired by Dribbble design by Dannniel.

Demo

Example Use

      // In Scaffold
      int selectedIndex = 0;
      
      FlipBoxBarPlus(
              selectedIndex: index,
              items: [
                FlipBarItem(icon: Icon(Icons.map), text: Text("Map"), frontColor: Colors.blue, backColor: Colors.blueAccent),
                FlipBarItem(icon: Icon(Icons.add), text: Text("Add"), frontColor: Colors.cyan, backColor: Colors.cyanAccent),
                FlipBarItem(icon: Icon(Icons.chrome_reader_mode), text: Text("Read"), frontColor: Colors.orange, backColor: Colors.orangeAccent),
                FlipBarItem(icon: Icon(Icons.print), text: Text("Print"), frontColor: Colors.purple, backColor: Colors.purpleAccent),
                FlipBarItem(icon: Icon(Icons.print), text: Text("Print"), frontColor: Colors.pink, backColor: Colors.pinkAccent),
              ],
              onIndexChanged: (newIndex) {
                setState() {
                    selectedIndex = newIndex;
                }
              },
            ),

For vertical position set isVerticalBar = true

Properties

List<FlipBarItem> items;

The items to be displayed in the NavBar.

Duration animationDuration;

The duration of the animation of the box flip.

ValueChanged<int> onIndexChanged;

Callback for getting value of item selection.

int initialIndex;

The initial selected index of the NavBar.

double navBarHeight;

The height of the NavBar when it is in bottom nav position.

bool isVerticalBar;

Set the navigation bar as vertical.

double navBarWidth;

The width of the NavBar when it is in vertical position.

所属分类

源码仓库

使用此插件的项目

暂无相关数据。