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

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。