搜尋套件、儲存庫與 APP 分類

ducafecatFlutter 生態導航
blur_bottom_bar 封面
套件詳情v1.0.3

blur_bottom_bar

Flutter 模糊底欄是 iOS 標籤檢視的再現，採用 Material Design 適用於 Android 和 iOS

AndroidiOSWebmacOSWindowsLinux
pub.dev API 文件 原始碼
近 30 天下載
82
喜歡數
29
Pub 分數
150

安裝套件

flutter pub add blur_bottom_bar

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

Blur Bottom Bar 是一個 Flutter 套件，可重現具有模糊背景效果的 iOS 風格標籤欄，結合 iOS 美學與 Material Design 原則，實現 Android、iOS、Web、macOS、Windows 與 Linux 平台上的跨平台一致性。它提供現代化且視覺上吸引人的導航體驗，具備平滑過渡與可自訂樣式。此套件非常適合追求高級外觀卻不犧牲跨平台可用性的應用程式。

適用情境

  • 跨平台移動應用導航
  • iOS 風格的使用者介面，採用 Material Design
  • 現代應用程式介面帶有模糊效果
  • 基於選項卡的應用程式需要視覺深度
  • 透過動態底欄增強使用者體驗

主要特色

  • 背景模糊效果，靈感來自iOS
  • Android 的 Material Design 結合
  • 對多個平台的支援
  • 可自訂標籤外觀
  • 流暢的動畫和過渡
  • 跨裝置的響應式設計

適合對象

  • 在Flutter上開發類似iOS應用程式的開發者
  • 注重設計的應用程式，需要美觀的導航
  • 跨平台專案，目標為 iOS 和 Android
  • 旨在實現精緻現代使用者介面的應用程式
  • 優先考慮跨平台視覺一致性的團隊

使用建議

  • 可能影響低階裝置的效能
  • 需要仔細的色彩對比以確保可讀性
  • 與原生實現相比，自定義選項有限
  • 模糊效果可能存在的可訪問性問題
  • 最適合淺色主題設計

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

blur_bottom_bar

Flutter blur bottom bar

This is a recreation of the ios tab view with material design for android and ios

BlurBottomBar Gif BlurBottomBar Gif

Getting Started

Add the dependency in pubspec.yaml:

dependencies:
  ...
  blur_bottom_bar: ^1.0.1

Basic Usage

return Scaffold(
      appBar: AppBar(title: Text("Blur bar example")),
      body: Stack(
        children: <Widget>[
          _widgetOptions.elementAt(_selectedIndex),
          BlurBottomView(
              bottomNavigationBarItems: const <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  label: 'Home'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.business),
                  label: 'Business',
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.school),
                  label: 'School',
                )
              ],
              currentIndex: _selectedIndex,
              onIndexChange: (val) {
                _onItemTapped(val);
              }),
        ],
      ),
    );

所屬分類

底部導航欄

原始碼儲存庫

使用此套件的專案

暫無相關資料。