OutlinedContainer#

child 를 토큰 기반 chrome(border + radius + optional padding + shadow + blur)으로 감싸는 박스 프리미티브(인프라)입니다. Card·Window·Alert·ChipInput 등 다수 컴포넌트가 이 박스 chrome 위에 쌓입니다. Web 은 <div> + Tailwind 유틸리티, Flutter 는 동일 CoreOutlinedContainerContract 필드를 읽어 양 플랫폼이 default 를 공유합니다.

Live Preview#

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

  @override
  Component build(BuildContext context) {
    return OutlinedContainer(
      containerStyle: const CoreOutlinedContainerStyle(
        padding: CoreEdgeInsets.all(CoreSpace.space16),
      ),
      child: Text('테두리 컨테이너').bodyMedium,
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return OutlinedContainer(
      containerStyle: const CoreOutlinedContainerStyle(
        padding: CoreEdgeInsets.all(CoreSpace.space16),
      ),
      child: Text('테두리 컨테이너').bodyMedium,
    );
  }
}

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

  @override
  Component build(BuildContext context) {
    return div(
      [
        // 토큰-정확 getter combo — 이름이 곧 값 (getter 이름 = Core 토큰 상수 1:1).
        OutlinedContainer(
          containerStyle: const CoreOutlinedContainerStyle(
            padding: CoreEdgeInsets.all(CoreSpace.space16),
          ),
          child: Text('테두리 컨테이너').bodyMedium,
        ).radius16.primary,
        const Gap.space12(),
        // withStyle full-control — getter 가 없는 필드(borderWidth)까지 한 번에.
        OutlinedContainer(
          child: Text('Full control').bodyMedium,
        ).withStyle(
          const CoreOutlinedContainerStyle(
            borderColor: CoreColor.token(CoreColors.tertiary),
            borderWidth: CoreStrokeWidth.stroke2,
            padding: CoreEdgeInsets.symmetric(
              horizontal: CoreSpace.space24,
              vertical: CoreSpace.space8,
            ),
          ),
        ),
      ],
      classes: 'flex flex-col items-start',
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 토큰-정확 getter combo — 이름이 곧 값 (getter 이름 = Core 토큰 상수 1:1).
        OutlinedContainer(
          containerStyle: const CoreOutlinedContainerStyle(
            padding: CoreEdgeInsets.all(CoreSpace.space16),
          ),
          child: Text('테두리 컨테이너').bodyMedium,
        ).radius16.primary,
        const Gap.space12(),
        // withStyle full-control — getter 가 없는 필드(borderWidth)까지 한 번에.
        OutlinedContainer(
          child: Text('Full control').bodyMedium,
        ).withStyle(
          const CoreOutlinedContainerStyle(
            borderColor: CoreColor.token(CoreColors.tertiary),
            borderWidth: CoreStrokeWidth.stroke2,
            padding: CoreEdgeInsets.symmetric(
              horizontal: CoreSpace.space24,
              vertical: CoreSpace.space8,
            ),
          ),
        ),
      ],
    );
  }
}

사용법#

OutlinedContainer(
  containerStyle: const CoreOutlinedContainerStyle(
    padding: CoreEdgeInsets.all(CoreSpace.space16),
  ),
  child: Text('테두리 컨테이너').bodyMedium,
)

Props#

스타일 시스템 (Style System)#

CoreOutlinedContainerStyle 필드#

사용 가이드라인 (Usage Guidelines)#

✅ Do#

OutlinedContainer(
  containerStyle: const CoreOutlinedContainerStyle(
    borderRadius: CoreBorderRadius.all(CoreRadius.radius12),
    padding: CoreEdgeInsets.all(CoreSpace.space16),
  ),
  child: Text('내용').bodyMedium,
)

❌ Don't#

// ❌ role/aria 없이 대화상자·영역처럼 쓰는 컨테이너로 오용
OutlinedContainer(
  child: importantDialogContent,
)

접근성 (Accessibility)#

역할 / Semantics#

자체 role 이 없습니다. Flutter 에는 role 을 부여하는 Semantics 래퍼가 없고, 유일한 semantics 호출은 dashed/dotted 테두리를 그리는 CustomPaint 오버레이를 감싼 ExcludeSemantics 입니다. Web 은 <div> 에 호출자 passthrough 속성만 싣고, dashed 테두리용 <svg> 오버레이에는 aria-hidden="true" 를 붙입니다. landmark·region·group·aria-label 중 어느 것도 양 플랫폼에서 나오지 않습니다.

읽는 사람에게 이는 이 박스가 접근성 트리에 존재하지 않는 것과 같다는 뜻입니다 — 이 표면에 이름이나 영역 의미가 필요하면 소비자가 직접 부여해야 합니다.

키보드#

처리하는 키가 없습니다. Web 은 호출자 eventHandlers 를 그대로 전달하지만 자체적으로는 아무 핸들러도 설치하지 않습니다.

포커스#

포커스 대상이 아니며 어느 플랫폼에서도 traversal 정지점이 되지 않습니다. Flutter 에 FocusNode / Focus / autofocus 가 없고 Web 에 tabindex 가 없습니다. 포커스 링도 그리지 않습니다 — 이 컴포넌트의 style 은 border·radius·shadow·blur 만 해석합니다. 포커스 표시가 필요하면 FocusOutline 을 함께 쓰세요.

스크린 리더#

자기 몫으로 안내되는 것이 없고, 리더는 곧바로 child 로 통과합니다. 장식용 dashed/dotted 테두리는 양 플랫폼 모두 접근성 트리 밖에 유지되므로(Flutter ExcludeSemantics, Web aria-hidden="true") 테두리 스타일이 읽히는 일은 없습니다.

알려진 제약#

• 순수 chrome 이라 role·이름·설명·포커스 가능성이 전부 없습니다. 이 표면을 region / group / dialog 로 만들어야 한다면 소비자가 직접 주입해야 합니다.
• 주입 통로가 플랫폼마다 다릅니다 — Web 은 attributes: passthrough 로 role / aria-* 를 얹을 수 있지만, Flutter 생성자는 key · child · containerStyle 만 받습니다. Flutter 쪽에서는 이 표면에 이름이나 role 을 붙일 방법이 아예 없으므로, 필요하면 OutlinedContainer 를 소비자가 자기 Semantics 로 감싸야 합니다.
• 전환 애니메이션에 aria-busy 나 live region 처리가 없습니다 — Flutter 의 AnimatedContainer chrome 전환은 보조기술에 아무것도 알리지 않습니다. 전환의 모션 축 자체는 전역 접근성 축 에서 다룹니다.