본문으로 건너뛰기

flutter Futurebuilder Future ListView 템플릿

개요​

FutureBuilder Future 객체를 활용 코드 템플릿

코드​

Future 객체 생성​

객체를 초기화 해줍니다. 객체 선언시 final를 선언하는 경우도 있습니다. 이 템플릿에서는 사용하지 않습니다.

Future<List> fruitListFuture = Future.value([]);

객체에 담을 데이터 Fetching 함수 작성​

  // 유저의 리뷰 목록을 가져오는 함수
  Future<List> getFruit() async {
   // 여기에 각 상황에 적합한 fetch 함수 추가

    if (response['code'] == 200) {
      return response['data']['list'];
    }

    return [];
  }

FutureBuilder 작성​

return FutureBuilder(
                future: fruitListFuture,
                builder: (BuildContext context, AsyncSnapshot<List> snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return const Center(child: CircularProgressIndicator());
                  } else if (snapshot.hasData) {
                    return ListView.builder(
                      itemCount: snapshot.data!.length,
                      itemBuilder: (context, index) {
                        final fruit = snapshot.data![index];
                        return Text(fruit['name'] ?? 'no fruit name available');
                      },
                    );
                  } else {
                    return const Center(child: Text("No data available"));
                  }
                });

선택 사항​

after WidgetBinding in initState​

만약 Provider 전역 변수를 활용하고자 하는 경우 아래와 같이 작성합니다.

  @override
  void initState() {
    super.initState();

    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      // 이 구간부터 Provider 전역 변수를 활용할 수 있습니다.
      setState(() {
        fruitListFuture = getFruit();
      });
    });
  }