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

ducafecatFlutter 生态导航
插件详情v0.0.4

bubbled_navigation_bar

惊艳的动态气泡形状导航栏。可调节颜色、背景色、动画曲线和动画持续时间。通过 controller 参数与 PageView 配合使用。

pub.dev API 文档 源代码
近 30 天下载
80
喜欢数
71
Pub 分数
35

安装插件

flutter pub add bubbled_navigation_bar

插件介绍

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

一个视觉上吸引人的Flutter包，实现了动态气泡形状的导航栏。它提供可自定义的颜色、背景色、动画曲线和持续时间，以实现动态的用户体验。该导航栏通过控制器参数与PageView无缝集成，可在页面之间实现平滑过渡。非常适合现代应用程序界面，其中视觉反馈和交互元素可以提升可用性。设计时注重性能和灵活性，支持在不同屏幕尺寸上的响应式设计。

适合场景

  • 创建动画底部导航栏
  • 通过流畅的过渡效果增强应用界面
  • 与 PageView 集成以实现可滑动内容
  • 设计现代移动应用界面
  • 为导航操作添加视觉反馈

主要特点

  • 可动画的气泡形状
  • 可自定义的颜色和动画设置
  • 通过控制器进行 PageView 集成
  • 平滑过渡效果
  • 响应式设计支持
  • 使用 pub add 命令轻松设置

适合对象

  • 寻求现代 UI 组件的 Flutter 开发人员
  • 需要引人入胜的导航体验的应用程序
  • 注重设计的应用程序，带有交互元素
  • 使用 PageView 进行水平滚动的开发者
  • 强调视觉效果和动画的项目

使用建议

  • 需要仔细调整动画参数
  • 可能会影响低端设备的性能
  • 有限的平台特定自定义
  • 最适合导航项较少的应用程序
  • 不适合用于包含多个屏幕的复杂标签页布局

原始 README

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

bubbled_navigation_bar

pub package

A Flutter package for easy implementation of bubbled navigation bar.

Gif

Add dependency
dependencies:
  bubbled_navigation_bar: ^0.0.3 #latest version
Easy to use
home: Scaffold(
bottomNavigationBar: BubbledNavigationBar(
  defaultBubbleColor: Colors.blue,
  onTap: (index) {
    // handle tap
  },
  items: <BubbledNavigationBarItem>[
    BubbledNavigationBarItem(
      icon:       Icon(CupertinoIcons.home, size: 30, color: Colors.red),
      activeIcon: Icon(CupertinoIcons.home, size: 30, color: Colors.white),
      title: Text('Home', style: TextStyle(color: Colors.white, fontSize: 12),),
    ),
    BubbledNavigationBarItem(
      icon:       Icon(CupertinoIcons.phone, size: 30, color: Colors.purple),
      activeIcon: Icon(CupertinoIcons.phone, size: 30, color: Colors.white),
      title: Text('Phone', style: TextStyle(color: Colors.white, fontSize: 12),),
    ),
    BubbledNavigationBarItem(
      icon:       Icon(CupertinoIcons.info, size: 30, color: Colors.teal),
      activeIcon: Icon(CupertinoIcons.info, size: 30, color: Colors.white),
      title: Text('Info', style: TextStyle(color: Colors.white, fontSize: 12),),
    ),
    BubbledNavigationBarItem(
      icon:       Icon(CupertinoIcons.profile_circled, size: 30, color: Colors.cyan),
      activeIcon: Icon(CupertinoIcons.profile_circled, size: 30, color: Colors.white),
      title: Text('Profile', style: TextStyle(color: Colors.white, fontSize: 12),),
    ),
  ],
),
body: Container(color: Colors.blue,),
)
Advanced use

Way of use with PageView and sliding animation from example.gif you can see in example folder.

Attributes

items: List of Widgets
initialIndex: Initial index of Curve
color: Color of NavigationBar, default Colors.white
defaultBubbleColor: background color of floating bubble onTap: Function handling taps on items
animationCurve: Curves interpolating button change animation, default Curves.easeInOutQuad
animationDuration: Duration of button change animation, default Duration(milliseconds: 500)

所属分类

底部导航栏

源码仓库

使用此插件的项目

暂无相关数据。