본문 바로가기
Flutter

[webtoon App(1)] super.key, Scaffold, pub.dev, Future type, response, async(비동기), named constructor...

by 2yy 2023. 3. 21.

[super.key]
- 해당 위젯의 key를 stateless widget이라는 슈퍼클래스에 보냄
- 위젯은 ID 처럼 식별자 역할을 하는 ket가 있음(Flutter가 위젯을 빠르게 찾을 수 있도록)
**위젯은 key를 가지며, ID처럼 쓰임, 위젯을 식별하기 위해 ID 사용

[Scaffold Widget]
- screen을 위한 기본적인 레이아웃과 설정을 제공해줌

*Android 제목은 항상 오른쪽에 정렬되므로, 가운데 정렬 시에는 AppBar.centerTitle = true로 변경

[pub.dev]
- dart package를 다운 받고 싶으면 pub.dev 이용

[Future type]
- 미래의 받을 값의 타입을 알려줌
- Dart에게 해당 부분이 끝날때까지 기다리라고 알려주기 위해서 사용, 작업을 실행하고 마무리 할 때까지
  대기하라고 명령. 
- 기다리라고 하지 않으면 Dart는 함수와 코드를 실행할거고, API에 요청 한 후에 그냥 넘어갈 것임
- 요청의 결과값이 중요하기 때문에 응답이 올 때까지 대기가 필요
- Future<Response>이면 미래에 완료가 되었을 때 Response를 반환할 것임
- Dart에게 결과값을 기다리라고 말할 땐 await 키워드 사용
- await 사용 시 규칙 : asynchronous function(비동기 함수)내에서만 사용 가능
- 비동기 함수로 지정하면 그 함수의 반환 값 타입은 Future이며, 함수가 마무리되었을 때 반환할
  타입을 같이 적어줘야 함

[response]
- response 변수는 그냥 Response 타입임
- future가 기다렸다가 완료될 때 Response로 주기 때문임

[async(비동기) programming]
- 어떤 일이 일어날 때까지 기다리게 함 ex) API 요청이 처리돼서 응답을 반환할 때까지 기다림
- 프로그램이 side effect(부작용)을 기다리게 함

[named constructor]
- 이름이 있는 클래스 constructor(생성자)

*요청한 응답의 body는 그냥 string임, 하지만 원래 응답 포맷이 JSON이므로 나중에 사용할 수 있도록
 JSON으로 변환함 -> API에서 받은 JSON으로 model을 생성

 

[map]
- object처럼 Dart가 지원하는 key-value 데이터 구조

[FutureBuilder Widget]
- Builder는 UI를 그려주는 함수
- future 값을 기다리고, 데이터가 존재하는지 알려줌
- FutureBuilder 사용시에는 await 키워드 사용할 필요 없음
- builder의 매개변수 snapshot은 Future의 상태를 알 수 있음 (데이터를 받았는지, 오류가 발생했는지 등)

[CircularProgressIndicator]
- 로딩중을 표시하는 위젯

[ListView]
- 대량의 데이터를 연속적으로 보여주고 싶을 때 쓰임
- 여러 항목을 나열하는 데에 최적화 된 위젯

 

[ListView.builder]
- 똑같이 list를 build하지만, 더 최적화된 ListView (사용자가 볼 수 없는 아이템은 build하지 않으므로)
- 필수 인자인 itemBuilder는 ListView.builder가 아이템을 build 할 때 호출하는 함수,
  어떤 아이템이 build 되는지 알 수 있는 방법은 인덱스를 이용하는 것

[ListView.separated]
- 필수 인자 itemBuilder, separatorBuilder를 가짐
- separatorBuilder는 widget을 리턴해야 하는 함수로, 위젯은 리스트 아이템 사이에 렌더됨(아이템들을
  구분하기 위해서)
- ListView가 리스트와 구분자를 렌더함 (sizedbox, 이모지, 텍스트 등 가능)

[Expanded]
- 화면의 남는 공간을 차지하는 widget

 

[Image]
- flutter가 제공하는 widget