Flutter AppBar와 Drawer 기본 설정

Flutter에서 화면 상단 바와 옆 메뉴를 가장 많이 넣는 방법은 Scaffold 안에 appBar와 drawer를 함께 두는 방식입니다. Scaffold는 화면에 필요한 기본 요소를 올려두기 편한 위젯이고, AppBar는 상단 바를, Drawer는 왼쪽에서 나오는 메뉴 영역을 맡습니다.

AppBar 기본 개념

AppBar는 화면 맨 위에 표시되는 상단 바입니다. 보통 뒤로가기 버튼이나 메뉴 아이콘이 들어가는 leading, 제목을 넣는 title, 오른쪽 아이콘들을 넣는 actions, 탭을 붙일 때 쓰는 bottom, 배경 쪽을 꾸밀 때 쓰는 flexibleSpace 같은 항목을 자주 사용합니다.

AppBar 자주 넣는 항목

가장 기본은 제목 하나만 넣는 방식입니다. 여기에 검색, 설정, 알림 같은 버튼을 오른쪽에 붙이고 싶으면 actions를 추가하면 됩니다. 왼쪽에 아이콘을 직접 넣고 싶다면 leading을 사용하면 되고, 별도로 넣지 않아도 상황에 따라 Flutter가 뒤로가기 버튼이나 메뉴 버튼을 자동으로 보여주기도 합니다.

Drawer 기본 개념

Drawer는 화면 왼쪽에서 밀려 나오는 메뉴판이라고 생각하면 편합니다. 보통 앱의 주요 메뉴, 내 정보, 설정, 공지사항 같은 항목을 넣을 때 사용합니다. Flutter에서는 Scaffold의 drawer 속성에 Drawer 위젯을 넣어서 사용합니다.

Drawer 열고 닫는 방식

Scaffold에 drawer가 연결되어 있으면 AppBar 쪽에 메뉴 아이콘이 자동으로 붙는 경우가 많습니다. 사용자는 그 버튼을 눌러 열 수 있고, 바깥 어두운 부분을 누르거나 스와이프하거나 Navigator.pop(context)를 호출해서 닫을 수도 있습니다.

기본 예제 작성

아래 예제는 AppBar와 Drawer를 가장 단순하게 붙인 코드입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('홈 화면'),
        centerTitle: true,
        actions: [
          IconButton(
            icon: const Icon(Icons.search),
            onPressed: () {},
          ),
        ],
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text(
                '메뉴',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                ),
              ),
            ),
            ListTile(
              leading: const Icon(Icons.home),
              title: const Text('홈'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: const Icon(Icons.settings),
              title: const Text('설정'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
      body: const Center(
        child: Text('AppBar와 Drawer 기본 예제'),
      ),
    );
  }
}

코드 핵심 설명

이 코드에서 가장 먼저 볼 부분은 Scaffold입니다. 화면의 상단 바는 appBar에 넣고, 옆 메뉴는 drawer에 넣었습니다. 이렇게 두기만 해도 Flutter가 기본 동작을 대부분 처리해주기 때문에 처음 배울 때 아주 편합니다.

AppBar(title: Text('홈 화면'))은 상단 제목을 보여주는 부분입니다. centerTitle: true를 넣으면 제목을 가운데로 보낼 수 있고, actions 안에는 오른쪽 아이콘 버튼들을 차례대로 넣을 수 있습니다.

Drawer 안에는 보통 ListView를 많이 씁니다. 메뉴가 많아졌을 때 아래로 스크롤하기 좋기 때문입니다. 맨 위 안내 영역은 DrawerHeader, 실제 메뉴 항목은 ListTile로 넣는 방식이 가장 무난합니다.

각 메뉴를 눌렀을 때 Navigator.pop(context)를 넣은 이유는 열린 Drawer를 먼저 닫기 위해서입니다. 메뉴를 누르고도 패널이 그대로 열려 있으면 사용성이 어색해질 수 있어서, 처음에는 이 코드를 같이 넣는 편이 좋습니다.

AppBar 꾸미기 설정

AppBar는 기본값만 써도 충분하지만, 실제 앱에서는 몇 가지를 자주 바꿉니다. 예를 들면 backgroundColor로 배경색을 바꾸고, elevation으로 그림자 정도를 조절하고, leading으로 왼쪽 아이콘을 직접 지정할 수 있습니다. 탭 메뉴를 붙일 때는 bottom에 TabBar를 넣기도 합니다.

자주 쓰는 AppBar 예시

appBar: AppBar(
  title: const Text('마이 페이지'),
  centerTitle: true,
  backgroundColor: Colors.indigo,
  elevation: 2,
  leading: IconButton(
    icon: const Icon(Icons.menu),
    onPressed: () {},
  ),
  actions: [
    IconButton(
      icon: const Icon(Icons.notifications),
      onPressed: () {},
    ),
    IconButton(
      icon: const Icon(Icons.settings),
      onPressed: () {},
    ),
  ],
),

Drawer 메뉴 구성

Drawer 안에는 복잡한 화면을 넣기보다, 사용자가 자주 누르는 항목만 간단히 넣는 편이 좋습니다. 보통 프로필 영역 하나, 메뉴 몇 개, 로그아웃이나 설정 버튼 정도로 시작하면 무난합니다. Flutter 공식 예제도 헤더와 여러 개의 메뉴 항목을 ListView로 구성하는 방식을 보여줍니다.

자주 쓰는 Drawer 예시

drawer: Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: [
      const UserAccountsDrawerHeader(
        accountName: Text('홍길동'),
        accountEmail: Text('hong@example.com'),
        currentAccountPicture: CircleAvatar(
          child: Icon(Icons.person),
        ),
      ),
      ListTile(
        leading: const Icon(Icons.home),
        title: const Text('홈'),
        onTap: () {
          Navigator.pop(context);
        },
      ),
      ListTile(
        leading: const Icon(Icons.favorite),
        title: const Text('관심 목록'),
        onTap: () {
          Navigator.pop(context);
        },
      ),
      ListTile(
        leading: const Icon(Icons.settings),
        title: const Text('설정'),
        onTap: () {
          Navigator.pop(context);
        },
      ),
    ],
  ),
),

함께 알아둘 설정 포인트

왼쪽 Drawer 말고 오른쪽에서 나오는 메뉴를 쓰고 싶다면 endDrawer도 사용할 수 있습니다. 이 경우 AppBar의 오른쪽 쪽에 관련 버튼이 자동으로 붙는 상황도 있습니다. 메뉴 위치를 화면 성격에 따라 나누고 싶을 때 알아두면 좋습니다.

그리고 최근 Material 3 방식에서는 전통적인 Drawer 대신 NavigationDrawer도 함께 볼 만합니다. 다만 처음 Flutter를 배우는 단계라면 Scaffold + AppBar + Drawer 조합부터 익히는 편이 훨씬 쉽고, 실사용 예제도 많아서 시작하기 좋습니다.

실수 방지 체크

처음 만들 때 가장 많이 하는 실수는 Drawer를 Scaffold 바깥에 두는 경우입니다. 이렇게 하면 옆 메뉴가 정상 동작하지 않습니다. 반드시 Scaffold 안의 drawer 자리에 넣어야 합니다.

또 하나는 메뉴를 눌렀을 때 닫기 처리 없이 바로 다른 동작만 넣는 경우입니다. 작은 앱에서는 괜찮아 보여도, 실제 사용에서는 닫힘 처리까지 같이 해주는 편이 훨씬 자연스럽습니다. 공식 API 예시도 Navigator.pop으로 닫는 방식을 보여줍니다.

결론

Flutter에서 AppBar와 Drawer는 화면 상단과 옆 메뉴를 가장 기본적으로 만들어주는 조합입니다. 처음에는 어렵게 꾸미려고 하기보다 Scaffold 안에 appBar와 drawer를 넣는 기본 형태부터 익히는 것이 훨씬 좋습니다. 이 방식만 익혀도 제목 표시, 메뉴 버튼 추가, 사용자 메뉴 구성 같은 작업을 바로 할 수 있습니다.

특히 AppBar는 화면의 이름과 주요 기능 버튼을 보여주기 좋고, Drawer는 여러 메뉴를 한곳에 정리해 보여주기 좋습니다. 두 위젯을 같이 사용하면 앱 화면이 한층 깔끔해지고, 사용자가 원하는 메뉴로 이동하기도 편해집니다.

처음 시작할 때는 제목 하나, 메뉴 몇 개만 넣어도 충분합니다. 이후에 아이콘, 프로필 영역, 설정 메뉴, 알림 버튼처럼 필요한 요소를 하나씩 더해가면 됩니다. Flutter에서는 이런 기본 설정만 잘 익혀도 실제 앱 화면을 만드는 데 큰 도움이 됩니다.

FAQ

AppBar는 꼭 Scaffold 안에 넣어야 하나요?

네, 보통은 Scaffold의 appBar 속성에 넣어서 사용합니다. 이렇게 해야 Flutter에서 상단 바를 정상적으로 표시하고, 화면 본문과도 자연스럽게 연결됩니다.

Drawer는 어떤 화면에서 많이 사용하나요?

메뉴가 여러 개 있는 앱에서 자주 사용합니다. 예를 들어 홈, 설정, 공지사항, 내 정보처럼 이동할 항목이 많은 경우 Drawer를 넣으면 한곳에서 메뉴를 쉽게 고를 수 있습니다.

Drawer를 넣으면 메뉴 아이콘이 자동으로 생기나요?

대부분의 경우 자동으로 표시됩니다. Scaffold에 drawer가 연결되어 있고 AppBar를 함께 사용하면 왼쪽에 메뉴 아이콘이 나타나는 경우가 많습니다.

Drawer 메뉴를 누른 뒤 꼭 닫아야 하나요?

보통은 닫는 것이 좋습니다. 메뉴를 누른 뒤 Navigator.pop(context)를 사용하면 Drawer가 닫히고 화면이 더 자연스럽게 이어집니다.

AppBar 오른쪽에 아이콘은 어떻게 넣나요?

actions 속성에 IconButton을 넣으면 됩니다. 검색, 설정, 알림 같은 버튼을 오른쪽에 여러 개 넣을 수 있어서 많이 사용됩니다.

AppBar 제목을 가운데로 보낼 수 있나요?

네, 가능합니다. centerTitle: true를 넣으면 제목을 가운데 정렬할 수 있습니다. 화면 스타일에 따라 자주 쓰이는 설정입니다.

Drawer 안에는 어떤 위젯을 많이 넣나요?

보통 ListView, DrawerHeader, ListTile을 많이 사용합니다. 맨 위에는 안내 영역이나 사용자 정보를 넣고, 아래에는 메뉴 목록을 넣는 방식이 가장 흔합니다.

오른쪽에서 나오는 메뉴도 만들 수 있나요?

네, 가능합니다. 기본 drawer는 왼쪽 메뉴이고, 오른쪽 메뉴가 필요하면 endDrawer를 사용하면 됩니다. 상황에 따라 왼쪽과 오른쪽 메뉴를 나눠서 쓸 수도 있습니다.

처음에는 AppBar와 Drawer를 얼마나 단순하게 만드는 게 좋나요?

아주 단순하게 시작하는 것이 좋습니다. AppBar는 제목 하나, Drawer는 메뉴 두세 개 정도만 넣고 먼저 동작을 확인해보면 이해하기 쉽습니다. 그다음 필요한 기능을 조금씩 추가하면 됩니다.

AppBar와 Drawer만 알아도 Flutter 앱 만들기에 도움이 되나요?

네, 큰 도움이 됩니다. 많은 앱 화면이 이 두 가지를 기본으로 사용하기 때문에, 이것만 제대로 익혀도 Flutter 화면 제작이 훨씬 수월해집니다.