Tinyrack

Checkbox

制御・非制御の状態と Flutter Form API で、二値または一部選択を受け取ります。

制御・非制御の状態と Flutter Form API で、二値または一部選択を受け取ります。

主なプロパティ

プロパティ説明
選択状態未選択、選択済み、または一部だけ選択された集合を示す indeterminate を使います。
状態管理ローカル状態には defaultChecked、制御状態には checked と onCheckedChange を使います。
利用可否readOnly はフォーカスとフォーム値を保ち、disabled は操作を止めて TRFormValues から除外します。
サイズmd、lg から選びます。デフォルトは md です。
フォームTRCheckboxFormField は検証、保存、リセット、状態復元、明示的なオン・オフ値に対応します。

すべてのチェックボックスに表示ラベルまたは semanticLabel を指定してください。検証、保存、リセット、名前付きの TRFormValues が必要な場合は TRCheckboxFormField を使います。

インストール

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

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 BackupChoice extends StatefulWidget {
  const BackupChoice({super.key});

  @override
  State<BackupChoice> createState() => _BackupChoiceState();
}

class _BackupChoiceState extends State<BackupChoice> {
  bool enabled = true;

  @override
  Widget build(BuildContext context) => Row(
    mainAxisSize: MainAxisSize.min,
    spacing: TRSpacing.small,
    children: [
      TRCheckbox(
        checked: enabled,
        semanticLabel: 'Enable backups',
        onCheckedChange: (value) => setState(() => enabled = value),
      ),
      const TRText('Enable backups', variant: TRTextVariant.bodySm),
    ],
  );
}

例

未選択、選択済み、一部選択 パーマリンク

チェックボックスが一部だけ選択された集合を要約する場合に限り、indeterminate を使います。

小、中、大 パーマリンク

周囲のコントロールの密度に合わせて md、lg を選びます。

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

読み取り専用はフォーカスとフォーム値を保ち、無効はどちらも保持しません。

必須選択とエラー回復 パーマリンク

TRCheckboxFormField で同意を検証し、無効なコントロール状態を表示します。

明示的なオン・オフ値 パーマリンク

名前を登録し、各状態で TRFormValues が収集する値を指定します。

API

選択と操作

Prop型 / デフォルト用途
checked, defaultCheckedbool?, bool = false選択状態を制御または初期化します。
indeterminatebool = false一部選択の状態を表示します。選択が確定したら解除してください。
onCheckedChangeValueChanged<bool>?選択変更の試行を通知します。
disabled, readOnlybool = false操作を無効にするか、フォーカス可能な読み取り専用値を保ちます。
uiSize, semanticLabelTRUiSize, String?コントロールのサイズとアクセシブルな名前を指定します。

フォームフィールド

Prop型 / デフォルト用途
initialValue, namebool = false, String?フィールドを初期化し、名前付きの TRFormValues 項目を登録します。
checkedValue, uncheckedValueObject? = true, false選択済みと未選択の状態で収集する値を指定します。
validator, onSaved, onResetFormField callbacksFlutter の検証、保存、リセットのライフサイクルに参加します。
autovalidateMode, restorationIdFlutter FormField options自動検証と状態復元を設定します。