이번에는 TabBar위에 있는 요소 중
CircleAvatar와 Drawer 를 구현해보겠습니다.CircleAvatar
컬럼에 바로 작성하겠습니다.
※ 첫 이미지대로 하려면 Row 위젯에 넣어줘야 합니다.
Column 위젯에 넣은 결과로
위와 같이 구현되었습니다. 하지만 사이즈가 작기 때문에
SizedBox로 감싸서 크기를 조정하도록 하겠습니다.
위와 같이 크기가 조정된 것을 볼 수 있습니다.
Drawer
이미지 오른쪽 상단에 위치한 기능으로
AppBar의 actions 부분에 위치하고 있지만 AppBar가 포함하고 있는 기능은 아닙니다.
기존 AppBar 구조
Drawer가 존재하는 상태
actions 위에 겹쳐져 있는것이 Drawer의 상태입니다.
코드로 구현
Scaffold의 endDrawer로 구현해야합니다.
endDrawer에 Container로 구현한 모습입니다.
Column을 이용해서 세로 메뉴바 구현 가능
Drawer를 누르면 나오는 컨테이너 위젯이 됩니다.
Share article