[flutter] 15강 | Drawer 메뉴 만들기 1

✅ 이번 시간에는 Drawer 메뉴 만드는 방법에 대해서 알아볼 예정이야.

 

아래 이미지를 보면 AppBar에서 햄버거 모양을 클릭하면 뷰가 저런식으로 열리는 것을 의미해.

iOS 네이티브 개발에서는 이런 화면을 만들기

위해서 라이브러리를 사용했었는데... 

Drawer로 쉽게 된다는게 충격

 

✅ Swift로 iOS 개발할 때 사용한 라이브러리

https://github.com/John-Lluch/SWRevealViewController

GitHub - John-Lluch/SWRevealViewController: A UIViewController subclass for presenting side view controllers inspired on the Fac

 

⭐️ 이번 시간에는 알것 같으면서도 모르는 것 같은 코드들이 많으니 꼭 짚고 넘어가자!

 

 

✅ 시작하기에 앞서...

❗️영상 및 내 블로그를 쭉 따라 왔다면 한가지 문제에 봉착해.

Drawer를 사용할 때는 AppBar에서 leading으로 주었던 코드를 지워주어야 한다.

만약 같이쓰면 leading쪽이 읽혀서 Drewer가 작동하지 않을 수도 있어.❗️

 

이번시간 만들것!

✅ 코드리뷰 및 코드에 대한 이해

import 'package:flutter/material.dart'; // 데스크탑, 앱 등에 고루 UI를 적용할 수 있게 해주는 구글이 제공해주는 패키

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      // 실질적으로 모든 앱을 감싸고 있다.
      title: 'Appbar', // 앱을 총칭하는 이름 -> 스마트 폰 앱에서 최근 사용한 앱 보여줄 때의 이름
      theme: ThemeData(primarySwatch: Colors.red // 특정색의 응용들을 기본 색상으로 지정해서 사용하겠
          ),
      home: MyPage(), // home은 앱이 실행될 때 가장먼저 보여주는 페이
    );
  }
}

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AppBar icon menu'),
        elevation: 0.0,
        actions: [
          // action 속성은 복수의 아이콘 버튼 등을 오른쪽에 배치할 때
          IconButton(
            // 간단한 위젯이나 타이틀들을 앱바의 왼쪽에 위치시키는 것을 말함
            icon: Icon(Icons.shopping_cart), // 아이콘
            onPressed: () {
              // 버튼을 눌렀을 때
              print("shopping_cart is clicked");
            },
          ),
          IconButton(
            // 간단한 위젯이나 타이틀들을 앱바의 왼쪽에 위치시키는 것을 말함
            icon: Icon(Icons.search), // 아이콘
            onPressed: () {
              // 버튼을 눌렀을 때
              print("search is clicked");
            },
          )
        ],
      ),
      drawer: Drawer( // 햄버거 버튼으로 사이드바 만드는 코드
        child: ListView( // 리스트 뷰 통해서 넣어야 해
          padding: EdgeInsets.zero, // 이 코드 중요하다. 이거 없으면 상단 부분이 짤리게 나옴
          children: [
            UserAccountsDrawerHeader( // Drawer의 헤더쪽에 넣을 코드
              currentAccountPicture: CircleAvatar( // 헤더에 넣어줄 이미지
                backgroundImage: AssetImage('assets/bbanto.png'),
                backgroundColor: Colors.white,
              ),
              accountName: Text('bbanto'), // @require 로 필수 : 이름
              accountEmail: Text('testEmail@test.com'), // @require 로 필수 : 이메일
              onDetailsPressed: () {
                print('Header is clicked');
              },
              decoration: BoxDecoration( // 데코레이션이라고 해서 박스를 꾸미기
                  color: Colors.redAccent[200],
                  borderRadius: BorderRadius.only( // 하단에만 적용하겠다.
                      bottomLeft: Radius.circular(40.0),
                      bottomRight: Radius.circular(40.0))),
            ),
          ],
        ),
      ),
    );
  }
}

drawer쪽을 보면

padding 부분을 주석처리하면 상당히 이상한 모양이 되는데 아래 그림을 넣어두었으니 확인하길 바란다.

Drawer()에 child로 ListView를 먼저 준다. 그리고 children으로 리스트 뷰의 ListTile을 세팅한다.

UserAccountsDrawerHeader는 Drawer의 헤더쪽에 넣을 코드이다.

이건 플러터에서 지원해주는 코드이며, accountName과 accountEmail은 필수로 넣어주어야 하는 부분이다.

onDetailsPressed 코드를 보면 이거는 화살표 부분인데, 무언가 펼치고 닫을 수 있는 그 부분이다.

 

 

 

UserAccountsDrawerHeader - required 부분

 

 

ListView

ListView는 이렇게 이루어져 있는데 리스트 뷰안에 각 리스트를 ListTile이라고 한다.

padding 부분을 주석처리 했을 때