responsive_navigation_bar

套件介紹

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

一個對初學者友善的 Flutter 套件，提供可響應式的底端導航列，適應於 Android、iOS、Web、macOS、Windows 與 Linux。它會根據螢幕大小與方向自動調整版面，確保所有裝置上的最佳使用者體驗。此套件輕量、易於整合，並鼓勵社群貢獻。非常適合需要在多個平台實現一致導航且設定最少的應用程式。

適用情境

跨平台移動和網頁應用
適用於不同螢幕尺寸的自適應使用者介面
小型到中型應用中的簡單導航
使用響應式佈局進行原型設計
針對多個作業系統的應用程式

主要特色

自動適應螢幕尺寸
支援所有主要平台
所需設定最少
可自定外觀
開源且由社群驅動

適合對象

Flutter 初學者
跨平台應用程式開發者
需要響應式導航的項目
設計師原型設計使用者介面
導航複雜度有限的應用程式

使用建議

超出基本樣式的自訂功能有限
可能需要額外的邏輯來處理複雜的導航模式
不太適合高度動態或嵌套的導航

原始 README

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

Getting Started

Installation

Example Code

Features

Very easy to set up, beginner friendly
Everything is documented + you will be asked to add required values - the rest is optional (with sound null safety)
By default, fontSize, iconSize and padding are responsive (change size with screen size)
Set iconSize to control icon size independently (defaults to fontSize if not specified)
Optional: Beautiful gradient (backgroundGradient) for navigation bar and/or buttons (or solid colors)
Optional: Colored borders (border) for navigation bar and/or buttons
Optional: Change the opacity (backgroundOpacity) of the menu bar
Optional: Blurred background (backgroundBlur) from the top of the navigation bar to the bottom of the screen
Optional: Separate border radius controls (borderRadius, buttonBorderRadius)
Optional: Control button spacing (buttonSpacing)
By default shows text on selected button, optionally show on inactive buttons too (showInactiveButtonText)
Only StatelessWidgets
How to make the bottomNavigationBar float above the Scaffold's body:

Scaffold(
  extendBody: true,
  body: SafeArea(bottom: false, ...),
  bottomNavigationBar: ...
  ...
)

Colors in the example GIFs below:

backgroundColor:
    Theme.of(context).brightness == Brightness.dark
        ? const Color(0xff3c3c3c)
        : const Color(0xffbebebe),
inactiveIconColor:
    Theme.of(context).brightness == Brightness.dark
        ? const Color(0xffaaaaaa)
        : const Color(0xff969696),