Flutter 05

비동기

dart에서 비동기를 하려면 async-await를 사용하면 된다.

void test() async {
// ...
final result = await someFuntion();
}

1. Future<TYPE> 타입을 반환해 준다 => JS에서의 Promise와 비슷하다.
2. 함수 이름 옆이 아닌 괄호 옆에 async를 작성해야 한다.

api get 요청

먼저 http 패키지를 설치해야 하는데 3가지의 방법이 있다.
pub.dev라는 사이트에서 dart 및 flutter 패키지를 검색할 수 있다.

1. dart pub add packagename
2. flutter pub add packagename
3. pubspec.yaml 파일의 dependencies에 직접 패키지 이름 추가.

패키지를 설치했다면 import를 해주면 되는데,
dart에서는 패키지를 import한 후 해당 패키지의 함수를 바로 쓸 수 있다.

import 'package:http/http.dart'
//...

void getApi() async {
	get(url);
}

하지만 이럴 경우, 다른 패키지와 함수 이름이 겹칠 수 있고 명확하지가 않다.
그래서 as를 사용해서 이름을 지정해줄 수 있다.

import 'package:http/http.dart as http'
//...

void getApi() async {
	http.get(url);
}

기본적인 api 데이터받고, 저장하기.

//...
  List<WebtoonModel> webtoons = [];
  bool isLoading = true;

  void waitForWebToons() async {
    webtoons = await ApiService.getTodaysToons();
    setState(() {
      isLoading = true;
    });
  }

  @override
  void initState() {
    super.initState();
    waitForWebToons();
  }
/...

1. stateful 위젯으로 만든 후 state 변수들을 선언해 준다.
2. initState가 초기화를 해주는데, 데이터 페칭 함수를 호출해준다.
3. 데이터 호출 함수에서, 작성해둔 ApiService 클래스의 함수를 호출해준 뒤
4. setState 함수를 호출하여, 로딩이 끝났으므로 렌더링 해달라고 알려준다.

가장 기본적인 방식이지만 여러 단계를 거쳐야 해서 실수할 수도 있고
state가 많아지면 관리하기도 힘들 것 같다.

그래서 statelessful 위젯에서도 데이터를 비동기로 가져올 수 있는 위젯이 있다.

FutureBuilter

//...
      body: FutureBuilder(
        future: webtoons, // future 데이터
        builder: (context, snapshot) {
          if(snapshot.hasData) { // 데이터가 있으면 (받아와졌다면)
            return ListView(
              children: [
                for(var webtoon in snapshot.data!) Text(webtoon.title),
              ],
            );
          }
          return const Center( // 데이터가 없으면 아직 로딩 중이라는 뜻이므로.
            child: CircularProgressIndicator(), // 회전하는 아이콘을 보여준다.
          );
        },
      ),
//...

Statelessfull의 scaffold 내부의 body에서 FutureBuilder 위젯을 쓰면 된다.

이것 또한 리스트를 출력하는 가장 기본적인 방식인데
한꺼번에 출력하므로 효율적이지 못하다.

Listview.builder

//...
            return ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) {
                var webtoon = snapshot.data![index];
                return Text(webtoon.title);
              },
            );
//...

Listview.builder라는 위젯이 있는데, 보고 있는 부분만 출력해준다.
마치 무한 스크롤과 같은 기능을 구현해 준다.

Listview.separted

            return ListView.separated(
              scrollDirection: Axis.horizontal,
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) {
                var webtoon = snapshot.data![index];
                return Text(webtoon.title);
              },
              separatorBuilder: (context, index) {
                return const SizedBox(width: 20,);
              },
            );

이 위젯은 위의 Listview.builder에서 인수를 하나 더 필수적으로 요구하는데
separatorBuilder이다.
아이템 사이의 간격에 무언가를 출력해줄 수 있다.