[Flutter] 간단 당근 UI

3.9.2)

- pubspec.yaml에 assets 경로 추가

- 탭구조 작업 (네비게이션바)

- 각 탭별 디렉토리 만들어서 프래그먼트 생성

 

3.9.3)

- fab (floating action button) 작업 / 위젯 추가

- Scaffold를 Stack으로 감싸기 ... 위젯 작업

- color 꿀팁으로, color picker 사용해서 헥사컬러 적용하면 좋음

- 기본으로 강사가 제공해준 소스에 context_extension과 같은 익스텐션들 사용하면 좋음

- 위젯 내 아이템들 추가

- 버튼 클릭시 움직이게 isExpanded를 불리언 값으로 줌

- 그때 그때 필요한 widget 추가. eg) animated_width_collapse

- 이 위젯을 다른 화면들에서도 써야해서 상태값 설정을 위한 리버팟 이용

- 스크롤에 따른 위젯 움직임 제어

- freezed... state 제어... 

- 정리하자면: s_main에서 기존 스캐폴드가 아닌 스택으로 위젯버튼을 바깥으로 꺼냈고, 버튼 클릭시 전체화면을 흐리게하고, 버튼이 작아지고 커지는 다이나믹을 추가함. 클릭시 옵션들이 나오는 레이어 구현함.

-> 다른 탭에서도 스테이트의 변화를 주기 위해 내부 스테이트를 리버팟을 통해 밖으로 끄집어냄.

-> small과 expanded되는 탭을 따로 관리했다가 freezed로 하나의 객체로 만들어줌.

-> 묶여진 객체의 state를 관리하기 위해 state notifier를 만들어 generic를 선언함.

-> 해당 노티파이어를 사용하기 위해 Provider를 상단에 선언함.

 

3.9.4)

- Lorem Picsum 랜덤 이미지 생성하기 좋음(더미용).

- 채팅으로 넘어갈 때 위에 구현한 위젯 없앰.

- 각 탭 watch

- body작업. 아예 lib안에 스크린이 아닌 entity 폴더를 만듦, 그 안에 product, post, user 폴더를 따로 만듦

- freezed로 각 데이터 클래스 정의함.

- 탭의 홈 폴더에 위에 만든 데이터를 담을 위젯 폴더를 만듦.

- timeago 패키지로 몇시간 전인지 표기함.

- 앱바에 내 위치 표기.

- 채팅, 좋아요 수 우측 하단 표기.

 

3.9.5)

- 스크린 폴더 내 알림 폴더 & 파일 만듦.

- 훅 활용

- 이후론 간단 또스에서 알림창 갖고와서 씀.

- 서버 흉내용 api 파일 만듦. (실제론 http client, dio, retrofit 등을 이용해서 작업할 것임)

- CircularProgressIndicator도 적용시켜줌.

 

3.9.6)

- 리스트에서 상세페이지 넘어가는 작업.

- 위의 리스트를 onTap으로 감싸서 넘어가도록 함.

- AutoDisposeFutureProviderFamily를 통해서 변경사항이 있을 시 서버에서 그때 그때 가져올 수 있도록 함.

- 스크린 작업(주로 사진) 완료 후 본문의 위젯 작업.

 

3.9.7)

- write directory 생성해서 글쓰기 기능 구현.

- RichText에서TextSpan을 활용하면 텍스트에 색 같이 다양한 효과를 넣을 수 있음.

- 판매하기 vs 나눔하기 옵션에 따른 가격 변화, 보더/노드 포커싱

- 불리언으로 '작성완료' 하려면 모든 필드 작성하게 만듦.

- 리버팟 컨슈머스테잍위젯으로 변경.

- 더미데이터 넘겨서 작성완료 후 작성된 페이지 넘어가는 부분이 사알짝 이해 안감. 서버에서 갖고오는 부분이나 강의 확인 필요.

 

3.9.8)

- 디바이스 이미지를 가져오기 위한 패키지는 image_picker:

 

3.9.9) 디바이스 이미지 접근 및 가져오기!!!

- 위의 write 파일에 이미지 선택할 지 카메라 선택할 지 옵션 생성.

- 찍은/선택한 사진 리스트 시키기.

- 램 최소 16기가 있어야 함. 안드로이드 스튜디오도 그렇고 에뮬레이터도 램을 많이 먹음.

- Info.plist 파일에서 NSPhotoLibraryUsageDescription 등에 왜 이미지 폴더에 접근해야 하는지 커멘트 같은 거 적음.

- ios emulator는 카메라 선택해도 안됨.

- permission handler 같은 패키지나 에뮬레이터 자체적으로 권한 세팅 설명해줌.

 

 

 

출처: 패스트캠퍼스

 

참고자료:

https://yozm.wishket.com/magazine/detail/1911/