[Flutter] 간단 또스 (Pagination, GetX, 폴더 구조, 개발 순서)

- 네이밍 팁

- native vs flutter splash는 다름. 기본적으로 네이티브는 깔고 가는건데, 로그인이나 로딩 같은거 뭐 이런거 땜시 플러터 엔진 안에서도 스플래시 화면이 또 필요할 수 있대. 근데 네이티브 듀레이션을 더 줘서 플러터 엔진에 쓸 수도 있는 듯.

- WillPopScope으로 백버튼 로직 처리

- 클래스란 구조 객체를 만드는 게 아니라, 구조 객체를 만들기 위한 설계도임. final이나 const로 선언한다는 건 설계도 내 이런 이런 필드들이 들어있다는 것이고, 해당 필드들을 담을 수 있는 constructor를 생성해줌. 그리고, 그 생성자를 이용해서 객체가 만들어지는 것.

- Map은 key value임. List와 Map과 다르게 set은 데이터를 순회하며 가져오는 용도가 아닌 데이터가 있는지 체크하는 용도로 많이 사용된다 함. Set은 시간복잡도가 O(1)로 상수이고, List는 O(n)이라 contain함수를 썼을 때 훨씬 빠르고 리소스를 덜 먹음.

- Map과 Set은 중복 불가임. List와 Set을 서로 바꿀 수 있음 (eg. toSet, toList함수).

- appBarBackground color설정 시 RGB는 tab 누르면서 조정가능:

- 자주 쓰이는 디자인은 별도의 파일로 변수 할당을 해주는 듯 (가령 칼라나, 폰트나, 사이즈, 패딩 등) --- /common/widget/ 파일 만듦.

- 새로고침은 RefreshIndicator로 만듦.

- 코드 내 명확히 이해하기 어려운 상수로 되어있는 숫자들을 매직 넘버라고 함. 최대한 없게 만들어야 함. (eg. appBarHeight)

- Nav.push(새로운 화면())하면 넘어감.

- 자동 줄바꿈하기 좋게 만들려면 마지막 코드에 tailing comma 찍어주면 됨.

- import도 as ~~하면 import alias 붙일 수 있음.

- 빨간색 텍스트에 노란색 줄이 생기는 건 테마지정이 안돼서 그럼. 기본 테마설정은 위젯이 속한 부모 영역에 추가해줘야 함. (eg. s_notification.dart 내 위젯 빌드에서 Material이나 Scaffold로 감싸면 됨)

Widget build(BuildContext context) {
  return Scaffold(
    body: CustomScrollView(

- Timeago 패키지로 시간 나타내기 편함.

- 3.2.10 20분 전쯤 scaffoldBackground Color 설정 방법 참고

- emptyExpanded로 중간 띄우기 // 혹은 spaceBetween // abstract class 쓰면 선언된 변수/필드가 있다고 가정할 수 있음.

- toComma() 함수로 천 단위 쉼표 찍어주는데 이거 타고 들어가면 더블타입에 확장 함수를 추가함 (이게 가능함).

- tabBar를 넣기 위해 tabController가 선언되어야 하는데, vsync는 애니메이션 동작이 되기 위한 기본 베이스 스테이트를 위해 입력되는 것.

- 컴파일타임에 알 수 없는 변수는 const를 지워야 함.

- 제일 처음 만드는 테마를 abs_theme_colors파일에 기본 적용을 해주고, 나중에 다른 색을 정의할 때 각각 다크/라이트 app_colors파일에 override해주면 됨.

- class 합칠 땐 extends ~~~ with ~~~로 합쳐.

- mixin class로 반복되는 산수나 유용한 코드를 따로 빼놔서 객체지향적 프로그래밍을 실현할 수 있음.

- 상태관리에서 상태란 UI State, Data State 등을 얘기함. 기본적으로 플러터에서 제공하는 상태관리는 setState와 InheritedWidget이 있음.

- 평소처럼 에뮬레이터 돌리려하니 [INSTALL_FAILED_INSUFFICIENT_STORAGE] 이런 에러가 뜸. 에뮬레이터 저장공간이 부족해서 발생한 문제라는 걸 확인했고, wipe data하거나 저장공간을 늘려주면 해결가능함(새로 빌드하는 과정에서 계속 install하며 저장공간을 잡아먹은게 아닐까함// 확인필요). 용량은 size on disk로 확인할 수 있음.

- scaffold로 하면 키보드 올라올 때 알아서 레이아웃이 바뀜.

- 역슬래시(\)하면 texthint 내 작은 따옴표 같은거 예외처리해서 쓸 수 있음.

- factory는 생성자와 비슷한 역할로, 가공할 수 있는 파라미터를 가지고 필요한 생성자를 호출하여 객체를 돌려줌.

- setState대신 obx쓰면 되는데 get controller 내 rx 변수들을 직접 관찰해서 변화가 있을 때마다 안의 내용들이 갱신되는 형태를 만들어줌. 그래서 값 바뀌고 setState를 매번 호출할 필요가 없어짐. (obx 빌드함수 성능자체도 셋스테잇보다 나음)

- 스크롤되는 위젯은 배치되는 수식 방향의 높이를 명시해줄 필요가 있음.

- Rx data type중 지원하지 않는건 Rxn<데이터>하면 됨

- 오픈소스 업데이트 템플릿도 포함되어 있음.

- android는 applicationId를 Change App Package Name 패키지를 통해 이름 변경하고, ios는 웬만하면 xcode에서 bundle identifier로 이름 바꿔.

 

 

 

screen -> fragment -> value object -> widget -> 위젯에 vo 적용 순으로 개발함.

 

 

3.2.1~4) 화면 구성 OT, splash화면 (native vs flutter splash)

3.2.5) 페이지네이션 by fragments, 백버튼 로직

3.2.6) vo들 만들고 더미도 넣음

3.2.7) List Map Set 개념, 차이 설명

3.2.8) Home UI 작업 (이쯤 sliver appbar 사용했었던 듯?)

3.2.9) 끌어당겨서 Refresh

3.2.10) 알림창 작업, timeago 패키지 사용, 다이얼로그 팝업 작업

3.2.11) 혜택창 작업 (평이했음, 가장 티피컬한 느낌)

3.2.12) 주식창 작업 (sliver 다시 나옴), 탭바 이용, 컬러파일 활용

3.2.13) 주식창 리스트 작업, super constructor, abstract mixin class

**3.2.14~ 15) 상태관리, getX 패키지 활용 thru stock search 화면 예시 (json)

3.2.16) 자동완성 & 검색내역 자동으로 가로줄 띄우기

**3.2.17) 설정화면(푸시설정, 달력) Rx 활용

3.2.18) 오픈소스 (change app package name으로 이름 변경)

 

 

좀 overwhelming한 느낌임. 파일을 너무 많이 왔다갔다 하고 정신 없음. 많이 보고 체화해야할 듯 한데, 백엔드가 없어서 일단 간단한 백엔드가 포함된 앱을 만들고 복습하는 게 좋을 것 같음.