[flutter] 16강 | Drawer 메뉴 만들기 2

✅이번시간에는 지난 시간에 이어서 Drawer 메뉴 만들기 2에 대해서 알아보려고 해.

Drawer 1,2가 나뉜 이유는... 내가 지난 시간에 1까지 밖에 시간이 안되서 1까지 공부하고 포스팅을 했는데

거기에 2를 합치는 것이 너무 번거로워서 그냥 따로 분기하기로 함..!

 

이번 시간의 주요 내용!!

 

이번 시간 주요 내용은 이렇게 돼!

 

✅코드리뷰 및 코드 설명

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,
              ),
              otherAccountsPictures: [ // 다른 유저의 사진
                CircleAvatar(
                  backgroundImage: AssetImage('assets/chef.png'),
                  backgroundColor: Colors.white,
                ),
                // CircleAvatar(
                //   backgroundImage: AssetImage('assets/chef.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))),
            ),
            ListTile(
              leading: Icon(Icons.home, color: Colors.grey[850]), // 좌측기준 스위프트에서 leading
              onTap: () { // 탭 이벤트 처
                print('home is clicked');
              },
              trailing: Icon(Icons.add), // 우측기준 스위프트에서 trailing
              title: Text('Home'),
            ),
            ListTile(
              leading: Icon(Icons.settings, color: Colors.grey[850]),
              onTap: () {
                print('settings is clicked');
              },
              trailing: Icon(Icons.add),
              title: Text('QnA'),
            ),
            ListTile(
              leading: Icon(Icons.home, color: Colors.grey[850]),
              onTap: () {
                print('question_answer is clicked');
              },
              trailing: Icon(Icons.add),
              title: Text('Home'),
            )
          ],
        ),
      ),
    );
  }
}

UserAccountsDrawerHeaderother 부분에 AccountsPictures 가 들어가서 새로운 이미지를 넣었는데, 다른 유저를 넣을 수 있는 기능인가봐.

그리고 ListTile은 iOS로 치면 cell과 같은 기능을 하는데, leading, trailing 등 쉽게 이해할 수 있었어.

onTap의 경우에도 터치 이벤트를 말하는데 이것도 크게 어렵지 않았다..!