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

awesome_drawer_bar 封面
套件詳情v1.2.1

awesome_drawer_bar

一個帶有自定義側邊菜單(抽屜)實現的 Flutter 套件

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
300
喜歡數
56
Pub 分數
140

安裝套件

flutter pub add awesome_drawer_bar

套件介紹

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

Awesome Drawer Bar 是一個 Flutter 套件,提供可自訂的側邊選單(抽屜),具有現代、簡潔的設計。專為尋求精緻導航體驗的開發者打造,它提供流暢的動畫、響應式版面,並可輕鬆整合至跨平台應用中。該抽屜支援亮色與暗色主題,可透過自訂組件、圖示和過渡效果進行客製化。非常適合需要直覺導航且介面乾淨的應用程式。該套件積極維護且開源,允許社群貢獻與透明度。

適用情境

  • 移動應用導航
  • Web儀表板介面
  • 桌面應用程式選單
  • 可自定的側板
  • 跨平台導航

主要特色

  • 流暢的動畫
  • 可客製化設計
  • 多平台支援
  • 淺色和深色主題相容性
  • 與現有 Flutter 項目輕鬆整合

適合對象

  • Flutter 開發人員建構跨平台應用
  • 需要靈活導航組件的設計師
  • 需要優雅側邊菜單的應用

使用建議

  • 需要基本的Flutter知識
  • 可能需要額外的樣式來處理複雜的佈局
  • 依賴於平台特定的渲染行為

原始 README

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

Flutter Awesome Drawer Bar

pub package License: MIT

A Flutter package with custom implementation of the Side Menu (Drawer)

Getting Started

To start using this package, add awesome_drawer_bar dependency to your pubspec.yaml

dependencies:
  awesome_drawer_bar: '<latest_release>'

Features

  • Simple sliding drawer
  • Sliding drawer with shadows
  • Sliding drawer with rotation
  • Sliding drawer with rotation and shadows
  • Support for both LTR & RTL

Documentation

    AwesomeDrawerBar(
      controller: AwesomeDrawerBarController,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: true,
      angle: -12.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*.65,
      openCurve: Curves.fastOutSlowIn,
      closeCurve: Curves.bounceIn,
    )
Parameters Value Required Docs
controller AwesomeDrawerBarController No Controller to have access to the open/close/toggle function of the drawer
mainScreen Widget Yes Screen containing the main content to display
menuScreen Widget Yes Screen containing the menu/bottom screen
slideWidth double No Sliding width of the drawer - defaults to 275.0
borderRadius double No Border radius of the slided content - defaults to 16.0
angle double No Rotation angle of the drawer - defaults to -12.0 - should be 0.0 to -30.0
backgroundColor Color No Background color of the drawer shadows - defaults to white
showShadow bool No Boolean, whether to show the drawer shadows - defaults to false
openCurve Curve No open animation curve - defaults to Curves.easeOut
closeCurve Curve No close animation curve - defaults to Curves.easeOut
Controlling the drawer

To get access to the drawer, and be able to control it, there are 2 ways:

  • Using a AwesomeDrawerBarController inside the main widget where ou have the AwesomeDrawerBar widget and providing it to the widget, which will allow you to trigger the open/close/toggle methods.
    final _drawerController = AwesomeDrawerBarController();

    _drawerController.open();
    _drawerController.close();
    _drawerController.toggle();
    _drawerController.isOpen();
    _drawerController.stateNotifier;
  • Using the static method inside ancestor widgets to get access to the AwesomeDrawerBar.
  AwesomeDrawerBar.of(context).open();
  AwesomeDrawerBar.of(context).close();
  AwesomeDrawerBar.of(context).toggle();
  AwesomeDrawerBar.of(context).isOpen();
  AwesomeDrawerBar.of(context).stateNotifier;

Screens

Example app Demo

Example RTL Demo

  • Drawer Sliding
    AwesomeDrawerBar(
      controller: AwesomeDrawerBarController,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: false,
      angle: 0.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*(AwesomeDrawerBar.isRTL()? .45: 0.65),
    )

Drawer Sliding

  • Drawer Sliding with shadow
    AwesomeDrawerBar(
      controller: AwesomeDrawerBarController,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: true,
      angle: 0.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*(AwesomeDrawerBar.isRTL()? .45: 0.65),
    )

Drawer Sliding

  • Drawer Sliding with rotation
    AwesomeDrawerBar(
      controller: AwesomeDrawerBarController,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: false,
      angle: -12.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*(AwesomeDrawerBar.isRTL()? .45: 0.65),
    )

Drawer Sliding with rotation

  • Drawer Sliding with rotation and shadows
    AwesomeDrawerBar(
      controller: AwesomeDrawerBarController,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: true,
      angle: -12.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*(AwesomeDrawerBar.isRTL()? .45: 0.65),
    )

Drawer Sliding with rotation and shadows

Issues

Please file any issues, bugs or feature request as an issue on our GitHub page.

Want to contribute

If you would like to contribute to the plugin (e.g. by improving the documentation, solving a bug or adding a cool new feature), please carefully review our contribution guide and send us your pull request.

Credits

Credits goes to pedromassango as most of this package comes from his implementation.

所屬分類

依賴

依賴清單 1 項

  • flutter_adaptive_scaffold^0.3.1

原始碼儲存庫

使用此套件的專案

暫無相關資料。