플러터 FutureBuilder, 실무에 바로 적용 가능한 예제

Flutter: 효율적인 비동기 처리를 위한 FutureBuilder

Flutter에서 비동기 작업을 쉽고 효율적으로 처리하게 해주는 FutureBuilder에 대해 알아보겠습니다. FutureBuilder는 어떤 결과가 준비되기를 기다리는 동안 지정된 위젯을 표시하며, 해당 상태를 자동으로 관리하는 편리한 도구입니다.

FutureBuilder의 핵심 기능

• 비동기 데이터 로드: 최초 위젯 빌드 시, Future 객체로부터 데이터를 자동으로 가져와 다양한 방법으로 데이터 응답을 처리합니다.
• 로딩 인디케이터: 데이터를 기다리는 동안에는 로딩 인디케이터를 표시합니다.
• 에러 처리: 발생한 에러를 처리하고 사용자에게 친화적인 메세지를 표시합니다.

FutureBuilder를 활용하면 다양한 상황에 대응하는 위젯을 손쉽게 구현할 수 있습니다.

FutureBuilder 사용법: 기본 예제

FutureBuilder를 이용하여 비동기 데이터 로드 작업을 어떻게 수행하는지 확인해보겠습니다.

1단계: 비동기 데이터 가져오기 위한 Future 함수 작성

먼저, Future 객체를 반환하는 비동기 함수를 작성합니다. 이 예제에서는 3초 동안 기다렸다가 문자열 데이터를 반환하는 함수를 생성해 보겠습니다.

Future<String> getData() async {
  await Future.delayed(Duration(seconds: 3));
  return '안녕하세요!';
}

2단계: FutureBuilder 위젯을 이용한 데이터 로드

getData() 함수를 호출하여 future 프로퍼티를 설정합니다. 데이터가 로딩 중인 경우에는 CircularProgressIndicator를 표시하고, 데이터가 준비되면 결과를 표시하거나, 에러 발생시 관련 메세지를 출력합니다.

FutureBuilder<String>(
  future: getData(),
  builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
    if (snapshot.hasData) {
      return Text(snapshot.data);
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    }
    return CircularProgressIndicator();
  },
)

FutureBuilder 사용 시 주의사항

FutureBuilder를 사용할 때 다음의 주의사항을 고려하면 더 효과적인 작업이 가능합니다.

1. FutureBuilder의 적절한 배치

FutureBuilder는 데이터를 가져오는 것과 관련된 위젯만을 감싸야 합니다. 그렇지 않으면 데이터가 변경될 때마다 의도치 않게 다른 위젯들까지 다시 그려질 수 있습니다.

2. Future 객체 재생성을 피하라

build 메서드 안에 Future 객체를 생성하는 것은 매번 빌드가 호출될 때마다 객체가 재생성되는 것을 의미합니다. 이를 방지하기 위해서는 StatefulWidget을 사용하고 initState 메서드에서 Future 객체를 생성하거나, 사용자 정의 클래스 등을 사용하여 객체를 생성해야 합니다.

3. ConnectionState 활용

FutureBuilder의 스냅샷에서 ConnectionState 상태를 사용하여 다양한 상태에 따른 위젯을 바로 구현할 수 있습니다. 이를 활용하면 로딩 중, 에러 상태, 완료 상태 등에 따른 전환 처리가 확실하게 이루어집니다.

이런 주의사항을 기억하면서 FutureBuilder를 사용하면, 효율적인 앱 개발이 가능합니다.

FutureBuilder 실전 예제: API에서 데이터 가져와 출력하기

이번에는 실제 API에서 데이터를 가져오고 FutureBuilder를 사용하여 데이터를 출력하는 예제를 살펴보겠습니다.

1단계: API 호출을 위한 http 패키지 설치

API 호출을 위해 http 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음 코드를 추가하세요.

dependencies:
  http: ^0.13.3

2단계: API 호출 함수 작성

비동기 API 호출을 위한 함수를 작성합니다. 아래 예제에서는 JSONPlaceholder API에서 포스트 데이터를 가져옵니다.

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

Future<List<Map<String, dynamic>>> fetchPosts() async {
  final response = await http.get('https://jsonplaceholder.typicode.com/posts');

  if (response.statusCode == 200) {
    return List<Map<String, dynamic>>.from(json.decode(response.body));
  } else {
    throw Exception('Failed to load posts');
  }
}

3단계: FutureBuilder를 활용하여 API 데이터 출력

작성한 API 호출 함수를 FutureBuilder를 이용하여 API의 데이터를 출력합니다.

FutureBuilder<List<Map<String, dynamic>>>(
  future: fetchPosts(),
  builder: (BuildContext context, AsyncSnapshot<List<Map<String, dynamic>>> snapshot) {
    if (snapshot.hasData) {
      return ListView.builder(
        itemCount: snapshot.data.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(snapshot.data[index]['title']),
            subtitle: Text(snapshot.data[index]['body']),
          );
        },
      );
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    }
    return CircularProgressIndicator();
  },
)

이 예제를 통해 실전에서 간단하게 API 데이터를 불러와 출력하는 방식을 경험해 보았습니다. 이를 바탕으로 다양한 상황에 대응할 수 있는 앱을 개발할 수 있습니다.