[Flutter] FutureBuilder 사용법

- 비동기 처리결과를 UI에 적용하기 위해 사용하는 위젯으로 FutureBuilder는 'Future' 객체를 사용해

  데이터를 비동기적으로 가져오고, 가져온 데이터를 기반으로 화면에 UI를 표시

 

FutureBuilder 위젯 추가하기

FutureBuilder는 필요한 두 가지 파라미터인 future와 builder를 작성해야 함.

future는 데이터를 가져오는 Future 객체를, builder는 UI를 구성하는 함수를 입력

 

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FutureBuilder Example'),
        ),
        body: Center(
          child: MyFutureBuilder(),
        ),
      ),
    );
  }
}

class MyFutureBuilder extends StatelessWidget {
  // 비동기적으로 데이터를 가져오는 Future 함수
  Future<String> fetchData() async {
    final response = await http.get(Uri.parse('https://api.example.com/data'));

    if (response.statusCode == 200) {
      // 성공적으로 데이터를 가져왔을 때
      return json.decode(response.body)['data'];
    } else {
      // 요청이 실패했을 때
      throw Exception('Failed to load data');
    }
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String>(
      future: fetchData(), // 비동기 데이터 가져오기
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          // 데이터를 기다리는 동안 로딩 인디케이터 표시
          return CircularProgressIndicator();
        } else if (snapshot.hasError) {
          // 에러가 발생했을 때
          return Text('Error: ${snapshot.error}');
        } else {
          // 데이터를 성공적으로 가져왔을 때
          return Text('Data: ${snapshot.data}');
        }
      },
    );
  }
}

 

Future 객체

fetchData()는 네트워크를 통해 데이터를 가져올 때 사용되는 비동기 함수

FutureBuilder의 구조

FutureBuilder는 future 파라미터로 Future 객체를 받고, 

builder는 BuildContext와 AsyncSnapshot를 파라미터로 받는 함수

결과 상태에 따른 처리

connectionState를 확인하여 로딩 상태를 관리하고, hasError를 통해 에러 상태를 처리
데이터 표시: 성공적으로 데이터를 받아왔을 때, 그 데이터를 활용하여 UI를 구성

 

 

snapshot 이란?

AsyncSnapshot<T> 타입의 객체로  Future<T>에서 반환되는 데이터의 현재 상태에 대한 정보를 포함하고 있음

1. data: Future에서 반환된 데이터. 연산이 완료되었을 때 이 속성을 통해 데이터에 접근 가능
2. connectionState: Future 연산의 현재 상태를 나타냄
   • ConnectionState.none: 아직 Future가 실행되지 않았을 때.
   • ConnectionState.waiting: 데이터가 아직 반환되지 않고 연산이 진행 중일 때.
   • ConnectionState.active: 데이터 스트림이 활성 상태일 때 (스트림에만 적용).
   • ConnectionState.done: 데이터 연산이 완료되었을 때.
3. error: Future 연산 중 발생한 에러. 연산이 에러로 종료되었을 때 이 속성을 통해 에러 객체에 접근
4. hasData: snapshot이 유효한 데이터를 가지고 있는지 여부를 나타냅니다. data 속성이 null이 아닐 때 true를 반환
5. hasError: 연산 중 에러가 발생했는지 여부를 나타냅니다. 에러가 있을 경우 true를 반환