[Flutter] FutureBuilder 란?

Flutter의 FutureBuilder

FutureBuilder는 Flutter에서 비동기적으로 데이터를 가져올 때 사용되는 위젯입니다. Future 객체를 통해 데이터를 받아오고, 해당 데이터가 준비되기 전, 준비된 후, 또는 에러가 발생했을 때 각각의 상태에 따라 다른 UI를 렌더링할 수 있도록 도와줍니다.

 

 

 

 

 

 

FutureBuilder의 주요 개념

• Future: FutureBuilder는 비동기적으로 데이터를 가져오는 Future 객체를 감시하고, 그 상태에 따라 UI를 업데이트합니다.
• snapshot: FutureBuilder는 snapshot 객체를 사용하여 Future의 현재 상태와 결과 데이터를 나타냅니다.
• connectionState: snapshot.connectionState를 통해 현재 Future가 어떤 상태인지 알 수 있으며, 이를 기반으로 UI를 다르게 렌더링할 수 있습니다.

 

 

 

 

FutureBuilder 상태 관리

FutureBuilder는 Future 작업의 4가지 상태를 처리할 수 있습니다:

• ConnectionState.none: Future가 시작되지 않았을 때의 상태입니다.
• ConnectionState.waiting: Future 작업이 대기 중인 상태로, 일반적으로 로딩 스피너를 표시합니다.
• ConnectionState.active: Future 작업이 활성화되어 데이터를 지속적으로 받아오고 있는 상태입니다. (주로 Stream에서 사용됨)
• ConnectionState.done: Future 작업이 완료된 상태로, 데이터가 성공적으로 로드되었거나 에러가 발생했을 때 처리됩니다.

 

 

 

 

 

 

 

 

 

FutureBuilder 사용 예시

아래는 FutureBuilder를 사용하여 데이터를 비동기적으로 가져오고, 그 상태에 따라 UI를 다르게 표시하는 예제입니다:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  Future fetchData() async {
    await Future.delayed(Duration(seconds: 2));  // 2초 후에 데이터 반환
    return '데이터가 로드되었습니다!';
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FutureBuilder 예제'),
        ),
        body: Center(
          child: FutureBuilder(
            future: fetchData(),  // 비동기 작업 호출
            builder: (context, 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('데이터 없음');
              }
            },
          ),
        ),
      ),
    );
  }
}
    

 

 

 

 

 

 

 

 

 

FutureBuilder 속성

• future: 비동기적으로 데이터를 가져오는 Future 객체를 설정합니다.
• builder: snapshot 객체를 사용하여 Future의 상태에 따라 UI를 업데이트하는 함수입니다.

 

 

 

 

 

 

snapshot의 주요 속성

• connectionState: Future의 현재 상태를 나타냅니다. (예: waiting, done 등)
• data: Future 작업이 성공적으로 완료되었을 때의 결과 데이터를 나타냅니다.
• hasData: Future 작업이 데이터를 포함하고 있는지 여부를 반환합니다.
• hasError: Future 작업 중 에러가 발생했는지 여부를 반환합니다.
• error: Future 작업 중 발생한 에러 정보를 나타냅니다.

 

 

 

 

 

 

결론

FutureBuilder는 비동기적으로 데이터를 가져와서 그 결과에 따라 UI를 유연하게 렌더링할 수 있는 매우 유용한 위젯입니다. 특히, 서버로부터 데이터를 받아오는 작업이나 파일을 읽어오는 작업처럼 시간이 걸리는 작업에 적합합니다.