ObjectInput

구분자로 연결된 키-값 구조화 입력 컴포넌트

ObjectInput#

연/월/일처럼 여러 키-값 필드를 구분자로 연결해 한 줄로 입력받는 구조화 입력 컴포넌트입니다. 각 필드의 값이 Map<String, String> (필드 key → 값) 으로 방출됩니다. 단일 문자열을 마스킹하는 FormattedInput 의 구조화 데이터 버전입니다.

Live Preview#

Web

Flutter

Loading Flutter...

class ObjectInputDefaultExample extends StatelessComponent {
  const ObjectInputDefaultExample({super.key});

  @override
  Component build(BuildContext context) {
    return ObjectInput(
      fields: const [
        CoreObjectInputField(key: 'year', placeholder: 'YYYY', maxLength: 4, pattern: r'\d'),
        CoreObjectInputField(key: 'month', placeholder: 'MM', maxLength: 2, pattern: r'\d'),
        CoreObjectInputField(key: 'day', placeholder: 'DD', maxLength: 2, pattern: r'\d'),
      ],
      separator: '/',
      onChanged: (values) => print('$values'),
    );
  }
}

class ObjectInputDefaultExample extends StatelessWidget {
  const ObjectInputDefaultExample({super.key});

  @override
  Widget build(BuildContext context) {
    return ObjectInput(
      fields: const [
        CoreObjectInputField(key: 'year', placeholder: 'YYYY', maxLength: 4, pattern: r'\d'),
        CoreObjectInputField(key: 'month', placeholder: 'MM', maxLength: 2, pattern: r'\d'),
        CoreObjectInputField(key: 'day', placeholder: 'DD', maxLength: 2, pattern: r'\d'),
      ],
      separator: '/',
      onChanged: (values) => debugPrint('$values'),
    );
  }
}

사용 시기 (When to Use)#

이 컴포넌트를 사용하세요:

연/월/일, 시/분/초처럼 의미가 다른 여러 필드를 한 줄로 입력받는 경우
각 필드 값을 키별로 구분해 다뤄야 하는 경우

대신 다른 컴포넌트를 사용하세요:

FormattedInput: 단일 문자열을 마스킹하는 경우
TextField: 단일 자유 입력

기본 사용법 (Basic Usage)#

ObjectInput(
  fields: const [
    CoreObjectInputField(key: 'year', placeholder: 'YYYY', maxLength: 4),
    CoreObjectInputField(key: 'month', placeholder: 'MM', maxLength: 2),
    CoreObjectInputField(key: 'day', placeholder: 'DD', maxLength: 2),
  ],
  separator: '/',
  onChanged: (values) => print(values),
)

ObjectInput(
  fields: const [
    CoreObjectInputField(key: 'year', placeholder: 'YYYY', maxLength: 4),
    CoreObjectInputField(key: 'month', placeholder: 'MM', maxLength: 2),
    CoreObjectInputField(key: 'day', placeholder: 'DD', maxLength: 2),
  ],
  separator: '/',
  onChanged: (values) => print(values),
)

Props / Parameters#

속성	타입	기본값	설명
`fields`	`List<CoreObjectInputField>`	—	키-값 필드 정의 목록 (필수)
`values`	`Map<String, String>?`	`null`	초기 값 (필드 key → 값)
`separator`	`String?`	`null`	필드 사이에 표시할 구분자 텍스트
`enabled`	`bool`	`true`	상호작용 가능 여부
`onChanged`	`void Function(Map<String, String>)?`	`null`	값 변경 콜백 (전체 맵 전달)
`leading`	`Widget? / Component?`	`null`	필드 앞 위젯
`trailing`	`Widget? / Component?`	`null`	필드 뒤 위젯
`objectInputStyle`	`CoreObjectInputStyle?`	`null`	컨테이너 색상 / 테두리 / padding 오버라이드

CoreObjectInputField#

속성	타입	설명
`key`	`String`	값 맵에서의 고유 키
`placeholder`	`String`	빈 필드 placeholder
`maxLength`	`int?`	최대 입력 길이

동작 스펙 (Behavior)#

인터랙션#

입력: 각 필드 입력 시 onChanged에 전체 값 맵 전달
포커스: 컨테이너가 포커스되면 테두리 색이 강조됨
enabled가 false이면 비활성

크로스 플랫폼 차이점 (Platform Differences)#

항목	Flutter	Web
클래스명	`ObjectInput`	`ObjectInput`
필드	`TextField` (chrome 제거)	native `<input>`
포커스 링	`Focus` + 테두리 색 변경	`focus` / `blur` 이벤트

FormattedInput: 단일 문자열 마스크 입력
TextField: 자유 형식 텍스트 입력