[YouTube]코딩셰프 플러터 강좌 15_Drawer메뉴 만들기 1

code1

code2

code3

output

15강 강좌에서는 scaffold 속성 안에 존재하는 drawer에 대해 배웠다. 어떤 속성들이 들어있는지 보기 위해서는 command ⌘ 키를 누른 채로 해당 단어를 클릭하면 된다.

command ⌘ 키 + 해당 단어 클릭시 이런 식으로 나온다. 

1. ListView

 

 drawer 안에서 child로 ListView를 넣어주었다. ListView는 뒷 강좌에서 더 설명해주신다 하셨다. 

Listview는 세로축으로 뭔가(ListTile)를 더 쌓을 수 있는 속성을 가진다고 하셨다.

 

 

2. 사진 가져오기 위한 세팅

 

나는 drawer 바를 열었을 때 나오는 프로필 사진을 jennie 사진으로 설정하였는데 사진을 가지고 오는 방법은 이렇다.

1. 현재 만들고 있는 폴더 안에 새로운 폴더 (assets) 만들기

2. 가지고 오고 싶은 사진 파일을 드래그해서 1번에서 만든 폴더 안에 집어넣기

3. pubspec.yaml을 열어 assets부분 주석 삭제( command ⌘ + / ) 한 후 갖고 온 파일명(assets/jennie.jpg)으로 변경하기

4. 이후에 사진을 삽입하는 방식은 다 다르기 때문에 이하 생략.

3. EdgeInsets

여백이 필요없는 경우, padding: EdgeInsets.zero 설정을 해준다. 설정 한 경우 오른쪽처럼 여백이 없어짐

4. UserAccountsDrawerHeader

아마도 drawer에서 구분선 위에 부분을 지칭하는 말인 것 같다.

children에서 이를 위젯으로 갖고 온 후에 프로필과 이름, 이메일, 화살표를 구성해준다. 

 

1) 프로필

 

currentAccountPicture ( )  안에서 모양을 설정해준다.

여기서는 둥근 모양인 CircleAvatar를 선택해 주었다. CircleAvatar에서 backgroundImage로 AssetImage('[폴더명]/[파일명]')을 가져오고 backgroundColor을 Colors.white 로 설정해준다.

+) 나 같은 경우는 프로필 사진으로 jpg를 불러와서 backgroundcolor를 바꿔도 변화가 없지만,

    강의에서는 배경이 투명한 사진인 png를 불러왔기 때문에 backgrondcolor을 설정할 필요가 있어 보인다.  

 

2) 이름, 이메일

 

이름과 이메일의 경우, accontName: Text('')와 accountEmail: Text('')로 설정을 해주면 된다. 

 

3) onDetailPressed

 

앞선 강좌에서 배운 onPressed와 마찬가지로 body { }에 명령어를 줄 수 있다.

따로 화살표에 대한 언급이 없지만 onDetailPressed를 없애면 화살표를 사라지는 것으로 보아 print안에 is clicked앞에 쓰여 있는 것이 자동으로 생성되는 것일까??

 

4) box decoration

 

굳이 boxdecoration설정을 하지 않으면 header box의 색상은 Appbar의 색깔을 따라가는 듯하다. (추정)

 

box의 밑 부분을 둥글게 만들기 위해 borderRadius : BoredRadius.only( ) 안에 bottomleft:Radius.circular(곡률)과 right도 설정을 해주면 경계선 부분이 둥근 모양이 된다.  

 

색깔 설정은 BoxDecoration안에서 color: Colosr.red [200]과 같이 설정해주면 된다. 

# TMI

갈 길이 멀다. 강좌는 10분 내외인데 정리가 한 시간이구나.

제니 짱 예뻐