Tinyrack

Textarea

テーマ適用済みの枠線と状態で複数行テキストを受け取ります。

テーマ適用済みの枠線と状態で複数行テキストを受け取ります。

主なプロパティ

プロパティ説明
値非制御の初期状態には initialValue を、画面側がテキストを保持する場合は controller を渡してください。両方を指定すると assert に掛かります。onChanged は値の所有権を持たず、編集の通知だけを行います。
サイズuiSize がコントロールのタイポグラフィと左右の余白を決め、ボックスは対応するコントロール高さの 2 倍を最小高さとして保ちます。開始時の高さは minLines（既定値 2）で決まり、maxLines は未指定なので行が増えるとボックスは下方向に伸びます。Web のコントロールと異なり、リサイズハンドルはありません。
状態enabled: false は無効時の不透明度トークンを適用し、readOnly: true は淡い背景の上でテキストを選択できる状態に保ちます。どちらも hover 時に枠線が濃くなる挙動を止めます。フォーカス時は枠線がフォーカス色になり、太いフォーカス枠線幅に切り替わります。
フォームname を設定すると最も近い TRForm に登録され、テキストが TRFormState.values と save() の結果に含まれます。ただし TRTextField と異なり FormField ではないため、validator は使えず TRFormState.reset() でもテキストは戻りません。送信ハンドラーで検証し、メッセージは TRField(errorText:) で表示し、テキストは自分で保持する controller から戻してください。
フレームsolid は枠線と背景を自分で描画します。ghost は通常時のみ両方を外し、TRCard のコンポーザーなど囲む側のサーフェスがフレームを持つようにします。ホバーとフォーカスは textarea が引き続き自分で描くためサーフェス側で用意する必要はなく、枠線のボックスは同じ幅で保たれるので appearance を切り替えてもフィールドは動きません。plain はホバーとフォーカスも手放します。囲むサーフェスがグループ全体のフォーカスを示す場合に使います。
ラベルTRTextarea 自体はラベルを描画しません。見えるラベルや説明、エラーメッセージを付けるには TRField で包んでください。placeholder は placeholder 用のテキスト色で表示されるヒントで、1 文字入力すると消えるためラベルの代わりにはなりません。

TRTextarea は TRTextField の複数行版です。短い 1 つの値ではなく、メモや説明を受け取る場合に使ってください。

インストール

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

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

TRField(
  label: 'Rack notes',
  control: TRTextarea(
    name: 'notes',
    placeholder: 'Operational notes',
    onChanged: setNotes,
  ),
)

例

運用メモ パーマリンク

TRField で包んでメモに見えるラベルを付け、placeholder はラベルではなく想定される内容の案内に使います。

編集可能、読み取り専用、無効 パーマリンク

メモを読める・選択できる状態に保つ場合は readOnly を、利用できない場合は enabled: false を使います。ラベルとコントロールを揃えるため、同じ状態を TRField にも渡します。

ミディアムとラージ パーマリンク

uiSize はタイポグラフィと左右の余白を変え、最小の高さは対応するコントロール高さから決まります。密度の高い画面では md を、長い文章を編集する場合は lg を選びます。

フォーム値と手動リセット パーマリンク

name を付けた textarea は TRFormState.values に現れます。FormField ではないため reset() ではテキストが残るので、元のメモは自分で保持する controller から戻します。

必須項目の検証と復帰 パーマリンク

TRTextarea には required や validator のプロパティがありません。送信時にテキストを確認し、問題は TRField(errorText:) で伝え、focusNode でフォーカスを戻してすぐ修正できるようにします。

API

TRTextarea のプロパティ

Prop型 / デフォルト用途
controllerTextEditingController? · nullウィジェットの外側でテキストを保持します。initialValue とは併用できず、dispose は呼び出し側の責任です。
initialValueString? · null内部のコントローラーを一度だけ初期化します。以降に引数を変更しても、入力済みのテキストは置き換わりません。
placeholderString? · null入力が空の間、placeholder 用のテキスト色でヒントを表示します。
onChangedValueChanged<String>? · null編集のたびに現在のテキストとともに呼び出されます。
nameString? · null最も近い TRForm にこのキーで値を登録します。無効なフィールドは収集される値から除外され、reset() ではテキストは戻りません。
uiSizeTRUiSize · TRUiSize.md文字サイズ、左右の余白、そして最小のボックス高さの基準となるコントロール高さを決めます。
minLinesint · 2ボックスが伸び始めるまでに表示する行数を指定します。実際の高さは、現在の uiSize のコントロール高さの 2 倍を下回りません。
enabledbool · true編集とフォーカスを止め、無効時の不透明度トークンを適用し、フォームの値からもそのフィールドを外します。
readOnlybool · false淡い背景の上でテキストのフォーカスと選択は可能なまま、編集だけを止めます。値はフォームにそのまま渡されます。
autofocusbool · falseTextarea が最初にマウントされたときにフォーカスを要求します。メモの入力が画面を開いた唯一の理由である場合にだけ使ってください。
focusNodeFocusNode? · null外部のフォーカスノードを渡し、送信失敗後などに画面側から Textarea へフォーカスを移せるようにします。
appearanceTRFieldAppearance · solid枠線のある既定のコントロール、通常時の枠線と背景を外して上位のサーフェスが囲めるようにしつつホバーとフォーカスは自身で描く ghost、フォーカスもそのサーフェスに委ねる plain のいずれかを選びます。