KyungRyeol Yoon KyungRyeol Yoon
Frontend · Flutter ·

[Flutter] Drawer

· 3분 읽기

기본 Flutter 프로젝트 설정 #

  • Flutter 프로젝트를 생성하고 필요한 패키지를 추가
    1flutter create my_app
2cd my_app

Drawer 추가 #

  • lib/main.dart 파일 수정

  • 이제 lib/main.dart 파일을 열어 기본적인 UI를 구성한다. 아래의 코드를 추가

     1import 'package:flutter/material.dart';
 2
 3void main() {
 4  runApp(MyApp());
 5}
 6
 7class MyApp extends StatelessWidget {
 8  @override
 9  Widget build(BuildContext context) {
10    return MaterialApp(
11      title: 'Flutter Drawer Demo',
12      home: HomeScreen(),
13    );
14  }
15}

  • main() 함수: Flutter 애플리케이션의 진입점이다. runApp() 함수를 호출하여 위젯 트리를 시작한다.

  • MyApp 클래스: 애플리케이션의 루트 위젯을 정의한다. MaterialApp 위젯을 사용하여 기본적인 Material Design 스타일을 제공한다.

HomeScreen 클래스 추가 #

  • 다음으로, HomeScreen 클래스를 추가하여 Drawer를 포함한 화면을 정의
     1class HomeScreen extends StatelessWidget {
 2  @override
 3  Widget build(BuildContext context) {
 4    return Scaffold(
 5      appBar: AppBar(
 6        title: Text('Drawer Example'),
 7      ),
 8      drawer: Drawer(
 9        child: ListView(
10          padding: EdgeInsets.zero,
11          children: <Widget>[
12            DrawerHeader(
13              child: Text(
14                'Drawer Header',
15                style: TextStyle(
16                  color: Colors.white,
17                  fontSize: 24,
18                ),
19              ),
20              decoration: BoxDecoration(
21                color: Colors.blue,
22              ),
23            ),
24            ListTile(
25              leading: Icon(Icons.home),
26              title: Text('Home'),
27              onTap: () {
28                Navigator.pop(context); // Drawer 닫기
29              },
30            ),
31            ListTile(
32              leading: Icon(Icons.settings),
33              title: Text('Settings'),
34              onTap: () {
35                Navigator.pop(context); // Drawer 닫기
36              },
37            ),
38            ListTile(
39              leading: Icon(Icons.info),
40              title: Text('About'),
41              onTap: () {
42                Navigator.pop(context); // Drawer 닫기
43              },
44            ),
45          ],
46        ),
47      ),
48      body: Center(
49        child: Text('Home Screen'),
50      ),
51    );
52  }
53}

Scaffold 구성 요소 설명 #

  • Scaffold: Flutter에서 기본적인 레이아웃 구조를 제공하는 위젯이다. appBar, drawer, body 등의 속성을 사용하여 앱의 구조를 설정한다.
  • AppBar: 화면 상단에 위치하며, 앱의 제목이나 액션 버튼을 포함할 수 있다. 여기서는 “Drawer Example"이라는 제목을 표시한다.
  • Drawer: 왼쪽에서 슬라이드 방식으로 열리는 사이드 메뉴이다. 이 안에 여러 개의 ListTile을 배치하여 메뉴 항목을 나열한다.
  • ListView: 스크롤 가능한 리스트를 생성한다. padding: EdgeInsets.zero를 통해 기본 패딩을 제거한다.
  • DrawerHeader: 드로어의 헤더 부분으로, 주로 사용자 프로필이나 앱 이름 등을 표시한다. 배경색과 텍스트 스타일을 설정할 수 있다.
  • ListTile: 각 메뉴 항목을 구성하는 위젯이다. leading 속성을 사용하여 아이콘을 추가하고, title 속성으로 텍스트를 설정한다. onTap 속성에는 해당 항목을 클릭했을 때 실행될 동작을 정의한다. 여기서는 Drawer를 닫기 위해 Navigator.pop(context)를 사용한다.

실행 #

1코드 복사
2flutter run

Drawer 열기 #

  • 앱이 실행되면, 화면의 왼쪽 상단에 있는 아이콘을 클릭하면 Drawer가 열린다.
  • Drawer 안에는 Home, Settings, About라는 항목이 표시된다.
  • 각 항목을 클릭하면 Navigator.pop(context)에 의해 Drawer가 닫힌다.

추가 기능 #

  • 항목 클릭 시 페이지 전환: 각 ListTile의 onTap에서 페이지를 전환하도록 추가적인 코드를 작성할 수 있다.
    • 예를 들어, 새로운 화면으로 이동할 수 있다.
  • 상태 관리: 복잡한 앱에서는 Drawer의 상태를 관리하기 위해 상태 관리 라이브러리를 사용할 수 있다.
Advertisement
관련 글