Tinyrack

Dialog

型付きの結果、フォーカスの閉じ込め、論理配置に対応した Flutter モーダルを表示します。

型付きの結果、フォーカスの閉じ込め、5 つの論理配置に対応した Navigator route でモーダルコンテンツを表示します。

主なプロパティ

プロパティ説明
オーバーフロー本文が縦スクロールを管理します。内容の余白を保ったままスクロールバーは文字方向に応じたサーフェス端に配置され、タイトル・説明・アクションは固定されます。

インストール

パッケージを追加し、公開ライブラリをインポートしてください。

flutter pub add tinyrack_ui
import 'package:tinyrack_ui/tinyrack_ui.dart';

プレイグラウンド

使用方法

import 'package:material_ui/material_ui.dart';
import 'package:tinyrack_ui/tinyrack_ui.dart';

final result = await showTRDialog<bool>(
  context: context,
  builder: (context) => TRDialog(
    title: const Text('Deploy rack?'),
    content: const Text('The stable channel will be updated.'),
    actions: TRButton(
      onPressed: () => Navigator.pop(context, true),
      child: const Text('Deploy'),
    ),
  ),
);

例

型付きの結果 パーマリンク

showTRDialog は Navigator.pop に渡した値を返し、バリアのセマンティクス、システムの戻る操作、フォーカスの閉じ込め、トリガーへのフォーカス復元を保ちます。

ネストしたレイヤー パーマリンク

Dialog 内でも Select と Menu を開けます。start と end の配置は現在の文字方向に従います。

長い本文 パーマリンク

長い内容は本文内でスクロールし、タイトルとアクションは固定されます。ルートはサーフェスをソフトウェアキーボードの上にも保ちます。内容の余白を保ちながら、スクロールバーはサーフェスの端に配置されます。

API

Dialog は Flutter のネイティブ状態とコールバックを保ち、Tinyrack トークンを既定値として使用します。