16. [Flutter]플러터 Futurebuilder에 대하여 (1부 기초편)

오늘은 Flutter에서 Futurebuilder에 대해서 알아보자.

 

Futurebuilder는 비동기 처리하는 데이터를 처리한 후 위젯을 반환할 때 사용하는 위젯이다.

예를 들어 서버에서 사진을 가져와서(비동기) 핸드폰에 띄워준다고 할 때 사용할 수 있다.

 

아마 플러터를 시작하는 초보자분들에게 꼭 필요해서 사용하게 되는 위젯 중 하나일 것이다.

 

시작해보자

 

로딩중...

---

참조 및 버전

 

https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html#widgets.FutureBuilder.1

FutureBuilder class - widgets library - Dart API

Flutter 3.3.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 18a827f393 (3 days ago) • 2022-09-28 10:03:14 -0700
Engine • revision 5c984c26eb
Tools • Dart 2.18.2 • DevTools 2.15.0

 

---

우리가 Futurebuilder를 처음 사용하게 되는 것은 위에서 언급했던 것처럼 비동기로 데이터를 가져올 때 가장 많이 사용하게 된다. 대표적으로 서버에 있는 데이터를 가져올 때 사용하게 된다.

 

우선 예시에서는 연결할 서버가 따로 없기 때문에 임의로 딜레이를 주는걸 서버통신이라고 생각하고 진행하겠다.

 

FutureBuilder(
          future: serverConnectionDelay(),
          builder: (context, snapshot) {
            //server에서 데이터를 가져오는 것을 기다리는동안 다른화면을 보여줌
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const CupertinoActivityIndicator();
            }
            //가져온 데이터가 오류가 났을 경우.
            if (snapshot.hasError) {
              return Column(
                children: const [Icon(Icons.error), Text("데이터 오류가 발생했습니다.")],
              );
            }
            //가져온 데이터가 없는 경우.
            if (!snapshot.hasData) {
              return Column(
                children: const [Icon(Icons.cancel), Text("데이터가 존재하지 않습니다.")],
              );
            }
            //정상적으로 데이터를 가져온 경우.
            return const Text("데이터 가져오는데 성공했습니다.");
          },
        )

이렇게 사용하면 된다

그렇지만 문제는 setState를 그러니까 새로 리빌드를 할 때마다 Futurebuilder가 계속해서 업데이트가 된다는 게 문제가 생긴다. 여기서 해결할 수 있는 방법은 크게 3가지가 있다.

 

1. FutureBuilder의 Future부분을 initState에 넣어서 딱 한 번만 실행되게 한다.
2. setState 해야 하는 부분을 따로 statefulWidget으로 만들어서 Futurebuilder에 영향이 없게 한다
3. 상태 관리를 이용한다.

이렇게 3가지가 있는데, 필자가 권장하는 방법은 2번과 3번이다. 1번의 경우, initState는 statefulWidget에서 한 번만 실행된다는 것을 이용하는건데, 진짜 단 한번만 업데이트를 해야 하는 경우에만 적합하지 두 번 그 이상을 업데이트해야 할 때는 적합하지가 않다.

 

2번은 이미 포스팅한 글이 있다.

https://pcseob.tistory.com/53

14. [Flutter] 플러터 성능향상을 위한 꿀팁(1부 widget tree)

다음 포스팅에서는 3번 상태 관리를 이용하여 비동기를 관리해보도록 하겠다.

 

---

오류, 지적사항 그리고 궁금한 것은 댓글 부탁드립니다.