플러터에서 FutureBuilder 위젯 사용법: 비동기 작업의 결과로 UI 업데이트하기

 

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

주로 네트워크 요청, 데이터베이스 쿼리, 파일 읽기 등 비동기 작업의 결과를 기반으로 UI를 구성할 때 활용됩니다.

이 포스트에서는 FutureBuilder의 기본 개념, 사용 방법, 주요 속성 및 활용 예시를 상세히 설명하겠습니다.

1. FutureBuilder란?

FutureBuilder는 비동기 작업의 결과를 기다리고, 결과에 따라 UI를 동적으로 생성하는 위젯입니다.

비동기 작업이 완료되면 FutureBuilder는 결과를 기반으로 UI를 다시 렌더링합니다.

이 위젯을 사용하면 비동기 데이터 로딩과 오류 처리를 간편하게 구현할 수 있습니다.

2. FutureBuilder의 기본 구조

FutureBuilder는 다음과 같은 구조를 가지고 있습니다

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 YourWidget(data: snapshot.data); // 데이터로 UI 구성
    } else {
      return Text('데이터 없음'); // 데이터가 없을 때
    }
  },
)

 

• future: 비동기 작업을 반환하는 Future 객체입니다.
• builder: Future의 상태에 따라 UI를 구성하는 함수입니다. AsyncSnapshot 객체를 사용하여 Future의 상태와 결과를 확인할 수 있습니다.
  
  

3. 주요 속성 및 사용 방법

3.1 future

future 속성은 FutureBuilder가 비동기 작업을 수행할 Future 객체를 지정합니다.
이 Future는 비동기 작업이 완료되면 결과를 반환합니다.

Future<String> fetchData() async {
  await Future.delayed(Duration(seconds: 2)); // 2초 지연
  return '데이터 로딩 완료!';
}

 

FutureBuilder<String>(
  future: fetchData(),
  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('데이터 없음');
    }
  },
)

3.2 builder

builder 속성은 Future의 상태에 따라 UI를 구성하는 함수입니다. AsyncSnapshot 객체를 통해 현재 Future의 상태와 결과를 확인할 수 있습니다.

• snapshot.connectionState: Future의 상태를 나타냅니다. 주요 상태는 ConnectionState.none, ConnectionState.waiting, ConnectionState.active, ConnectionState.done입니다.
• snapshot.hasData: Future가 완료되고 데이터가 있을 때 true입니다.
• snapshot.hasError: Future가 완료되었지만 오류가 발생했을 때 true입니다.
• snapshot.data: Future가 성공적으로 완료되었을 때 반환된 데이터입니다.
• snapshot.error: Future가 오류를 반환했을 때의 오류 정보입니다.

4. FutureBuilder 활용 예시

4.1 네트워크 요청 처리

네트워크 요청을 통해 데이터를 가져오고, 로딩 중, 오류 발생, 데이터 표시를 처리할 수 있습니다.

Future<List<String>> fetchItems() async {
  await Future.delayed(Duration(seconds: 3)); // 3초 지연
  return ['아이템 1', '아이템 2', '아이템 3'];
}

FutureBuilder<List<String>>(
  future: fetchItems(),
  builder: (BuildContext context, AsyncSnapshot<List<String>> snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return Center(child: CircularProgressIndicator());
    } else if (snapshot.hasError) {
      return Center(child: Text('오류 발생: ${snapshot.error}'));
    } else if (snapshot.hasData) {
      return ListView(
        children: snapshot.data!.map((item) => ListTile(title: Text(item))).toList(),
      );
    } else {
      return Center(child: Text('데이터 없음'));
    }
  },
)

4.2 데이터베이스 쿼리 처리

데이터베이스에서 데이터를 비동기적으로 가져와 UI를 구성할 수 있습니다.

Future<Map<String, dynamic>> fetchUserProfile() async {
  await Future.delayed(Duration(seconds: 2)); // 2초 지연
  return {'name': '홍길동', 'age': 30};
}

FutureBuilder<Map<String, dynamic>>(
  future: fetchUserProfile(),
  builder: (BuildContext context, AsyncSnapshot<Map<String, dynamic>> snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return Center(child: CircularProgressIndicator());
    } else if (snapshot.hasError) {
      return Center(child: Text('오류 발생: ${snapshot.error}'));
    } else if (snapshot.hasData) {
      final data = snapshot.data!;
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('이름: ${data['name']}'),
          Text('나이: ${data['age']}'),
        ],
      );
    } else {
      return Center(child: Text('데이터 없음'));
    }
  },
)

5. 결론

FutureBuilder는 플러터에서 비동기 작업의 결과를 처리하고, 그 결과에 따라 UI를 동적으로 업데이트할 수 있는 매우 유용한 위젯입니다.

네트워크 요청, 데이터베이스 쿼리, 파일 읽기 등 다양한 비동기 작업을 처리하는 데 적합하며, 로딩 상태, 오류 처리, 데이터 표시를 간편하게 구현할 수 있습니다.

FutureBuilder를 사용하여 더 나은 사용자 경험을 제공하세요.

 

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

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