side_sheet_material3

套件介紹

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

一個 Flutter 套件，實作符合 Material Design 3 標準的模態側邊面板元件，提供現代化、響應式的滑動面板，用於額外內容或操作。設計上符合 Material Design 3 指南，支援 Android、iOS、Web、macOS、Windows 與 Linux 等多種平台。側邊面板可用於導航、設定或詳細資訊顯示，為各裝置提供一致的使用者體驗。可與現有的 Flutter 應用無縫整合，並遵循當前的可存取性與易用性設計原則。

適用情境

顯示附加內容
實施移動導航
顯示設定面板
提供詳細資訊
增強表單工作流程

主要特色

Material Design 3 相容性
跨平台支援
模態滑動行為
可自訂外觀
響應式版面處理

適合對象

使用 Material Design 3 的應用
尋求現代底部表單的開發者
需要跨平台使用者介面元件的專案
以行動裝置為首的應用程式
UI密集型儀表板

使用建議

需要 Flutter SDK 3.0+
超出 Material 3 規範的自訂選項有限
可能需要額外的樣式來處理非標準用例
依賴 material3 包
最適合單窗格佈局

原始 README

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

Material Design 3 modal side sheet
- Features
- Usage
- Example

Material Design 3 modal side sheet

A Flutter package that provides a Material Design 3 side sheet as a general dialog.

Please check out the official documentation for more information on Material Design side sheet

Features

Custom header and body widgets.
Option to add a back button and close button.
Option to add confirm and cancel action buttons.
Option to show/hide a divider between the body and action buttons.
Customizable button text and tooltips.
Option to dismiss the dialog by tapping outside of it.

Usage

To use this package, add side_sheet_material3 as a dependency in your pubspec.yaml file.

dependencies:
  side_sheet_material3: ^0.0.1

Example

await showModalSideSheet(
  context: context,
  header: 'Edit Profile',
  body: ProfileEditForm(), // Put your content widget here
  addBackIconButton: true,
  addActions: true,
  addDivider: true,
  confirmActionTitle: 'Save',
  cancelActionTitle: 'Cancel',
  confirmActionOnPressed: () {
    // Do something
  },

  // If null, Navigator.pop(context) will used
  cancelActionOnPressed: () {
    // Do something
  },
);

Please check out the full example for more information on how to use this package.

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

安裝套件