[YouTube]코딩셰프 플러터 강좌 16_ Drawer 메뉴 만들기2

code 1

code 2

code 3

code 4 

output

16강 강좌에서는

사용자 본인의 프로필( currentAccountPicture)이 아닌 다른 사람의 프로필(otherAccountsPictures)을 추가하는  방법에 대해 배우고, 헤더 부분이 아닌 밑에 부분에서의 ListTile에서 여러 항목들의 아이콘과 text, onTap요소들을 집어넣는 작업들을 배웠다. 

 

 

 

1. otherAccountsPictures

이름에서 알 수 있다시피 다른 사람의 프로필은 여러 개일 수 도 있기 때문에 복수 명사에 붙는 s가 붙는다.

앞서 진행했던 code의 UserAccountsDrawerHeader  안에서 otherAccountsPictre을 가지고 온 다음에 사용자 프로필과 마찬가지로 CircleAvatar를 위젯으로 갖고 온 후 CircleAvatar 안에서 사진을 삽입해주기 위해 backgroundImage로 사진을 삽입해준다. 

 

code 2와 code 3 사이에서 주석처리된 부분을 보면 알 수 있듯이 여러 다른 사용자 사진을 삽입하는 것이 가능하다. 

 

(이 강좌에서는 복잡해보이니 주석 처리해주었다)

 

2. ListTile

 

ListTile에는 앞에서 14강에서도 배웠던 위젯을 왼쪽에 위치하도록 도와주는 leading 성질을 갖고 있다.

오늘 강좌에서는 아이콘을 왼쪽에 위치시켜줄 것이기 때문에 Icon을 leading에 넣어준다.

리스트 성질로 아이콘 모양들, 리스트 이름(TItle), 아이콘 색깔( color) , 아이콘 동작( onTap )을 설정해준다. 

 

onTap과 onPressed의 차이?

 

기능상으로 거의 동일하지만 onPressed 함수는 주로 버튼에 사용되고, onTap은 gestureDetector나 Inkwell등에 주로 사용된다. 

길게 누르기, 두 번 누르기와 같은 어떤 동작에 반응하는 이벤트를 위해서 사용되는 것이 onTap이다. 

 

ListTile에서 onTap을 사용하는 이유는 일반 버튼과는 달리 ListTile이 액션을 감지할 수 있는 기능을 갖고 있기 때문이다. 

또한 메뉴를 클릭하면 splash(깜빡임) 효과가 나타나는데 이는 따로 설정한 것이 아니라 ListTile에 builtin 되어 있는 효과이다. 

 

3. 위젯 트리(Widget Tree)

 

지난 학기에 파이썬에서 부모 클래스와 자식 클래스 개념과 상속을 함께 배웠는데

오늘 강좌에서 배운 위젯 트리도 비슷한 개념인 것 같다.  

 

이번에 앱 개발을 하면서 위젯트리도 잘 활용할 수 있으면 좋겠다. 

 

위젯 트리 캡쳐본