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,
    );
  }
}

사용법#

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

Props#