플러터에서 FutureBuilder 사용법: 초보자를 위한 간단한 가이드

 

FutureBuilder는 플러터(Flutter)에서 비동기 작업의 결과를 기다리고, 그 결과에 따라 화면을 동적으로 업데이트하는 데 사용되는 위젯입니다.

여기서 비동기 작업이란, 네트워크 요청, 데이터베이스 쿴리, 파일 읽기와 같은 시간이 걸리는 작업을 말합니다.

이 포스트에서는 FutureBuilder의 기본 개념과 사용법을 초보자도 이해할 수 있도록 간단하게 설명하겠습니다.

1. FutureBuilder란 무엇인가요?

FutureBuilder는 비동기 작업의 결과를 처리하여 화면에 보여주는 위젯입니다.

예를 들어, 서버에서 데이터를 가져오거나, 데이터베이스에서 정보를 불러오는 등의 작업을 할 때 사용합니다.

비동기 작업이 완료되면 FutureBuilder는 그 결과를 화면에 표시합니다.

2. FutureBuilder의 기본 사용법

FutureBuilder는 두 가지 주요 속성을 사용합니다:

• future: 비동기 작업을 반환하는 Future 객체입니다.
• builder: 비동기 작업의 상태에 따라 화면을 어떻게 업데이트할지를 결정하는 함수입니다.

2.1 기본 구조

FutureBuilder<T>(
  future: yourFuture, // 비동기 작업을 반환하는 Future 객체
  builder: (BuildContext context, AsyncSnapshot<T> snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      // 비동기 작업이 진행 중일 때
      return CircularProgressIndicator(); // 로딩 인디케이터
    } else if (snapshot.hasError) {
      // 비동기 작업에서 오류가 발생했을 때
      return Text('오류 발생: ${snapshot.error}');
    } else if (snapshot.hasData) {
      // 비동기 작업이 성공적으로 완료되었을 때
      return Text('받은 데이터: ${snapshot.data}');
    } else {
      return Text('데이터 없음'); // 데이터가 없을 때
    }
  },
)

• future: 비동기 작업을 수행할 Future 객체를 지정합니다.
• builder: Future의 상태에 따라 화면을 업데이트하는 함수를 작성합니다.

2.2 간단한 예제

다음은 FutureBuilder를 사용하여 서버에서 데이터를 가져와 화면에 표시하는 간단한 예제입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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

class DataLoader extends StatelessWidget {
  // 비동기 작업을 수행하는 Future 함수
  Future<String> fetchData() async {
    await Future.delayed(Duration(seconds: 2)); // 2초 지연
    return '서버에서 받은 데이터';
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String>(
      future: fetchData(), // 비동기 작업을 수행할 Future 객체
      builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          // 비동기 작업이 진행 중일 때
          return CircularProgressIndicator(); // 로딩 인디케이터 표시
        } else if (snapshot.hasError) {
          // 비동기 작업에서 오류가 발생했을 때
          return Text('오류 발생: ${snapshot.error}');
        } else if (snapshot.hasData) {
          // 비동기 작업이 성공적으로 완료되었을 때
          return Text('받은 데이터: ${snapshot.data}');
        } else {
          return Text('데이터 없음'); // 데이터가 없을 때
        }
      },
    );
  }
}

이 예제에서는 fetchData() 함수가 2초 후에 데이터를 반환하고, FutureBuilder는 이 데이터를 화면에 표시합니다. 데이터가 로딩 중일 때는 로딩 인디케이터가 표시됩니다.

3. FutureBuilder의 주요 상태

• ConnectionState.none: Future가 시작되지 않았을 때.
• ConnectionState.waiting: Future가 실행 중일 때. 로딩 인디케이터를 표시할 때 사용합니다.
• ConnectionState.active: Future가 활성 상태일 때. (일반적으로 비동기 작업에 적합하지 않으며, Stream에서 사용됩니다.)
• ConnectionState.done: Future가 완료되었을 때. 데이터가 있거나 오류가 발생했을 때 사용합니다.

4. 자주 묻는 질문 (FAQ)

4.1 FutureBuilder가 자주 리빌드 되나요?

네, FutureBuilder는 Future가 변경되면 자동으로 리빌드 됩니다. 같은 Future 객체를 사용하는 경우에는 결과가 캐시되므로 리빌드가 발생하지 않습니다.

4.2 FutureBuilder를 여러 번 사용할 수 있나요?

네, 여러 개의 FutureBuilder를 사용하여 서로 다른 비동기 작업을 동시에 처리하고 각각의 결과에 따라 화면을 업데이트할 수 있습니다.

4.3 FutureBuilder 외에 비동기 작업을 처리하는 방법이 있나요?

FutureBuilder 외에도 StreamBuilder를 사용할 수 있습니다. StreamBuilder는 비동기 데이터 스트림을 처리하는 데 적합합니다.

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱