레이아웃#
CoUI 는 레이아웃을 통일 컴포넌트로 구성합니다. raw Flutter Stack/Positioned 나 네이티브 HTML 대신 아래 컴포넌트를 블럭처럼 합성하세요 — Flutter / Web 이 동일하게 렌더됩니다.
| 컴포넌트 | 용도 | 문서 |
|---|---|---|
Stacks / Position |
z-index 스택 + 위치 지정 (raw Stack/Positioned 대체) |
/components/stack-layout |
Group |
절대 좌표 배치 컨테이너 (CoreGroupPositionedData, CSS position:absolute 대응) |
/components/group |
Gap |
두 형제 사이 1-off 간격 (Gap.space16() 등) |
/components/gap |
ResponsiveGrid |
반응형 그리드 (열 수 자동) | /components/responsive-grid |
ResponsiveContainer |
breakpoint 기반 반응형 컨테이너 | /components/responsive-container |
Resizable |
드래그로 크기 조절되는 패널 | /components/resizable |
Basic |
leading/title/subtitle/trailing 정형 행 레이아웃 | /components/basic |
간격 — Gap vs spacing#
-
두 명명된 형제 사이 1-off 간격:
Gap(gapStyle: ...)또는 토큰 단축const Gap.space16(). -
N개 자식 균등 분포: Flutter
Row/Column/Wrap의spacing:(네이티브 균등 분포).
// 1-off
Column(children: [Header(), const Gap.space16(), Body()])
// N-sibling 균등
Column(spacing: CoreSpace.space12, children: [...])
모든 간격·치수는
CoreSpace등 디자인 토큰을 경유합니다 (raw 숫자 금지). 토큰 표는 색상·타이포그래피 참고.