Tinyrack

Slider

横または縦のトラックで、単一値または範囲を選択します。

横または縦のトラックで、単一値または範囲を選択します。

主なプロパティ

プロパティ説明
値TRSlider は単一の double を扱います。範囲は RangeValues を扱う別のウィジェット TRRangeSlider です。どちらのウィジェットにも、defaultValue を受け取る非制御コンストラクタと value を受け取る .controlled コンストラクタがあります。
範囲min、max、step がポインターとキーボードによる変更を制限し、目盛りに合わせます。TRRangeSlider の minGap はステップ数ではなく値の距離で、動かしている側のつまみがその間隔を吸収します。2 つのつまみは互いを押したり入れ替わったりせず、接する位置で止まります。
フォームname や隠し入力はありません。Flutter の Form の中に TRSliderFormField または TRRangeSliderFormField を置き、validator、onSaved、FormState を通して値を扱ってください。
検証検証ルールはフォームフィールドが持ちます。フォームフィールドはメッセージを errorText として渡し、その文言がトラックの下に表示され、トラックの塗りつぶし部分にエラー色が付きます。最初の送信前にメッセージを出すかどうかは autovalidateMode で決めてください。Form の外では errorText を自分で渡してください。
キーボードフォーカスされたトラックは Right・Up で step 分進み、Left・Down で同じだけ戻ります。大きい単位の移動はなく、Page Up、Page Down、Home、End は処理されません。TRRangeSlider では、直前のポインター操作で選ばれたつまみを矢印キーが動かします。初期状態では下側のつまみです。
ラベルlabel はトラックの上に現在値を添えた見出し行を描画し、labelBuilder は表示テキストとセマンティクスの両方の値を整形します。アクセシブルネームを表示ラベルと変えたい場合や表示ラベルがない場合は、semanticLabel を設定してください。

音量やトラフィックの割合のように、既知の範囲からおおよその値を選ぶ場合に TRSlider を使ってください。位置よりも正確な数値が重要な場合は TRTextField や TRNumberField を使ってください。

インストール

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

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

TRSlider.controlled(
  label: 'Traffic',
  value: traffic,
  onValueChange: (value) => setState(() => traffic = value),
)

例

音量 パーマリンク

非制御コンストラクタが値を保持します。スライダーは親から与えられた幅いっぱいに広がるため、幅を制約してください。

サイズ パーマリンク

`uiSize` はトラックの太さを保ったまま、つまみとトラック周辺の領域を拡大縮小します。密度の高いコントロール面に置く場合は `TRUiSize.md` を使ってください。

向き パーマリンク

縦向きのスライダーは最大値を上端に置き、固定幅を取り、与えられた高さいっぱいに広がります。トラックの領域を確保するため、その高さを制約してください。

無効なスライダー パーマリンク

値は読めるままで変更はさせたくない場合は `enabled: false` を設定してください。セマンティクスノードから増減アクションが外れるため、支援技術もそれらを提示しなくなります。

2 つのつまみによる範囲 パーマリンク

`TRRangeSlider` は `RangeValues` を扱い、2 つのつまみを値の単位で `minGap` 分だけ離して保ちます。`labelBuilder` は見出し行とセマンティクスの値の両方について各端を整形し、矢印キーは直前のポインター操作で選ばれたつまみを動かします。

フォーム送信 パーマリンク

`TRSliderFormField` は周囲の `Form` に参加するため、`FormState.save` が `onSaved` を通じて値を集めます。シリアライズ用の `name` や隠し入力はありません。

フィールドが持つ検証 パーマリンク

つまみを 60% 未満に動かすとエラーが表示され、値を上げるとメッセージが消えます。`AutovalidateMode.onUserInteraction` は読み手が操作するまで何も表示せず、送信時は `validate` が `save` を守ります。

API

TRSlider のプロパティ

Prop型 / デフォルト用途
defaultValuedouble · 0非制御コンストラクタの初期値を指定します。以降はウィジェットが値を保持し、変更のたびに onValueChange で通知します。
valuedouble? · required on .controlled自分で管理する状態からつまみを動かします。ウィジェットが自ら値を変えることはないため、onValueChange の中で状態を更新してください。
onValueChangeValueChanged<double>? · null操作中のポインターとキーボードによる変更のたびに呼ばれます。別途のコミットコールバックはないため、ドラッグのコストが大きい処理は自分でデバウンスしてください。
min, max, stepdouble · 0, 100, 1スケールを定義します。値は境界内に収められ、最も近いステップに揃えられます。コンストラクタは min < max と step > 0 をアサートします。
labelString? · nullトラックの上にラベルと現在値を表示する見出し行を追加します。null にするとトラックだけになるため、代わりに semanticLabel を指定してください。
labelBuilderTRSliderLabelBuilder? · null見出し行とセマンティクスの値を整形します。単位や百分率に使ってください。指定しない場合、整数は小数部なしで表示されます。
semanticLabelString? · null支援技術に対してコントロールの名前を伝えます。未指定の場合は label にフォールバックするため、表示ラベルがない場合や、それだけでは意味が伝わらない場合に設定してください。
errorTextString? · nullトラックの下にエラー色のメッセージを表示し、トラックの塗りつぶし部分にも同じ色を適用します。TRSliderFormField がバリデータからこの値を渡すため、直接指定するのは Form の外の場合だけにしてください。
uiSizeTRUiSize · TRUiSize.mdつまみとトラック周辺に確保される領域の大きさを調整します。トラックの太さはどのサイズでも同じです。密度の高い画面では TRUiSize.md を使ってください。
verticalbool · falseトラックを縦向きにし、最大値を上端に配置します。縦スライダーは固定幅を取り、親から与えられた高さいっぱいに広がるため、その高さを制約してください。
enabledbool · trueポインターとキーボードによる変更を止め、セマンティクスノードから増減アクションを取り除きます。値は表示されたままです。Flutter では React ページの disabled ではなく enabled を使います。

TRRangeSlider のプロパティ

Prop型 / デフォルト用途
defaultValueRangeValues · RangeValues(25, 75)非制御コンストラクタの初期値の組を指定します。.controlled コンストラクタは代わりに value を受け取り、これは必須です。
minGapdouble · 02 つのつまみを値の単位で少なくともこの分だけ離します。動かしているつまみが間隔の位置で止まり、もう一方は読み手が置いた位置に留まります。
onValueChangeValueChanged<RangeValues>? · null境界と最小間隔が適用されたあとの値の組全体を、変更のたびに通知します。
labelBuilderTRSliderLabelBuilder? · null両端をそれぞれ整形します。見出し行は 2 つの結果を 20%–80% のように en ダッシュでつなぎます。

TRSliderFormField と TRRangeSliderFormField

Prop型 / デフォルト用途
initialValuedouble · 0 / RangeValues · RangeValues(25, 75)フィールドの初期値です。FormState.reset はスライダーをこの値に戻します。
validatorFormFieldValidator? · nullエラーメッセージを返すと FormState.validate を通さず、null を返すと値を受け入れます。フォームフィールドはそのメッセージを errorText としてスライダーに渡します。
autovalidateModeAutovalidateMode? · nullバリデータを実行するタイミングを決めます。AutovalidateMode.onUserInteraction はつまみが動かされるまで何も表示せず、値が条件を満たした時点でエラーを消します。
onSavedFormFieldSetter? · nullFormState.save の実行時に値を受け取ります。validate を通過したあと、送信結果をまとめるのに使ってください。