[Flutter] UI, Class, Container, Setting, Widget, Theme, Page

MaterialApp은 앱을 만들기 위한 가장 기본이 되는 위젯으로, home라우터, theme, locale 등의 설정 역할을 해줌

Scaffold는 각각의 페이지를 구성하는데 가장 기본이 되는 위젯, 여기엔 다양한 기능 추가 가능 (drawer, 버튼 따위)

 

container:

container는 기본적이고 포멀한 위젯임 // div 같은 느낌인듯...?

색깔 설정시 Colors. 치면 색들이 쫙 나옴 (헥사값 넣는 법 별도로 있음)

 

위젯을 위아래로 쌓을 땐 column으로 시작함. children으로 복수의 child 가질 수 있음.

SingleChildScrollView로 스크롤 가능하게 만들 수 있음.

scrollDirection으로 좌우로도 가능하게 만들 수 있음(팁바에 많이 적용됨).

Flex로 차지 비율 조정 가능 (그래도 내부 정의된 높낮이에 좀 더 제한이 됨 // Expanded는 무시하는 듯?).

 

위 아래 툴바를 두고 안에만 스크롤 하는 UI는 컨테이너 객체 안에 SingleChildScrollView를 넣고,

children container들을 넣은 거임.

 

부모와 자식 객체 선언시 center, align이나 특정 크기로 감싸지 않으면 자식 객체가 부모 객체 전체에 반영됨.

 

constraints를 활용해서 overflow를 잡고 여러 UI상의 에러들을 조정할 수 있음. 많은 연습 필요.

부모와 자식 객체가 바뀌면서 문제가 생길 수 있는데 opt enter해서 swap with parents하면 수정 가능.

 

앱바 같은건 stateless로 잡고 다이나믹한 동작을 하는 건 stateful로 했음 강의에선.

init state로 초기값을 설정해줄 수 있음. (상속받고 있는 값이라면 super 써줘야하고, 초기 변수 선언이 에러 날 수 있으니 late나 nullable 처리 해줘야함)

그리고 dispose도 위와 같은식으로 선언을 해두어야 종료시키며 리소스 부담을 덜어줌.

_(언더바)는 프라이빗 변수래. 상위 위젯의 변수 선언이 final로 이루어져서 별도로 _index = widget.index 이런식으로 선언 후 state 안에서 _index로 선언해주면 됨 [2.3.1].

 

[2.4.1] 플러터 구동 방식 설명***

 

ListTile로 감싸주면 child가 아닌 leading으로 명명함.

 

형태가 크게 컬럼을 만들어두고 각 컬럼별로 작동시키고자 하는 함수를 클래스에 stateful/less한 지 선언 후 그 밑에 extend한 프라이빗 클래스에서 구체화 시킴.

 

shift + F6하면 한 번 특정 단어 싸잡아서 바꿀 수 있음

import하는 건 opt enter하면 됨 (보통 머티리얼)

 

GestureDetector에 온갖 제스처 있음. InkWell도 비슷한데 UI상 잉크웰은 좀 번지는 효과가 있어서 그게 가장 큰 차이이지 비슷한 듯.

 

플러터 세팅은 pubspec yaml파일 확인 필요함.

플러터 외부 라이브러리는 pub.dev를 통해 원하는 라이브러리를 pubspec yaml파일내 dependencies에 복붙하면 됨.

 

버저닝 팁으론 아래 참고

앞에 ^(캐롯?)이 붙으면 1.x.x 버전 이상이면 된다는 의미인데 마이너 버전(맨 마지막 자릿수)도 중요한 경우가 많아서 없이 쓰는 경우가 많대.

 

로컬데이터 활용하려면 야믈파일에 assets: -assets/images/로 경로 지정을 해서 해당 파일을 참조할 수 있게끔 하면 됨.

현업에선 cached network image 라이브러리를 많이 쓴다 함.

경로도 그냥 상수 선언 해줘서 해당 상수를 참조하게 해주셈.

 

화면이동은 기본적으로 stateful이겠지.

 

다트파일 만들 땐 네이밍에 언더바를 사용함 (_)

 

페이지 라우팅시 ios는 뒤로가기 버튼이 자동 활성화 됨.

go_router는 플러터 라우터 라이브러리 중 상당히 많이 쓰임. 항상 외부 라이브러리 의존성 주입시 앱을 아예 껐다 켜야함.

해당 라이브러리를 사용하면 코드가 간략해지고 하위 라우팅 경로 설정이 쉬워짐.

 

 

테마는 MaterialApp 부분에 설정하면 자동 적용됨(컬러스킴). 색 아이디어는 m3.material.io 참고!

현 플러터 버전에선 useMaterial3가 기본으로 true 설정되어 있음 --- 모양과 색상 적용 범위의 디폴트값이 다름.

테마 가져올 땐 전역으로 선언하고 가져오는 게 일반적이라 함.

 

 

2.1.1~5) UI(위젯 & 컨테이너) 만드는 법

2.2.1~3) 위젯 활용법

2.2.4) constraint 사용해서 위젯 제어 방법

2.3.1) stateful vs. stateless widget

2.3.2) widget의 lifecycle 개념

2.4.1) 플러터 구동 방식

2.5.1) 다양한 제스처, 전형적으로 쓰이는 버튼들 (슬라이드, 똑딱이, 옵션버튼 등등)

2.5.2) 콜백함수로 카운팅 구현

2.6.1~2) pubspec과 외부라이브러리

2.6.3) 로컬 asset파일(이미지, etc.) 활용방법

2.7.1) 페이지 이동 방법 (navigation bar로 stateful하게 이동한거처럼 보이는거...)

2.7.2) 페이지 이동 to 별도 라우터 파일로

2.7.3) 페이지 이동 by go_route library (직관적임)

2.8.1) 테마 만들고 적용하는 법