[flutter] 플러터 Container에서 비동기 작업을 처리하는 방법은 무엇인가요?

11 Dec 2023

flutter

FutureBuilder 위젯은 Future 객체를 기다리고, 해당 Future 객체가 완료되면 화면을 다시 그립니다. 이를 이용하여 Container 내부에서 비동기 작업의 결과를 화면에 표시할 수 있습니다.

아래는 FutureBuilder를 사용하여 비동기 작업을 처리하는 Container의 예시입니다.

Container(
  child: FutureBuilder<String>(
    future: fetchData(), // 비동기 작업을 수행할 함수 호출
    builder: (context, snapshot) {
      if (snapshot.connectionState == ConnectionState.done) {
        if (snapshot.hasError) {
          return Text('에러 발생: ${snapshot.error}');
        }
        return Text('데이터: ${snapshot.data}');
      } else {
        return CircularProgressIndicator(); // 데이터를 기다리는 동안 로딩 표시
      }
    },
  ),
)

Future<String> fetchData() async {
  await Future.delayed(Duration(seconds: 2));
  return '플러터 비동기 작업 예시';
}

이 코드는 Container 내부에 FutureBuilder를 통해 fetchData 함수를 호출하여 비동기 작업을 처리하고, 그 결과에 따라 화면을 표시합니다.