[Flutter] 14. Drawer메뉴 간단 실습
🙆♂️IconButton
먼저 AppBar와 메뉴 IconButton을 만들었습니다.
onPressed의 내용을 수정하면 버튼을 눌렀을 때 디버그 콘솔에 텍스트를 눌렀다고 나옵니다.
actions 위젯을 이용해서 화면 오른쪽에 아이콘들을 배치했습니다.
버튼 클릭시 텍스트 출력도 잘 됩니다.
🙋♂️Drawer
drawer메뉴를 사용하기 위해서 먼저 leading 속성의 menu 아이콘 부분을 지워주고
이렇게 drawer : Drawer()를 해주면 menu 아이콘처럼 다시 나오게 됩니다.
버튼을 누르면 이렇게 drawer 메뉴가 나오게 됩니다.
🤷♂️UserAccountDrawerHeader
UserAccountDrawerHeader 위젯을 통해서 유저 정보를 넣을 수 있습니다.
🚀accountName & accountEmail
계정 이름과 계정 메일 값은 필수로 입력해야 합니다.
이렇게 입력되게 됩니다.
🚀currentAccountPicture
currentAccountPicture 위젯을 사용자 사진을 표현할 수 있습니다.
CircleAvatar 위젯을 통해서 사진을 표현해줬습니다.
🚀onDetailsPressed
이 위젯을 사용하면 따로 화살표 버튼까지 생기게 됩니다.
우측 하단에 잘 생기는 모습입니다. 대괄호 부분에 다른 명령어들을 추가할 수 있습니다.
🚀decoration
decoration 속성이 있습니다. 이 안에 다양한 속성들을 통해서 박스를 꾸며줄 수 있습니다.
🎻color
ㅡ
색상을 변경할 수 있습니다.
🎻borderRadius
ㅡ
테두리 굴곡을 설정할 수 있습니다.
decoration 위젯의 더 자세한 설명은 이 게시물에 정리해놨습니다.
🚀otherAccountPictures
otherAccountsPictures 속성으로 다른 계정들의 사진을 나타낼 수 있습니다.
🙇♂️ListTile
ListTile을 사용해서 Drawer 메뉴에서 다른 메뉴들을 나타낼 수 있습니다.
🚀leading
leading 속성을 이용해서 좌측에 아이콘을 붙일 수 있습니다.
🚀title
title 속성을 통해서 Text 위젯을 사용할 수 있습니다.
🚀trailing
traling 속성은 AppBar에서 actions와 비슷한 역할을 합니다.
오른쪽 끝에 Icon을 추가하기 위해 사용합니다.
완성된 모습입니다.
🚀onTap
주로 gestureDetector나 InkWell에 사용되고
길게 누르기 두번 탭하기 등의 이벤트에 반응하기 위해서 사용됩니다.
이렇게 onPressd 처럼 잘 작동합니다.