플러터(Flutter) 의 FutureBuilder 란?

FutureBuilder 란?

• Future 와의 상호작용의 가장 최신 스냅샷을 기반으로 스스로 빌드되는 위젯
• UI 에서 비동기 연산을 처리하는데 주로 사용됨

개념

• 비동기 연산(Asynchronous Operation): 잠재적으로 값이나 에러가 될 수 있는 Future 와 함께 동작하도록 설계됐다. 네트워크 요청이나 DB 쿼리와 같은 비동기 작업에 사용된다.
• 상태 관리: Future 의 상태는 not started, in progress, completed with data, completed with error 가 있는데 이에 따라 UI 를 재구성하여 비동기 작업의 상태관리를 처리한다.

주요 속성

• Future: 이 빌더가 연결된 Future 이다.데이터의 소스이고 빌더는 UI 를 빌드하기 위해 이 데이터를 갖다 쓴다.
• builder: 위젯 트리를 빌드하는 함수이다. Future 의 상태에 따라 렌더링할 UI 를 정의한다. BuildContext 와 Future 결과의 비동기 스냅샷(AsyncSnapshot) 에 액세스할 수 있다.

Best Practice

• 모든 상태 처리하기: Future 의 모든 상태 loading, success, error 에 대한 처리를 해주자.
• Future 재생성(Recration) 방지: 모든 빌드에서 퓨처가 다시 생성되지 않도록 하려면, build 메서드 외부에서 Future 를 정의하거나 Future Provider 를 사용해야 한다.
• 오류 처리: Future 가 오류와 함께 완료되는 경우에 대비해 꼼꼼한 오류 처리를 구현해주는 것이 좋다.

용례

• 데이터 가져오기: 비동기로 데이터를 가져올 때
• 동적 콘텐츠: 위젯의 콘텐츠가 비동기 데이터의 결과에 따라 달라지는 경우 유용하다.

사용 예제1

FutureBuilder<TypeOfData>(
  future: myFutureMethod(), // Future function to fetch data
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator(); // Show loading indicator while waiting
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}'); // Handle error case
    } else {
      return MyWidget(data: snapshot.data); // Render UI with data
    }
  },
)

사용 예제2

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        centerTitle: true,
        title: const Text(
            'CodingFactory Youtube Example'
        ),
        backgroundColor: Colors.black,
      ),
      body: FutureBuilder<List<VideoModel>>(
        future: YoutubeRepository.getVideos(),
        builder: (context, snapshot) {
          // completed with error 처리
          if (snapshot.hasError) {
            return Center(
                child: Text(
                    snapshot.error.toString()
                )
            );
          }

          // completed without data 처리
          if (!snapshot.hasData) {
            return const Center(
              child: CircularProgressIndicator(),
            );
          }

          // completed with data 처리
          return RefreshIndicator(
            onRefresh: () async {
              setState(() {});
            },
            child: ListView(
              physics: const BouncingScrollPhysics(),
              children: snapshot.data!
                  .map((e) => CustomYoutubePlayer(videoModel: e))
                  .toList(),
            ),
          );
        },
      ),
    );
  }
}

공식문서

https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html