Scaffold#

Scaffold는 화면의 기본 구조를 잡는 통합 레이아웃 컴포넌트입니다. 위로 쌓이는 헤더 섹션, 중앙 본문, 아래로 쌓이는 푸터 섹션을 제공하며, 선택적으로 사이드바, 플로팅 액션 버튼, 로딩 진행 인디케이터를 함께 표시할 수 있습니다. 헤더 영역은 AppBar로 leading / 중앙 / trailing 클러스터를 손쉽게 구성합니다.

Live Preview#

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

  @override
  Component build(BuildContext context) {
    return Scaffold(
      headers: [
        AppBar(
          title: const Text('Dashboard').titleMedium,
          trailing: const [Icon(LucideIcons.settings)],
        ),
      ],
      footers: [
        AppBar(
          title: const Text('Ready').bodySmall.onSurfaceVariant,
        ),
      ],
      child: div(
        [const Text('Main content area')],
        classes: 'flex items-center justify-center',
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      headers: [
        AppBar(
          title: const Text('Dashboard').titleMedium,
          trailing: const [Icon(LucideIcons.settings)],
        ),
      ],
      footers: [
        AppBar(
          title: const Text('Ready').bodySmall.onSurfaceVariant,
        ),
      ],
      child: const Center(child: Text('Main content area')),
    );
  }
}

사용 시기 (When to Use)#

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

• 헤더 / 본문 / 푸터로 구성된 일관된 화면 골격이 필요할 때
• 본문 옆에 사이드바를 두는 데스크톱 레이아웃
• 본문 위에 떠 있는 플로팅 액션 버튼이나 상단 로딩 인디케이터가 필요할 때

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

• Card: 화면 일부의 콘텐츠 박스가 필요할 때
• NavigationBar: 헤더가 아닌 주요 섹션 이동 네비게이션이 필요할 때

기본 사용법 (Basic Usage)#

Scaffold(
  headers: [
    AppBar(
      title: const Text('Dashboard').titleMedium,
      trailing: const [Icon(LucideIcons.settings)],
    ),
  ],
  footers: [
    AppBar(
      title: const Text('Ready').bodySmall.onSurfaceVariant,
    ),
  ],
  child: const Center(child: Text('Main content area')),
)

Scaffold(
  headers: [
    AppBar(
      title: const Text('Dashboard').titleMedium,
      trailing: const [Icon(LucideIcons.settings)],
    ),
  ],
  footers: [
    AppBar(
      title: const Text('Ready').bodySmall.onSurfaceVariant,
    ),
  ],
  child: div(
    [const Text('Main content area')],
    classes: 'flex items-center justify-center',
  ),
)

Props / Parameters#

Scaffold#

AppBar#

동작 스펙 (Behavior)#

레이아웃#

• 고정 모드: 헤더 / 푸터가 레이아웃 공간을 차지하며 본문을 밀어냄
• 플로팅 모드: floatingHeader / floatingFooter가 true면 본문 위에 겹쳐 표시
• 사이드바: sidebar를 지정하면 본문과 가로로 나란히 배치

로딩 인디케이터#

• loadingProgress를 지정하면 화면 최상단에 진행 막대 표시
• loadingProgressIndeterminate가 true면 무한 로딩 막대 표시

접근성 (Accessibility)#

스크린 리더#

• Flutter: 본문을 ColoredBox로 감싸 레이아웃만 담당 — 헤더 / 푸터의 시맨틱은 각 슬롯 위젯이 담당
• Web: 루트 <div role="group" aria-label="Scaffold"> 적용

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

관련 컴포넌트 (Related Components)#

• NavigationBar: 주요 섹션 이동 네비게이션 컨테이너
• Card: 화면 일부의 콘텐츠 박스