WHAT IS IT
FutureBuilder는 Flutter에서 비동기 작업 결과를 UI로 바인딩하는 데 사용되는 위젯
FutureBuilder는 Future 객체를 받아서, 해당 Future 객체가 실행될 때까지 기다린 후, 결과를 사용하여 UI를 업데이트합니다.
HOW TO USE
FutureBuilder는 다음과 같은 매개변수를 받습니다.
•
future: Future 객체
비동기 작업을 수행하고 결과를 반환하는 객체
•
builder: 결과에 따라 UI를 빌드하는 함수
•
initialData: 초기 데이터
FutureBuilder<String>(
future: fetchData(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
if (snapshot.hasData) {
return Text(snapshot.data!);
} else if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
}
}
return CircularProgressIndicator();
},
)
Dart
복사
•
Future 객체가 null이면 initialData를 사용하여 UI를 업데이트
•
Future 객체가 실행 중이면, builder 함수는 AsyncSnapshot을 반환하여, 현재 상태를 전달
•
Future 객체가 완료되면, builder 함수는 AsyncSnapshot을 반환하여, 결과를 전달합니다.
위 코드에서는 fetchData() 함수를 호출하여, Future 객체를 반환합니다. FutureBuilder 위젯은 이 Future 객체를 받아서, builder 함수에서 UI를 업데이트합니다.
builder 함수에서는 AsyncSnapshot을 받아서, connectionState에 따라서 UI를 업데이트합니다. connectionState가 done이면, data 또는 error를 사용하여 결과를 출력합니다. connectionState가 waiting이면, CircularProgressIndicator를 출력합니다.
DETAIL
FutureBuilder
AsyncSnapshot은 다음과 같은 속성을 가지고 있습니다.
•
connectionState: Future 객체의 현재 상태
•
data: Future 객체의 결과
•
error: Future 객체의 에러
FutureBuilder<String>(
future: fetchData(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
if (snapshot.hasData) {
return Text(snapshot.data!);
} else if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
}
}
return CircularProgressIndicator();
},
)
Dart
복사
위 코드에서는 fetchData() 함수를 호출하여, Future 객체를 반환합니다. FutureBuilder 위젯은 이 Future 객체를 받아서, builder 함수에서 UI를 업데이트합니다.
builder 함수에서는 AsyncSnapshot을 받아서, connectionState에 따라서 UI를 업데이트합니다. connectionState가 done이면, data 또는 error를 사용하여 결과를 출력합니다. connectionState가 waiting이면, CircularProgressIndicator를 출력합니다.