Flutter에서 FutureBuilder로 비동기 데이터 처리하기

FutureBuilder는 Flutter에서 비동기 작업의 상태를 UI에 쉽게 반영할 수 있도록 도와주는 위젯입니다. 주로 API 호출이나 파일 읽기와 같은 비동기 작업이 완료될 때까지 기다린 후, 그 결과를 기반으로 다른 UI를 표시할 때 사용됩니다.

FutureBuilder의 주요 속성

• future: 비동기 작업을 반환하는 Future 객체입니다. 예를 들어, API 요청이 포함될 수 있습니다.
• builder: 비동기 작업의 상태에 따라 UI를 렌더링하는 함수입니다. AsyncSnapshot을 매개변수로 받아 작업의 상태와 데이터를 제공합니다.

AsyncSnapshot의 상태

• connectionState.none: Future가 시작되지 않았습니다.
• connectionState.waiting: Future가 실행 중이며 대기 상태입니다.
• connectionState.active: Stream의 경우 활성 상태이며 데이터가 전달되고 있을 때입니다.
• connectionState.done: Future가 완료되었습니다.

사용 예시

다음은 API 호출의 결과를 화면에 보여주는 예제입니다.

import 'package:flutter/material.dart';

class ExampleScreen extends StatelessWidget {
  Future<String> fetchData() async {
    await Future.delayed(Duration(seconds: 2)); // Simulating a network delay
    return "Hello, FutureBuilder!";
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FutureBuilder Example'),
      ),
      body: Center(
        child: FutureBuilder<String>(
          future: fetchData(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return CircularProgressIndicator(); // 로딩 상태
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}'); // 에러 처리
            } else if (snapshot.hasData) {
              return Text(snapshot.data!); // 성공 시 데이터 표시
            } else {
              return Text('No data available');
            }
          },
        ),
      ),
    );
  }
}

설명

1. fetchData() 함수는 비동기적으로 데이터를 가져오는 역할을 합니다.
2. FutureBuilder는 future에 fetchData()를 전달받고, builder는 AsyncSnapshot을 기반으로 UI를 빌드합니다.
3. snapshot.connectionState를 통해 작업 상태를 확인하고, UI를 적절히 렌더링합니다.
4. 데이터가 도착하면 snapshot.hasData가 true가 되고, 이를 통해 데이터를 화면에 표시할 수 있습니다.

FutureBuilder를 사용하면 비동기 데이터에 따라 다르게 UI를 구성할 수 있어 사용자 경험을 향상시킬 수 있습니다.