插件详情v2.0.0

circle_bottom_navigation

一个动画、美观且功能强大的底部导航栏，适用于您的应用。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文档源代码

近 30 天下载: 88
喜欢数: 37
Pub 分数: 130

安装插件

flutter pub add circle_bottom_navigation

插件介绍

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

一个视觉上吸引人且带有动画效果的 Flutter 应用底部导航栏，旨在提升美观性和可用性。它提供流畅的过渡效果、可自定义的样式以及圆形布局，与传统的导航栏截然不同。非常适合寻求跨多个平台独特而实用导航体验的现代应用程序。该包可通过简单的 pub add 命令轻松集成，并支持 Android、iOS、Web、macOS、Windows 和 Linux。

适合场景

移动应用导航
Web 应用程序接口
跨平台 Flutter 应用
现代用户界面设计
可自定义的底部标签

主要特点

动画过渡
圆形布局设计
可自定义的颜色和图标
在所有平台上都具有响应性
通过 pub 轻松集成
对多种主题的支持

适合对象

寻求独特 UI 组件的开发者
注重设计的 Flutter 项目
针对多个平台的应用
互动式用户体验
极简但富有活力的界面

使用建议

可能需要额外的样式来实现复杂布局
与原生实现相比，自定义选项有限
大量动画可能带来的性能影响
不太适合对可访问性要求较高的应用程序
最适合包含3-5个导航项的应用程序

原始 README

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

Circle Bottom Navigation

demo

Getting started

Add the plugin:

dependencies:
  ...
  circle_bottom_navigation: ^2.0.0

Minimum usage

bottomNavigationBar: CircleBottomNavigation(
  initialSelection: currentPage,
  tabs: [
    TabData(icon: Icons.home),
    TabData(icon: Icons.history),
    TabData(icon: Icons.search),
    TabData(icon: Icons.alarm),
  ],
  onTabChangedListener: (index) => setState(() => currentPage = index),
)

Attributes

Required

initialSelection -> The number of page you want to start/navigate, receive a int
tabs -> List of TabData objects
onTabChangedListener -> Function to handle a tap on a tab, receives int position

Optional

circleColor -> Defaults to null, derives from Theme
activeIconColor -> Defaults to null, derives from Theme
inactiveIconColor -> Defaults to null, derives from Theme
textColor -> Defaults to null, derives from Theme
barBackgroundColor -> Defaults to null, derives from Theme
circleSize -> Defaults to 60.0, size of intern circle
barHeight -> Defaults to 60.0, height of bar
arcHeight -> Defaults to 70.0, height of external circle arc
arcWidth -> Defaults to 90.0, width of external circle arc
circleOutline -> Defaults to 10.0
shadowAllowance -> Defaults to 20.0, size of icon shadow
hasElevationShadows -> Defaults to true, define if bar have elevation shadows
blurShadowRadius -> Defaults to 8.0, size of bar shadow if hasElevationShadows is true
key -> Defaults to null

TabData

Required

icon -> Icon to be used for the TabData

Optional

title -> String to be used for the tab
onClick -> Function to be used when the circle itself is clicked, on an active tab
iconSize -> Size of icon displayed active and not active
fontSize -> Size of font in case of title has informed
fontWeight -> Weight of font in case of title has informed