HeroSection#
랜딩 페이지 최상단의 대형 히어로 블록입니다. 배경색 + 배경 이미지 + 반투명 오버레이 + 중앙 정렬 콘텐츠의 조합을 하나의 컴포넌트로 제공합니다.
Live Preview#
Web
Welcome to CoUI
Cross-platform design system for Flutter and Jaspr.
Flutter
Loading Flutter...
class HeroSectionDefaultExample extends StatelessComponent {
const HeroSectionDefaultExample({super.key});
@override
Component build(BuildContext context) {
final cs = context.theme.colorScheme;
return div(
[
HeroSection(
heroSectionStyle: const CoreHeroSectionStyle(minHeight: 280),
child: div(
[
div(
[Component.text('Welcome to CoUI')],
classes:
'text-${CoreTextStyles.titleLarge.name} font-${CoreFontWeight.scale.semibold} text-${cs.onSurface}',
),
div(
[
Component.text(
'Cross-platform design system for Flutter and Jaspr.',
),
],
classes:
'text-${CoreTextStyles.bodyMedium.name} text-${cs.onSurfaceVariant} text-center',
styles: const Styles(raw: {'margin-top': '12px'}),
),
],
classes: 'flex flex-col items-center',
),
),
],
// w-full 은 클래스로 — docs 의 폭 부여 룰(:has(.w-full))이
// 클래스만 매칭해서 inline width 로는 래퍼가 content-size 로 남는다.
classes: 'w-full',
styles: const Styles(raw: {'height': '280px'}),
);
}
}class HeroSectionDefaultExample extends StatelessWidget {
const HeroSectionDefaultExample({super.key});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return SizedBox(
height: 280,
child: HeroSection(
heroSectionStyle: const CoreHeroSectionStyle(minHeight: 280),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
'Welcome to CoUI',
style: theme.typography.titleLarge.toValue(theme: theme).copyWith(
color: theme.colorScheme.onSurface.toValue(),
fontWeight: FontWeight.w600,
),
),
SizedBox(height: CoreSpace.space12),
Text(
'Cross-platform design system for Flutter and Jaspr.',
textAlign: TextAlign.center,
style: theme.typography.bodyMedium.toValue(theme: theme).copyWith(
color: theme.colorScheme.onSurfaceVariant.toValue(),
),
),
],
),
),
);
}
}사용 시기 (When to Use)#
이 컴포넌트를 사용하세요:
- 랜딩 페이지 상단의 대형 배너/히어로 영역
- 배경 이미지 위에 제목·설명·CTA를 중앙 정렬로 배치하고 싶을 때
대신 다른 컴포넌트를 사용하세요:
Banner: 짧은 공지/알림 바Card: 작은 콘텐츠 블록
기본 사용법 (Basic Usage)#
HeroSection(
imageUrl: 'https://example.com/bg.jpg',
overlayColor: CoreColor(0x99000000),
minHeight: 400,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('Welcome to CoUI', style: titleStyle),
Text('Cross-platform design system.', style: bodyStyle),
],
),
)
Props / Parameters#
HeroSection#
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
child | W | 필수 | 중앙에 배치되는 콘텐츠 위젯/컴포넌트 |
backgroundColor |
CoreColor? |
surfaceContainer |
배경색 override |
imageUrl |
String? |
null | 배경 이미지 URL (cover/center 렌더) |
overlayColor |
CoreColor? |
null | 이미지 위에 그려질 반투명 오버레이 |
minHeight | double? | 400 | 최소 높이 |
padding | CoreEdgeInsets? | 32 | 내부 패딩 |
semanticLabel |
String? |
null | 스크린리더 region label |
크로스 플랫폼 차이점 (Platform Differences)#
| 항목 | Flutter | Web |
|---|---|---|
| 클래스명 | HeroSection | HeroSection |
| child 타입 | Widget | Component |
| padding | CoreEdgeInsets? | CoreEdgeInsets? |
| 배경 이미지 | DecorationImage(NetworkImage) + BoxFit.cover |
CSS
background-image: url(...)
+
background-size: cover; background-position: center
|
| overlay | Positioned.fill + ColoredBox |
<div class="absolute inset-0"> |
| 중앙 정렬 | Stack + Center + Padding |
flex items-center justify-center |