FutureBuilder

이 코드 조각은 FutureBuilder 위젯을 사용하여 비동기 작업의 결과를 기다리고, 그 결과에 따라 UI를 동적으로 구성하는 방법을 보여줍니다. FutureBuilder는 Flutter에서 비동기 작업을 수행하고 그 결과에 따라 다른 위젯을 표시할 때 매우 유용한 위젯입니다.

여기서 future: webtoon,은 FutureBuilder에 의해 처리될 Future 객체를 지정합니다. 이 경우 webtoon은 비동기적으로 웹툰의 상세 정보를 가져오는 Future 객체입니다.

builder 함수는 Future 객체의 상태에 따라 위젯을 빌드하는 로직을 포함합니다. snapshot 매개변수는 Future 객체의 현재 상태를 포함하는 AsyncSnapshot 객체입니다. AsyncSnapshot 객체는 Future의 결과, 에러, 연결 상태 등의 정보를 포함합니다.

FutureBuilder(
  future: webtoon, // FutureBuilder가 처리할 Future 객체
  builder: (context, snapshot) { // 비동기 작업의 결과에 따라 UI를 빌드
    if (snapshot.hasData) { // 데이터가 있는 경우
      return Padding( // UI를 구성
        padding: const EdgeInsets.symmetric(horizontal: 50),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              snapshot.data!.about, // 웹툰의 상세 설명
              style: const TextStyle(fontSize: 16),
            ),
            const SizedBox(height: 15),
            Text(
              '${snapshot.data!.genre} / ${snapshot.data!.age}', // 장르와 연령 등급
              style: const TextStyle(fontSize: 16),
            ),
          ],
        ),
      );
    }
    return const Text("..."); // 데이터가 아직 준비되지 않은 경우 로딩 표시
  },
)

• snapshot.hasData는 Future 객체가 데이터를 성공적으로 반환했는지 여부를 확인합니다. 데이터가 있는 경우, snapshot.data를 통해 접근할 수 있으며, 이 예제에서는 웹툰의 상세 설명(about), 장르(genre), 연령 등급(age) 등을 표시합니다.
• snapshot.data를 사용할 때 ! 연산자를 사용하는 이유는 snapshot.data가 null이 아님을 Dart에 알려주기 위함입니다. hasData가 true라면 data는 반드시 non-null일 것이라고 가정할 수 있습니다.
• 만약 Future 객체가 아직 데이터를 반환하지 않았다면, 로딩 중임을 나타내는 대체 텍스트를 표시합니다.

FutureBuilder를 사용하면 비동기 작업의 결과에 따라 상태를 적절히 처리하고 UI를 업데이트할 수 있습니다. 이는 사용자 경험을 개선하고, 앱의 반응성을 높이는 데 도움이 됩니다.

이 코드 조각은 FutureBuilder를 사용하여 웹툰 에피소드 목록을 비동기적으로 불러오고, 그 결과를 기반으로 UI를 동적으로 구성하는 방법을 보여줍니다. 이 예제에서는 future: episodes를 통해 에피소드 목록을 불러오는 Future 객체를 지정하고 있습니다.

builder 함수는 Future 객체의 상태에 따라 UI를 생성하는 로직을 포함합니다. 이 함수는 AsyncSnapshot 객체인 snapshot을 매개변수로 받아, Future의 결과에 접근할 수 있습니다.

FutureBuilder(
  future: episodes, // FutureBuilder가 처리할 Future 객체
  builder: (context, snapshot) {
    if (snapshot.hasData) { // 데이터가 있는 경우
      return Column(
        children: [
          for (var episode in snapshot.data!) // 에피소드 목록을 순회
            Container(
              margin: const EdgeInsets.only(bottom: 10),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                color: Colors.green.shade400, // 배경색
                boxShadow: [ // 그림자 효과
                  BoxShadow(
                    blurRadius: 5,
                    offset: const Offset(5, 5),
                    color: Colors.black.withOpacity(0.1),
                  ),
                ],
              ),
              child: Padding(
                padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      episode.title, // 에피소드 제목
                      style: const TextStyle(color: Colors.white, fontSize: 16),
                    ),
                    const Icon(
                      Icons.chevron_right_rounded, // 우측 화살표 아이콘
                      color: Colors.white,
                    ),
                  ],
                ),
              ),
            )
        ],
      );
    }
    return Container(); // 데이터가 아직 준비되지 않은 경우 빈 컨테이너 반환
  },
)

• snapshot.hasData는 비동기 작업이 데이터를 성공적으로 반환했는지 확인합니다. 데이터가 있을 경우, snapshot.data를 통해 에피소드 목록에 접근할 수 있습니다.
• for (var episode in snapshot.data!) 구문은 에피소드 목록을 순회하며, 각 에피소드에 대해 컨테이너를 생성합니다. 이 컨테이너는 에피소드의 제목과 우측 화살표 아이콘을 표시합니다.
• Container 위젯은 에피소드 항목의 배경색, 모서리 둥글기, 그림자 등을 스타일링합니다.
• snapshot.data에 ! 연산자를 사용하는 이유는 hasData가 true인 경우 data가 null이 아님을 Dart에 알리기 위함입니다.

FutureBuilder를 활용하면 비동기 작업의 결과에 기반한 동적인 UI 구성을 간단하게 처리할 수 있으며, 데이터 로딩 상태를 효과적으로 관리할 수 있습니다.