FutureBuilder 는 어떤것인가? 이 단어에서 유추해 보았을 때, 미래의 무언가를 쌓는다는건가? 라는 생각이 들었다.
FutureBuilder는 내가 유추한 것과 일치하지는 않지만, 비슷한 역할을 한다.

주로, http 통신을 통해서 값을 받아오고, 그 값을 화면에 보여줄 때 사용하는 듯 하다.

1 ) 사용예제

http 통신을 통해서 jsonplaceholder 의 post 데이터를 받아왔다.

1-1 ) Post class

• 받아온 post 데이터를 담을 class로 Post class 를 준비한다.

class Post {
  int userId;
  int id;
  String title;
  String body;

  Post(this.userId, this.id, this.title, this.body);
  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      json['userId'],
      json['id'],
      json['title'],
      json['body'],
    );
  }
}
  

1-2 ) Http class

• http 요청을 하기 위한 Http class를 준비한다.

class Http {
  Future<Post> getPost(String id) async {
    final url = Uri.parse('https://jsonplaceholder.typicode.com/posts/$id');
    final response = await http.get(url);

    return Post.fromJson(jsonDecode(response.body));
  }
}

1-3 ) 데이터를 담을 속성 준비

• Http 통신을 통해 받아올 데이터를 담을 _post를 준비한다.

Future<Post> _post = Http().getPost('1');

1-4 ) 데이터를 화면에 보여주고, 업데이트 할 준비

• post 데이터를 화면에서 보여준다.

FutureBuilder<Post>(
                future: _post,
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    return Text(snapshot.data?.title as String);
                  }
                  return const Text('로딩중');
                },
              ),

1-5 ) snapshot ?

• FutureBuilder 위젯을 사용하면, 비동기 처리를 통해 Future의 결과를 대기하고, 결과에 따라 ui 를 업데이트 할 수 있다.
• FutureBuilder위젯의 builder 함수는 Future의 현재 상태에 따라서 다른 위젯을 반환한다.
• FutureBuilder는 Future에 대한 결과를 나타내는데 사용되는 snapShot객체를 생성하며, 이 객체에는 Future의 현재상태, 결과, 에러 정보가 포함된다.
• 현재 상태에 대한 정보를 api 문서에서 찾아보면
  ConnectionState.none,ConnectionState.waiting,ConnectionState.active,ConnectionState.done 인 것을 확인할 수 있다.

2. 정리

FutureBuilder 는 js에서의 promise와 같다. 비동기 요청에 대한 표현이며, 그 응답의 상태에 따라 값을 보여줄 수 있다. 하지만, StreamBuilder 처럼 변경된 값을 계속 청취하고 있는 것은 아니고, 하나의 응답을 수신한다.

출처
flutter/FutureBuilder/1
flutter/FutureBuilder/2