AppBar — 정의, 설정 및 Flutter 위젯

Flutter에서 AppBar란 무엇인가

AppBar는 Scaffold의 상단에 표시되는 표준 Material 상단 패널 컴포넌트입니다. 화면 제목, 네비게이션 버튼(보통 “헤버거” 아이콘 또는 “뒤로가기” 화살표) 및 작업(검색, 설정 또는 다른 기능을 여는 아이콘)을 포함합니다. AppBar는 플래티폼에 맞게 자동으로 적응합니다: Android에서는 표준 Material 하단 그림자를 사용하고, iOS에서는 투명도가 있는 더 평품한 디자인을 사용합니다.

AppBar는 PreferredSizeWidget 인터페이스를 구현하므로, 높이가 고정되어 있으며 빌드 전에 알 수 있습니다. 기본적으로, 세로 모드에서 Android의 AppBar 높이는 56dp, iOS는 44dp이며, 상단의 SafeArea를 고려합니다. 이 기능을 통해 Scaffold는 렌더링 중 재구성을 피하며 body용 공간을 미리 계산할 수 있습니다.

Flutter Material Library Guide (2026)에 따르면, AppBar는 여러 번의 반복을 거쳐왔습니다: Flutter 1.x에서는 텍스트가 있는 단순한 컨테이너였으며, Flutter 2.x에서는 Material 3와 flexibleSpace을 지원했고, Flutter 3.x에서는 System UI(상태 바 색상, 투명도)와 통합되었습니다. 현대 AppBar는 Android 12+장치에서 Material You의 Dynamic Color를 지원합니다.

AppBar 구조: 필드 및 매개변수

AppBar는 상단 패널의 각 부분을 제어하는 매개변수 세트를 제공합니다. 이러한 필드를 이해하면 커스텀 해결책을 만들지 않고도 패널을 다양한 디자인 요구사항에 유연하게 설정할 수 있습니다.

Title 및 leading: 제목 및 네비게이션 설정

title 필드는 모든 위젯을 수락하지만, 가장 일반적으로는 TextStyle을 통한 스타일 설정으로 Text를 사용합니다. 긴 제목의 경우, 공간이 충분하지 않을 때 문자열이 올바르게 잘려지도록 title을 Flexible에 래핑할 것을 권장합니다. leading 필드는 명시적으로 설정되지 않은 경우 Navigator.push를 통해 중첩 화면으로 이동할 때 자동으로 BackButton으로 대체됩니다.

Actions: 작업 아이콘 배치

actions 목록에는 AppBar의 오른쪽 끝에 정렬된 위젯이 포함됩니다. 각 요소는 48dp(Material Design 표준)보다 넓지 않아야 합니다. 작업을 그룹화하려면 PopupMenuButton을 사용하세요 — 이는 머 중요하지 않은 옵션을 드롭다운 메뉴에 숨기고 인터페이스 밀도에 관한 Material 게이드라인을 준수합니다.

AppBar 커스터미이징: 스타일, 색상 및 동작

AppBar는 색상, 그림자 및 패딩 필드를 통한 깊은 커스터미이징을 지원합니다. 기본 스타일링은 앱 테마에서 상속되지만, 각 필드는 개별적으로 대체할 수 있습니다. 주요 설정 시나리오를 살펴보겠습니다.

AppBar의 배경 색은 backgroundColor를 통해 설정됩니다. 지정되지 않으면 ThemeData의 appBarTheme이 사용됩니다. Material 3에서 AppBar 색상은 ColorScheme.primary에서 자동 계산되지만, 특정 화면에 대해 대체할 수 있습니다. 투명 AppBar(보통 프로필에서 사용)의 경우 elevation: 0과 함께 backgroundColor: Colors.transparent를 설정하세요.

elevation 필드는 AppBar 아래의 그림자를 제어합니다. 값 0은 그림자를 제거하여 Material 3에 해당하는 “평품한” 패널 효과를 만듭니다. 값 4는 표준 Material Design 그림자를 제공합니다. 커스텀 그림자 제어를 위해서는 shadowColor를 사용하세요 — 이는 패널을 콘텐츠와 시각적으로 구분하는 그림자 색상입니다.

AppBar에서 텍스트 색상을 제어하려면 foregroundColor를 사용하세요. 이 필드는 제목, 아이콘 및 actions의 텍스트 색상에 영험을 미칩니다. backgroundColor를 변경하면 대비적인 foregroundColor이 자동으로 선택되지만, 비표준 디자인을 위해 강제할 수 있습니다.

SliverAppBar: AppBar의 애니메이션 버전

SliverAppBar는 CustomScrollView 내에서 사용하도록 AppBar를 확장한 것으로, 스크롤 애니메이션(접기, 패러랙스 효과, 고정)을 지원합니다. 표준 AppBar와 달리, SliverAppBar는 sliver 위젯이며 스크롤 위치에 따라 동적으로 크기가 변경됩니다.

SliverAppBar의 주요 모드는 pinned, floating 및 snap 필드의 조합으로 결정됩니다. pinned 모드에서 패널은 화면 상단에 항상 표시됩니다. floating 모드에서는 뒤로 스크롤할 때 나타난니다. floating + snap 조합은 약간의 위로 스크롤만으로 나타나는 “붙는” 패널 동작을 만들며, 뉴스 피드에서 자주 사용됩니다.

Flutter API SliverAppBar (2026)에 따르면, SliverAppBar을 사용하려면 일반 ListView 또는 Column을 sliver 위젯이 있는 CustomScrollView로 대체해야 합니다. Scaffold는 계속 정상 작동하지만, Scaffold의 appBar 필드는 null이어야 합니다 — SliverAppBar는 CustomScrollView 내에서 첫 번째 sliver로 배치됩니다.

앱에서 AppBar 설정 예시

검색, 드롭다운 메뉴 및 TabBar가 있는 AppBar 예시를 살펴보겠습니다. 이 코드는 Flutter 프로덕션 앱에서 일반적인 상단 패널 구성을 보여줍니다.

Scaffold(
  appBar: AppBar(
    title: const Text('카탈로그'),
    centerTitle: true,
    leading: IconButton(
      icon: const Icon(Icons.menu),
      onPressed: () => Scaffold.of(context).openDrawer(),
    ),
    actions: [
      IconButton(
        icon: const Icon(Icons.search),
        onPressed: () => showSearch(context: context, delegate: ProductSearch()),
      ),
      PopupMenuButton<String>(
        onSelected: (String value) {},
        itemBuilder: (context) => [
          const PopupMenuItem(value: 'settings', child: Text('설정')),
          const PopupMenuItem(value: 'about', child: Text('앱 정보')),
        ],
      ),
    ],
    bottom: const TabBar(
      tabs: [
        Tab(text: 'All'),
        Tab(text: 'New'),
        Tab(text: 'Popular'),
      ],
    ),
  ),
  body: const TabBarView(
    children: [
      AllProductsPage(),
      NewProductsPage(),
      PopularProductsPage(),
    ],
  ),
)

예시에서 AppBar는 가운데 정렬된 제목, 왼쪽에 Drawer 여는 버튼, 오른쪽에 검색 아이콘과 드롭다운 메뉴를 포함합니다. 하단의 TabBar를 통해 상품 카테고리를 전환할 수 있습니다. 이 설정은 대부분의 모바일 앱 시나리오를 다룽니다: 네비게이션, 검색, 추가 옵션 및 섹션 전환 — 모두 하나의 상단 패널에서 가능합니다.