搜尋套件、儲存庫與 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)

所屬分類

底部導航欄

原始碼儲存庫

使用此套件的專案

暫無相關資料。