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

bottom_drawer 封面
套件詳情v0.0.5

bottom_drawer

一個底部抽屜小部件,支援自訂抽屜標頭和主體,支援清單主體,支援拖曳開啟和關閉。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
663
喜歡數
36
Pub 分數
150

安裝套件

flutter pub add bottom_drawer

套件介紹

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

一個可自訂的底部抽屜小部件,適用於 Flutter,支援拖曳開啟與關閉,並可選標題與主體自訂。可顯示靜態內容或基於清單的主體,非常適合用於對話方塊、篩選器或補充資訊面板。此抽屜能適應各種平台,包括行動裝置、網頁與桌面,確保跨裝置的使用者體驗一致。設計簡潔且彈性強,可順暢整合至現有的 Flutter 應用程式中。

適用情境

  • 模態覆蓋
  • 篩選面板
  • 補充內容顯示
  • 互動式底部彈出層
  • 表單輸入
  • 導航抽屜

主要特色

  • 拖曳以開啟/關閉手勢
  • 可自訂的標題和正文
  • 列表主體支援
  • 跨平台相容性
  • 與現有組件的輕鬆整合
  • 可設定的動畫與行為

適合對象

  • 開發互動式 UI 的開發者
  • 需要可摺疊面板的應用
  • 需要跨平台底端彈出式面板的專案
  • 希望具有彈性抽屜版面的設計師
  • 重視順暢使用者互動的團隊

使用建議

  • 可能需要額外的樣式來處理複雜的標題
  • 大型列表的性能影響
  • 內建動畫功能有限,僅限基本滑動
  • 不適用於全螢幕對話方塊
  • 需要仔細處理嵌套可滾動組件上的觸控事件

原始 README

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

Bottom Drawer for Flutter Pub version

Bottom Drawer.

DEMO

1. Add dependency
dependencies:
  bottom_drawer: ^0.0.5
2. Import bottom drawer
import 'package:bottom_drawer/bottom_drawer.dart';
3. Use bottom drawer

Create a bottom drawer controller.

/// create a bottom drawer controller to control the drawer.
BottomDrawerController controller = BottomDrawerController();

Build a bottom drawer widget.

/// return a bottom drawer widget.
Widget buildBottomDrawer(BuildContext context) {
  return BottomDrawer(
    /// your customized drawer header.
    header: Container(),
    /// your customized drawer body.
    body: Container(),
    /// your customized drawer header height.
    headerHeight: 60.0,
    /// your customized drawer body height.
    drawerHeight: 180.0,
    /// drawer background color.
    color: Colors.lightBlue,
    /// drawer controller.
    controller: controller,
  );
}

Control the bottom drawer.

/// open the bottom drawer.
controller.open();

/// close the bottom drawer.
controller.close();

For more information, see the example.

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。