AsyncSnapshot은 Dart와 Flutter에서 사용되는 클래스입니다. 이 클래스는 FutureBuilder나 StreamBuilder와 같은 위젯에서 비동기 연산(Future나 Stream)의 현재 상태와 데이터를 나타내는 데 사용됩니다.
AsyncSnapshot 클래스는 다음과 같은 주요 속성을 포함합니다:
-
data: 비동기 연산의 최신 데이터를 포함합니다. 예를 들어,
Future<String>의 경우data속성은String타입의 값을 가질 수 있습니다. -
connectionState: 비동기 연산의 현재 상태를 나타냅니다. 예를 들어,
ConnectionState.waiting은 데이터가 아직 도착하지 않았음을 나타냅니다. -
hasData:
data속성에 유효한 데이터가 있는지 여부를 나타내는 boolean 값입니다. -
hasError: 연산 중 오류가 발생했는지 여부를 나타내는 boolean 값입니다.
-
error: 연산 중 발생한 오류의 세부 사항을 포함합니다.
AsyncSnapshot은 FutureBuilder나 StreamBuilder와 함께 사용되어, 비동기 연산의 결과에 따라 UI를 동적으로 구성하는 데 도움을 줍니다. 예를 들어, 데이터 로딩 중에는 로딩 인디케이터를 보여주고, 데이터 로드가 완료되면 해당 데이터를 사용하여 위젯을 구성할 수 있습니다.
AsyncSnapshot는 Dart와 Flutter에서 비동기 프로그래밍을 할 때 사용되는 개념입니다. AsyncSnapshot은 FutureBuilder나 StreamBuilder와 같은 위젯에서 Future나 Stream의 현재 상태를 나타내는 객체입니다.
AsyncSnapshot의 주요 특징
-
현재 상태 정보:
AsyncSnapshot은 비동기 연산의 최신 결과 및 상태를 포함합니다. 이는 데이터가 로드 중인지, 에러가 발생했는지, 또는 데이터가 성공적으로 도착했는지를 확인할 수 있게 해줍니다. -
데이터 접근:
snapshot.data를 통해 비동기 연산의 결과 데이터에 접근할 수 있습니다. -
상태 확인:
snapshot.connectionState를 사용하여 비동기 연산이 현재 어떤 상태인지 (예: 대기 중, 활성, 완료) 확인할 수 있습니다. -
에러 처리:
snapshot.hasError와snapshot.error를 통해 에러가 발생했는지와 에러의 세부 사항을 확인할 수 있습니다.
사용 예시: FutureBuilder와 AsyncSnapshot
FutureBuilder를 사용할 때 AsyncSnapshot은 Future의 결과를 처리하기 위해 사용됩니다. 예를 들어, 네트워크에서 데이터를 가져오는 Future의 결과를 표시하는 UI를 만들 때 이를 사용합니다.
FutureBuilder<MyData>(
future: myDataFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
} else if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else {
return Text('Data: ${snapshot.data}');
}
},
)이 코드에서 FutureBuilder는 myDataFuture의 상태에 따라 다른 위젯을 반환합니다. snapshot은 AsyncSnapshot<MyData> 타입이며, 이를 통해 데이터의 로딩 상태, 에러, 결과 데이터 등을 확인할 수 있습니다.
ListView makeList(AsyncSnapshot<List<WebtoonModel>> snapshot) {
return ListView.separated(
scrollDirection: Axis.horizontal,
itemCount: snapshot.data!.length,
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
itemBuilder: (context, index) {
var webtoon = snapshot.data![index];
return Column(
children: [
Container(
width: 250,
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
blurRadius: 15,
offset: const Offset(10, 10),
color: Colors.black.withOpacity(0.3),
)
],
),
child: Image.network(webtoon.thumb),
),
const SizedBox(
height: 10,
),
Text(
webtoon.title,
style: const TextStyle(
fontSize: 22,
),
),
],
);
},
separatorBuilder: (context, index) => const SizedBox(width: 40),
);
}
makeList 함수에서 AsyncSnapshot<List<WebtoonModel>>는 FutureBuilder 또는 StreamBuilder에서 반환된 비동기 연산의 결과를 나타냅니다. 이 경우, AsyncSnapshot은 WebtoonModel 객체의 리스트를 포함하고 있습니다. 이 리스트는 웹툰 데이터를 나타내며, 각 웹툰은 제목, 썸네일 이미지, ID 등의 정보를 가질 수 있습니다.
makeList 함수에서 AsyncSnapshot의 사용
- 데이터 접근:
snapshot.data를 통해 비동기적으로 로드된WebtoonModel객체들의 리스트에 접근합니다. - 리스트 길이:
snapshot.data!.length를 사용하여 리스트의 길이, 즉 웹툰의 총 개수를 가져옵니다. - 아이템 접근:
snapshot.data![index]를 통해 특정 인덱스에 있는 웹툰 객체에 접근합니다.
ListView.separated에서 AsyncSnapshot 사용 예시
makeList 함수는 ListView.separated 위젯을 반환합니다. 이 위젯에서는 AsyncSnapshot의 데이터를 사용하여 웹툰 목록을 동적으로 생성합니다.
itemCount: 웹툰 목록의 길이를 정의합니다.itemBuilder: 각 웹툰에 대한 UI를 구성합니다. 여기서는Column위젯을 사용하여 각 웹툰의 썸네일과 제목을 표시합니다.separatorBuilder: 목록의 각 아이템 사이에 공간을 제공하는 구분자를 생성합니다.
이렇게 AsyncSnapshot을 사용하면 FutureBuilder나 StreamBuilder의 비동기적인 데이터 흐름에 따라 동적인 UI를 만들 수 있습니다. 예를 들어, 데이터가 아직 로드 중일 때 로딩 인디케이터를 보여주고, 데이터 로드가 완료되면 실제 데이터를 기반으로 목록을 표시할 수 있습니다.
