Tinyrack

Checkbox

제어·비제어 상태와 Flutter Form API로 이진 또는 일부 선택을 입력받아요.

제어·비제어 상태와 Flutter Form API로 이진 또는 일부 선택을 입력받아요.

핵심 속성

속성설명
선택 상태선택 안 함, 선택함 또는 일부만 선택한 집합을 나타내는 indeterminate를 사용해요.
상태 관리로컬 상태에는 defaultChecked를, 제어 상태에는 checkedonCheckedChange를 사용해요.
사용 가능 여부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 and 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자동 검증과 상태 복원을 설정해요.