Tinyrack

Select

controlled・uncontrolled・FormField API で型付きの Flutter 値を 1 つ選択します。

Material のキーボード操作と検索動作を保ちながら、controlled・uncontrolled・FormField API で型付きの値を 1 つ選択します。

主なプロパティ

プロパティ説明
展開状態ポインターの hover、open、selected 状態は背景色だけで強調します。フォーカス枠はキーボード操作で得た focus にだけ表示します。
構成leading コンテンツを渡すと、型付きの値を変えずにトリガーの用途を示せます。選択肢に補足説明が必要な場合は TRSelectItem の description を追加してください。選択後のトリガーには label だけが残り、デフォルト検索は両方の文字列を対象にします。テストや状態復元でレイヤーとシートの選択肢を一貫して識別する必要がある場合は、各 item に key を指定してください。
アダプティブな配置プロダクトのレイアウト方針に応じて TRSelectPresentation.layer または TRSelectPresentation.sheet を選んでください。アンカー付きレイヤーは全項目から求めた固有サイズを維持し、シートは全項目の高さを保ちながらビューポート幅に追従します。明示した固定サイズがある場合はその値が優先されます。検索フィールドは 1 つだけの選択肢スクロール領域の外側にあり、その上でホイール、トラックパッド、ドラッグを操作してもリストやシートは動きません。
レイヤーサイズTRLayerSize はアンカー付きレイヤー全体に適用されます。幅はコンテンツに合わせる、固定値を使う、アンカーと同じにする、アンカーより狭くしない、の 4 方式から選べます。高さはコンテンツに合わせるか固定値を使えます。指定した範囲を適用したあと、安全領域を除いたビューポートが最終サイズを制限します。

インストール

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

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';

TRSelect<String>.controlled(
  value: channel,
  items: const [
    TRSelectItem(value: 'stable', label: 'Stable'),
    TRSelectItem(value: 'beta', label: 'Beta'),
  ],
  onValueChange: setChannel,
)

例

Controlled 値 パーマリンク

親が値を管理する場合は named controlled constructor を使います。leading コンテンツはトリガーを示し、item の key はレイヤーとシートで同じ選択肢を識別します。null は選択解除を明示します。

フォーム検証 パーマリンク

TRSelectFormField は Material のキーボード動作を保ったまま、検証、保存、リセット、自動検証、状態復元に参加します。

検索できる選択肢 パーマリンク

リストを読むより入力する方が速いほど選択肢が多いときは searchable を設定します。選択肢の上にフィルターフィールドが開いてフォーカスを受け取り、下矢印で最初の有効な一致に移動し、一致が 1 件になると Enter で確定できます。ラベル以外で照合するときは filter を渡します。

プロダクトが選ぶ表示方法 パーマリンク

Select にレスポンシブ判定を推測させず、プロダクトのブレークポイントから表示方法を決めます。`width` と `height` は固定された検索ヘッダーを含むポップアップ全体を表し、それぞれ独立した既定値を持つため、片方を指定してももう片方は保たれます。選択した表示方法はリサイズされても Select を閉じるまで維持されます。

API

表示方法と制御

Prop型 / デフォルト用途
presentationTRSelectPresentation · const TRSelectPresentation.layer()次に開くときの表示方法を呼び出し側が指定します。開いた時点の値は閉じるまで維持されます。
TRSelectPresentation.layerwidth, height, placement = bottomStart, useRootOverlay = true共有パネルを衝突回避対応のレイヤーとして開きます。width と height はそれぞれ独立した既定値を持つため、片方を指定してももう片方は保たれます。デフォルトの幅はアンカーと TRMeasurements.measureMd 以上で、コンテンツに応じて TRMeasurements.overlayWidthSm まで広がり、コンテンツの高さは TRMeasurements.measureXl までに制限されます。
TRSelectPresentation.sheetmaxExtent = 1, snapPoints = const [], showDragHandle = true同じパネルをモーダルボトムシートで開きます。コンテンツのジェスチャーは選択肢のスクロール領域が担当し、表示中のハンドルだけがシートを動かします。
controllerTRSelectController? · null選択した表示方法に依存せず、isOpen を読み取り、open、close、toggle を呼び出します。
TRSelectFormFieldFormField<T>型付きの検証、保存、リセット動作を保ちながら、presentation と controller を引き渡します。
paddingTRFieldPadding · TRFieldPadding.standardトリガーがサイズ段階で定義された左右の余白を自分で加えるかを選びます。行やツールバーが既に余白を与えている場所では TRFieldPadding.none を使い、値とシェブロンを隣のコントロールと同じ位置で終わらせます。高さは変わらないため、タップ領域はそのままです。

共通レイヤーサイズ

Prop型 / デフォルト用途
TRLayerSizewidth = TRLayerWidth.content(), height = TRLayerHeight.content()枠線と余白を含むレイヤー全体の幅と高さの方針を組み合わせます。
TRLayerWidth.content{double? min, double? max}任意の最小・最大範囲内でコンテンツに幅を決めさせます。
TRLayerWidth.fixeddouble value安全領域を除いたビューポートで制限する前の正確な幅を指定します。
TRLayerWidth.matchAnchor{double? min, double? max}アンカーの幅を使い、任意の最小・最大範囲に収めます。
TRLayerWidth.atLeastAnchor{double? min, double? max}コンテンツをアンカー幅以上から広げます。アンカーが max より広い場合は、安全領域を除いたビューポートのほうが狭くない限り、アンカー幅が優先されます。
TRLayerHeight.content{double? min, double? max}任意の最小・最大範囲内でコンテンツに高さを決めさせます。
TRLayerHeight.fixeddouble value安全領域を除いたビューポートで制限する前の正確な高さを指定します。