套件詳情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