[TIL]Flutter 개발하기(Navigator,Drawer,ListView)

TAB 2021 겨울방학 학회활동 [슬기로운 코딩생활]

4주차 TIL입니다.

작성자 : 38기_김민서

노마드코더 챌린지를 완강해서 이번 모각코 시간에는 flutter를 활용해서 개발하던 앱에 기능을 추가해보았다.

이번시간에는 drawer, navigator를 중점적으로 구현해보았다.

참고강의:코딩셰프

+ 개인적으로 플러터를 사용하면서 오류가 좀 많이 난편이라 블로그에 따로 적어두었다

1. drawer를 사용해서 메뉴바 구성하기

2. navigator를 이용해서 페이지 이동하기

3. ListView를 이용해서 정보담기

drawer는 해석그대로 메뉴바, 즉 서랍기능을 수행하는 위젯이다.

drawer는 Scaffold 위젯의 속성중 하나로 제공된다.(ctrl 키누르고 Scaffold 누르면 속성들 확인가능)

이 drawer 위젯의 경우 ListView 정렬방식으로, 크게 UserAccountDrawerHeader와 ListTile로 구성했다.

먼저 UserAccountDrawerHeader경우 프로필사진, 사용자이름,이메일등의 정보를 담을수있고 토글기능도 이용할수있다

그 다음 ListView로 메뉴를 넣어줬다. 나의 경우 회원정보와 구독기관의 메뉴가 필요해서 두개의 Tile을 생성해주었다.

타일에는 크게 아이콘, 메뉴이름, onTap 함수를 넣어주었다.

아이콘은 leading,trailing등으로 앞뒤에 넣을수있다.

inTap 함수는 메뉴를 클릭했을때 실행될 내용을 작성해주면 된다.

Navigator는 자료구조중 스택과 흡사하기때문에 주로 push, pop 코드를 사용하여 페이지를 이동할수있다.

내가 원하는 기능은 메뉴를 클릭했을때 다른페이지로 이동하는것이므로, 위에 있는 onTap함수 안에 Navigator를 사용한 코드를 넣어주었다.

push안에는 두가지 인자를 요구로하는데 context와 route이다. 어떤 페이지위에 이동하고자하는 페이지를 쌓고싶은지에대한 정보를 얻기위한 인자이다.

context의 경우 widget을 build할때 쓴 context이름 그대로 써주면 되고, route의 경우 MaterialPageRoute라는 제공되는 위젯를 사용해주면된다.

이 MateriakRoute의 경우 어떤위젯이 해당 위젯의 도움을 받아서 생성되어야하는지 정의해줘야한다.

아래와 같이 화살표함수를 통해 간단하게 나타낼수있다

당근마켓이나 배달의 민족에서 정보를 보여주는 방식처럼, 일정한 포맷의 정보를 리스트 형태로 보여주기위해서 flutter에서는 ListView라는 위젯을 제공해준다. 이 기능의 경우 해당강의를 참고했다.

해당 강의에 따르면 ClipRect로 미리보기 이미지를 넣고, Container를 배치하여 정보를 담았다.

원래는 ListTile을 일정한 포맷이 반복되는 형태라서 클래스를 만들어 사용하는데, 필자의 경우 아직 익숙치않아서 반복되는부분을 코드를 복붙하여 코드를 작성했다

원래는 애뮬레이터로 실행이되는데(모바일상으로) 컴퓨터가 날아가서;( 크롬으로 실행한 결과를 첨부하였다.

TAB 팀블로그