パッケージ、リポジトリ、アプリカテゴリを検索

modal_side_sheet のカバー
パッケージ詳細v0.0.1

modal_side_sheet

Flutter プロジェクトに Material サイドシートを使用するためのパッケージ。

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
4190
いいね数
70
Pub ポイント
160

パッケージをインストール

flutter pub add modal_side_sheet

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

複数のプラットフォームで Material Design のサイドシートをアプリケーションに統合できる Flutter パッケージです。Android、iOS、Web、macOS、Windows、Linux と互換性のあるカスタマイズ可能で応答性のあるサイドシートウィジェットを提供します。モーダル形式で補足コンテンツや操作を提示するために使用でき、現在の画面から離れることなくユーザーインタラクションを向上させます。Material デザインの原則に基づいて構築されており、ネイティブプラットフォームの動作と一貫性を確保しています。

用途

  • モーダルオーバーレイで詳細情報を表示する
  • アクションメニューまたはオプションを表示する
  • 一時的にフォームまたは入力フィールドを表示する
  • スライドインパネルによるナビゲーションの向上
  • フルスクリーンの遷移なしでコンテキストコントロールを提供

主な機能

  • Material Design準拠のサイドシート
  • クロスプラットフォーム対応(Android、iOS、Web、macOS、Windows、Linux)
  • カスタマイズ可能な外観と動作
  • pub add コマンドによる簡単な統合
  • 永続的および一時的なモードの両方をサポートしています

適している対象

  • 一貫したUIでクロスプラットフォームアプリを開発する開発者
  • Material Designガイドラインを使用するチーム
  • 一時的なコンテンツオーバーレイを必要とするアプリ
  • 軽量モーダルを必要とするプロジェクト
  • スライディングパネルを備えたユーザーエクスペリエンス中心のインターフェース

注意事項

  • 非マテリアルテーマには追加のスタイリングが必要になる場合があります
  • 大規模なコンテンツリストにおけるパフォーマンスへの影響
  • 完全カスタムウィジェットと比較してカスタマイズの選択肢が限られている
  • 複雑なナビゲーション構造には適していない
  • タッチデバイスでのジェスチャーの取り扱いには注意が必要です

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

Side Sheet

A package to use Material side sheet into your Flutter project. Learn more about side sheet at Material.io

Platform Support

Android iOS MacOS Web Linux Windows
✔️ ✔️ ✔️ ✔️ ✔️ ✔️

Getting Started

This package comes with two types of side sheets, Standard side sheet and Modal side sheet.

Modal Side Sheet

Modal side sheets present content while blocking interaction with the rest of the screen. This side sheet generally used in mobile devices as per recommended by Material Design by Google. See also : Modal Side Sheet

Modal Side Sheet

You can use it by calling showModalSideSheet() function into your Flutter project.

ElevatedButton(
    onPressed: () {
        showModalSideSheet(
            context: context,
            ignoreAppBar: false,
            body: ListView.builder(
                itemBuilder: (context, index) {
                    return ListTile(
                        leading: Icon(Icons.face),
                        title: Text("I am on $index index"),
                        trailing: Icon(Icons.safety_divider),
                    );
                },
            ));
        },
    child: Text("Show Modal Side Sheet")),

Standard Side Sheet

Standard side sheets co-exist with the screen’s primary UI region, which allows viewing and interaction with both surfaces. They are used only on tablet and desktop. See also: Standard Side Sheet

Standard Side Sheet

This side sheet can be used with BodyWithSideSheet widget. Just place this widget into your Scaffold's body property.

@override
Widget build(BuildContext context){
    return Scaffold(
        appBar:AppBar(title:Text("Standard Side Sheet Demo")),
        body:BodyWithSideSheet(
            body:Container(
                child:Text("My App Body"),
            ),
            sheetBody:Container(
                child:Text("My Sheet Body"),
            ),
            show:true
        ),
    );
}

Contributing

This is fully open source project so you are welcome to sontribute to any features or bug-fixing.

Don't forgot to star and fork the repository and make your first pull request.

License

Project released under MIT License.

カテゴリー

ソースリポジトリ

このパッケージを使用しているプロジェクト