[Flutter] Drawer

기본 Flutter 프로젝트 설정

• Flutter 프로젝트를 생성하고 필요한 패키지를 추가

  flutter create my_app
  cd my_app
  

Drawer 추가

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

  import 'package:flutter/material.dart';
  
  void main() {
    runApp(MyApp());
  }
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Drawer Demo',
        home: HomeScreen(),
      );
    }
  }
  

• main() 함수: Flutter 애플리케이션의 진입점이다. runApp() 함수를 호출하여 위젯 트리를 시작한다.
• MyApp 클래스: 애플리케이션의 루트 위젯을 정의한다. MaterialApp 위젯을 사용하여 기본적인 Material Design 스타일을 제공한다.

HomeScreen 클래스 추가

• 다음으로, HomeScreen 클래스를 추가하여 Drawer를 포함한 화면을 정의

  class HomeScreen extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Drawer Example'),
        ),
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              DrawerHeader(
                child: Text(
                  'Drawer Header',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 24,
                  ),
                ),
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
              ),
              ListTile(
                leading: Icon(Icons.home),
                title: Text('Home'),
                onTap: () {
                  Navigator.pop(context); // Drawer 닫기
                },
              ),
              ListTile(
                leading: Icon(Icons.settings),
                title: Text('Settings'),
                onTap: () {
                  Navigator.pop(context); // Drawer 닫기
                },
              ),
              ListTile(
                leading: Icon(Icons.info),
                title: Text('About'),
                onTap: () {
                  Navigator.pop(context); // Drawer 닫기
                },
              ),
            ],
          ),
        ),
        body: Center(
          child: Text('Home Screen'),
        ),
      );
    }
  }
  

Scaffold 구성 요소 설명

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

실행

코드 복사
flutter run

Drawer 열기

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

추가 기능

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