Tinyrack

Toggle

解除するまで押下状態を保つ 2 状態のコントロールです。

解除するまで押下状態を保つ 2 状態のコントロールです。

主なプロパティ

プロパティ説明
状態pressed を渡すと状態を制御でき、渡さない場合は false の defaultPressed から自身で管理します。どちらでも onPressedChange が次の値を通知します。
利用可否disabled はタップとキーボード操作を無効にし、無効時の不透明度トークンを適用します。押下時の見た目は保たれます。
ラベルchild は必須で、表示されるアクセシブルな名前になります。どのサイズでも読めるよう短くしてください。
サイズuiSize は md、lg を受け取り、既定値は md です。各サイズは共通のコントロール指標から高さ・左右の余白・文字サイズを決めます。
グループTRToggleGroup の内側では、value を持つトグルは押下状態をグループから受け取ります。その場合 pressed と onPressedChange は使われず、グループの disabled が項目の disabled に加わります。

トグルは押下状態を保つボタンであり、フォームフィールドではありません。Semantics(button: true, toggled: pressed) を公開し、値は送信しません。ネイティブのボタンと同じく Enter は押下時、Space は離した時に作動します。値をフォームで送る必要がある場合は TRCheckbox か TRSwitch を使ってください。

インストール

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

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

class FormattingBar extends StatefulWidget {
  const FormattingBar({super.key});

  @override
  State<FormattingBar> createState() => _FormattingBarState();
}

class _FormattingBarState extends State<FormattingBar> {
  bool bold = false;

  @override
  Widget build(BuildContext context) {
    return TRToggle(
      pressed: bold,
      onPressedChange: (next) => setState(() => bold = next),
      child: const Text('太字'),
    );
  }
}

例

制御付きの書式トグル パーマリンク

pressed で状態を保持し、onPressedChange で更新すると、トグルの状態をほかの UI にも反映できます。

有効と無効の状態 パーマリンク

pressed を渡さない場合は defaultPressed から自身で状態を保持します。disabled なトグルは押された見た目を保ったまま、タップ・キーボード操作・フォーカスを受け付けません。

サイズ パーマリンク

uiSize が高さ・左右の余白・文字サイズをまとめて決めます。隣接するコントロールに合わせて選んでください。

API

TRToggle のプロパティ

Prop型 / デフォルト用途
childWidget · requiredラベルを描画します。文字のスタイルは uiSize とテーマから決まるため、TextStyle の明示は不要です。
pressedbool? · null押下状態を制御します。値がある間、ウィジェットは自分で状態を変えません。
defaultPressedbool · false制御しないトグルの初期状態を設定します。pressed を渡した場合は使われません。
onPressedChangeValueChanged<bool>? · nullタップや Enter、Space の後の次の押下値を通知します。変更を取り消す手段はありません。
disabledbool · falseポインターとキーボードの操作を無効にし、支援技術に無効状態として伝えます。
uiSizeTRUiSize · TRUiSize.mdmd、lg のコントロール指標を選びます。
valueString? · nullTRToggleGroup 内でトグルを識別します。グループ内で一意かつ変化しない値にしてください。
focusNodeFocusNode? · nullフォーカス処理を引き受けます。渡さない場合はトグルが自身のノードを生成・破棄するか、グループが管理するノードを利用します。
autofocusbool · falseトグルが最初に表示された時にフォーカスを要求します。1 画面につき 1 か所までにしてください。