cupertino_modal_sheet

パッケージ概要

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

Flutterパッケージで、画面の下部からスライドアップするiOSスタイルのボトムシートモーダルを表示します。AppleのネイティブなCupertinoモーダルシートを模倣することを目的としており、Android、iOS、Web、macOS、Windows、Linuxで滑らかでプラットフォームに適したユーザー体験を提供します。このパッケージは軽量であり、既存のFlutterアプリにシームレスに統合でき、カスタマイズ可能な外観と動作を提供します。ドラッグして閉じるなどのインタラクティブなジェスチャーをサポートし、オプションの選択、フォームの表示、またはコンパクトかつ集中した形で追加コンテンツを提示するために使用できます。

用途

アクションメニューの表示
フォーム入力の提示
詳細情報の表示
ユーザー選択の処理
iOSスタイルのモーダルの実装

主な機能

iOSスタイルのスライドアップアニメーション
ジェスチャー駆動の非表示
クロスプラットフォーム互換性
カスタマイズ可能なコンテンツ
スムーズな遷移
すべての主要プラットフォームをサポートしています

適している対象

iOS風のUIデザイン
クロスプラットフォームアプリにおけるボトムシートモーダル
ユーザー入力フォーム
アクション選択インターフェース
Appleエコシステムをターゲットにしたアプリ

注意事項

iOS風のデザインに最適
非iOSプラットフォームでは、スタイリングの調整が必要になる場合があります
ボトムシートレイアウトに限定
フルスクリーンモーダルには適していません
Cupertinoテーマの整合性に依存しています

元の README

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

English, 日本語

Shows a modal iOS-style sheet that slides up from the bottom of the screen.

On mobile devices, the content is displayed as a sheet, with part of the background content near the top of the screen.
On tablet, a dimming layer is added to the background content and the content is centered over this layer.

Mobile

Tablet

Features

Hero compatibility
Tablet compatibility
Swiping to dismiss
Multi sheet (Dimming is imperfect)
Navigator2 compatibility

Getting started

showCupertinoModalSheet(
  context: context,
  builder: (context) => BookDetailsScreen(book: book),
);

Navigator2.0

Use CupertinoModalSheetPage or directly CupertinoModalSheetRoute.

TODO

[ ] Tests
[ ] Extensibility
[ ] Fix dimming of multi-sheet

PRs are welcome!

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