Group#

Flutter의 Stack + Positioned, CSS position: absolute에 대응하는 순수 절대 배치 컨테이너입니다. 자식은 [CoreGroupPositionedData]를 통해 top/left/right/bottom/width/height를 직접 지정합니다. 시각 토큰(배경·보더·그림자)은 가지지 않으며 레이아웃만 담당합니다.

Live Preview#

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

  @override
  Component build(BuildContext context) {
    final cs = context.theme.colorScheme;
    return div(
      [
        CoGroup(
          children: [
            CoreGroupPositionedData<Component>(
              top: 0,
              left: 0,
              width: 120,
              height: 80,
              child: div([], classes: 'bg-${cs.primary} w-full h-full'),
            ),
            CoreGroupPositionedData<Component>(
              top: 40,
              left: 80,
              width: 120,
              height: 80,
              child: div([], classes: 'bg-${cs.secondary} w-full h-full'),
            ),
            CoreGroupPositionedData<Component>(
              bottom: 0,
              right: 0,
              child: div(
                [Component.text('pinned')],
                classes: 'text-${cs.onSurface}',
              ),
            ),
          ],
        ),
      ],
      styles: const Styles(raw: {'width': '320px', 'height': '160px'}),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return SizedBox(
      width: 320,
      height: 160,
      child: CoGroup(
        children: [
          CoreGroupPositionedData<Widget>(
            top: 0,
            left: 0,
            width: 120,
            height: 80,
            child: ColoredBox(color: theme.colorScheme.primary),
          ),
          CoreGroupPositionedData<Widget>(
            top: 40,
            left: 80,
            width: 120,
            height: 80,
            child: ColoredBox(color: theme.colorScheme.secondary),
          ),
          CoreGroupPositionedData<Widget>(
            bottom: 0,
            right: 0,
            child: Text(
              'pinned',
              style: theme.typography.bodyMedium.copyWith(
                color: theme.colorScheme.onSurface,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

사용 시기 (When to Use)#

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

• 자식을 정확한 픽셀 좌표로 겹쳐 배치해야 할 때 (오버레이, 뱃지, 커스텀 HUD 등)
• Flutter Stack 또는 CSS absolute 레이아웃이 필요한 크로스 플랫폼 블록을 만들 때

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

• Gap / Basic: 순차/플렉스 배치
• Card / Dialog: 시각 컨테이너가 필요할 때

기본 사용법 (Basic Usage)#

CoGroup(
  children: [
    CoreGroupPositionedData<Widget>(
      top: 0,
      left: 0,
      width: 120,
      height: 80,
      child: ColoredBox(color: Colors.red),
    ),
    CoreGroupPositionedData<Widget>(
      bottom: 0,
      right: 0,
      child: Text('pinned'),
    ),
  ],
)

Props / Parameters#

CoGroup#

CoreGroupPositionedData<W>#

편의 생성자#

CoreGroupPositionedData.fromRect(child, rectLeft, rectTop, rectWidth, rectHeight) — 사각 영역 기반 생성자.

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

관련 컴포넌트 (Related Components)#

• StackLayout: Stack 기반 겹침 레이아웃
• Window: 제목바/리사이즈 핸들이 있는 윈도우 프레임