본문 바로가기
Flutter

[contact App] Image, Scaffold, 레이아웃 설계, Flexible, Expanded, custom widget, @override, ListView.builder, FloatingActionButton, state, context...

by 2yy 2023. 3. 21.

[Image]
- 이미지 넣을땐 Image.asset('경로')
- 이미지 사용하겠다고 등록

[Flutter 사이즈 단위]
- LP (50LP == 1.2cm)

[Scaffold 위젯]
- 상중하로 나눠주는 위젯

[박스 width 또는 height를 꽉 차게 만들고 싶으면]
- double.infinity

[AppBar() 자주 사용하는 파라미터]
- title : 좌측제목
- leading : 좌측에 넣을 아이콘
- actions : [우측 아이콘들]

[레이아웃 잘 짜는 법]
1. 예시디자인 준비
2. 예시화면에 네모 그리기
3. 바깥 네모부터 하나하나 위젯으로
4. 마무리 디자인

 

[Flexible]
- 박스 폭을 %로 설정할 때 사용
- flex 파라미터에 배수 값을 집어넣음

[Expanded]
- 박스 하나 꽉 채우고 싶을 때 사용
- flex : 1 가진 Flexible 과 같음

[박스 디자인 했는데 의도와 다르다면?]
1. 사이즈가 이상해서
2. 박스 위치가 이상해서

[위젯들 한 단어로 축약하려면(커스텀 위젯)]
1. class 작명
2. return 옆에 축약할 레이아웃 작성
3. 아무거나 다 커스텀 위젯화 X, 재사용 많은 UI & 큰 페이지들 O
* 변하지 않는 UI들은 변수, 함수로 축약해서 사용해도 상관없음. 하지만, 유동적인 UI들은 변수에 담아서
  축약하면 성능 이슈가 발생할 수 있으므로 클래스 문법의 커스텀 위젯으로 만듦

[@override]
- 동명의 메소드가 있을 때, 부모 말고 자식이 구현한 함수를 우선시하는 키워드

[ListView]
- 스크롤바 생김
- 스크롤 위치 감시 가능
- 메모리 절약 기능(유저가 보고 있지 않은 부분은 메모리에서 삭제 가능)

[ListTile]
- 왼쪽에 그림, 오른쪽에 텍스트가 있는 레이아웃이 필요할 때 등등 사용

 

[ListView.builder]
- 자동으로 코드를 반복해주는 리스트뷰
- itemCount: 리스트갯수, itemBuilder: () { return 반복할 위젯 }
  (i 변수 자동 생성되는데, i는 반복 생성될 때마다 0부터 1씩 증가하는 변수)
- 목록을 동적으로 많이 만들 경우 사용

[FloatingActionButton]
- 하단에 공중에 뜬 버튼 생성 가능 (FAB)

[State]
- state 쓰면 state가 변할 때마다 자동 재렌더링 됨
- Flutter에서 데이터 잠깐 저장하는 곳 : 변수 아니면 state
- state 만드는 법
 1. StatefulWidget 만들기 (state는 StatefulWidget 안에서만 생성가능)
 2. 둘째 class 안에 변수 만들기
- state 변경하는 법 : setState( () {변경 내용 작성} )
- 자주 바뀌는 데이터들, 변화를 실시간으로 보여야 하는 데이터 등은 state로 만들기

[context]
- 부모 위젯의 정보를 담고있는 변수 (족보)

[showDialog()]
- MaterialApp이 들어있는 context를 입력해야 동작하는 함수

[Builder]
- 중간에 context(족보)를 생성해주는 위젯
- 생성한 context에는 Builder 위에 있는 부모 위젯들의 정보들이 다 들어있음 ex) Scaffold, MaterialApp 등

[부모 -> 자식 state 전송하는 법]
1. 전송하고 : 자식위젯(작명 : 보낼state)
2. 등록하고 : 자식 위젯에서 총 두군데
3. 사용
(부모가 보낸 state는 read-only가 좋음, final)
(자식이 부모에게 state 보내기는 불가능, 무조건 부모->자식만 가능)
(많은 곳에서 쓰는 중요한 state는 최대한 부모위젯에 만들기)

[클래스명({선택적 파라미터})
- 중괄호로 넣으면 해당 파라미터들이 옵셔널이라고 정의해주는 것

[부모 state를 자식이 수정하려면]
1. 부모안에 수정함수 만들기
2. 자식으로 보내기

[유저가 입력한 데이터를 변수에 담기]
1. controller 사용
- TextEditingController 위젯 사용
- TextField의 controller 파라미터에 생성한 변수를 넣으면 해당 변수에 유저가 입력한 텍스트가 저장됨
혹은
2. onChanged: () {} 사용
- 파라미터를 입력하면 자동적으로 해당 파라미터는 사용자가 입력한 값이 담김

[TextField가 많을 경우]
- list[] 또는 Map{} 사용

[await]
- Dart특징 : 오래 걸리는 줄은 제껴두고 다음 줄 실행하려고 함 
- await 붙으면 다음 줄 실행안하고 기다려줌 (비동기)
- async 붙어있어야 안에서 await 사용 가능
- await 붙일 수 있는 코드들이 있으니 사용할 때 주의 (Future를 리턴하는 함수에 부착 가능)

[initState]
- initState 안에 적은 코드는 위젯 로드될 때 최초 한번 실행됨

[실제 연락처를 위젯에서 출력하기]
1. state 변경은 꼭 setState() 안에
2. 타입을 잘 지켜야 함

[발행하기 전에 체크]
1. 타입지정 잘 했는가
2. null check