[TIL] Future Builder, ListView

Future Builder 란?

먼저 Future 란 미래 특정 시점에 이용 가능한 잠재적인 값이나 오류를 표현할 때 쓰이는 객체로, 실행이 언제 완료될 지 모르는 값을 받는 객체이다.

FutureBuilder 는 Future 를 사용하는 이유와 같이 데이터를 모두 다 받기 전에 먼저 데이터가 없이 그릴 수 없는 부분부터 먼저 그려주기 위한 목적성이 있다. 만약 그렇지 않다면 데이터가 다 받아지기 전에 기다린 후 화면을 그리고, 데이터의 변화를 setState() 를 통해 변경해야한다.
즉, 비동기 처리하는 데이터를 처리한 후 위젯을 반환할 때 사용하는 위젯이다.

다음은 노마드 코더 Flutter 로 웹툰 앱 만들기 강좌를 참조한 예이다.

 static Future<List<WebtoonModel>> webtoons = ApiService.getTodaysToons();

webtoons 라는 Future 객체는 getTodaysToons 라는 함수를 통해 {title, thumb, id} 웹툰의 제목, 썸네일, id 값이 포함된 객체의 리스트를 담고 있다.

  
body: FutureBuilder(
        future: webtoons,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
          //데이터가 정상적으로 불러와졌다면
            return Column(
              children: [
                const SizedBox(
                  height: 50,
                ),
                Expanded(child: makeList(snapshot)),
              ],
            );
          }
          //아직 데이터가 받아오지 않았을 경우
          return const Center(
            child: CircularProgressIndicator(),
          );
        },
      ),
      
      
 

body 에서 webtoons 데이터를 로드하기 위해서 FutureBuilder 를 이용하는데, 매개변수로 future 객체와 UI 를 그려주는 함수인 builder 가 필요하다. 이때 future 객체로는 webtoons 이며, builder 안에서도 BuildContext 와 Future 상태를 가르키는 snapshot 이 매개변수로 필요하다.
비동기 함수에서 리턴하는 future 객체를 받아 먼저 build 하고 비동기 함수 계산이 완료되면 snapshot의 상태에 따라 데이터가 정상적으로 받아와졌는지 확인하여 조건 분기에 의해 실제 리턴값을, 로딩화면을 build 할지를 결정할 수 있다.

실제 실행되는 로직에서는 비동기함수가 완료되기 전에 CircularProgressIndicator 을 이용한 로딩화면이 나타나고, 완료되어 데이터가 받아와지면 UI 가 실제 리턴값으로 build 된 상태가 나타난다.

ListView.builder , ListView.separated

모든 아이템들을 모아놓은 리스트 형식을 한번에 로드하는 것이 아니라 필요할 때만 로드한다.

  ListView makeList(AsyncSnapshot<List<WebtoonModel>> snapshot) {
    return ListView.separated(
      padding: const EdgeInsets.symmetric(
        vertical: 10,
        horizontal: 20,
      ),
      scrollDirection: Axis.horizontal,
      itemCount: snapshot.data!.length,
      
      //필수 속성
      itemBuilder: (context, index) {
        var webtoon = snapshot.data![index];
        return Webtoon(
          title: webtoon.title,
          thumb: webtoon.thumb,
          id: webtoon.id,
        );
      },
      separatorBuilder: (context, index) => const SizedBox(
        width: 40,
      ),
    );
  }
}

받아온 webtoons 는 객체의 무리인 배열 형태이다. 이를 ListView Builder 를 통해 아이템을 생성할 수 있다. 위의 코드에서 makeList(snapshot) 함수 안에서 진행이 된다.

매개변수로 데이터를 받아오는 snapshot를 이용해 필요한 데이터(title, thumb, id) 를 index 로 접근하여 카드 형식으로 그려주었다.

itemBuilder

ListView.Builder 의 필수 속성으로 ListView 의 아이템을 만드는 역할을 하고, index 로 아이템에 접근할 수 있다.

현재 scrollDirection 의 방향을 수직으로 설정하여서 리스트 형태의 하나하나의 객체값들은 동시에 불어오는 것보다 scroll 을 하면서 데이터를 받아오는 것이 더욱 더 효율적이다. 따라서 scroll 되는 정도에 따라 그때 마다 필요한 Index 값으로 데이터에 접근하여 화면에 렌더할 수 있다.

separated

ListView.separted 의 필수 속성으로, 아이템들 사이에 구분자를 넣어주기 위한 builder 기능이다. 그렇기 때문에 따로 margin 이나 padding 을 넣어주지 않아도 된다.

배운 점

flutter 가 react-native 와 vue 보다 더 효율적으로 쓰이는 프레임워크의 이유를 알게 된 점이었다. 비동기식으로 작동되는 라이브러리의 효능을 쉽게 파악할 수 있었고, 로딩화면이나 화면 build 하는 방식에 있어서도 많은 라이브러리가 있어서 개발자로서 쉽게 코딩을 할 수가 있었다.
더더 flutter 에 대한 재미가 늘어간다!!