FutureBuilder

FutureBuilder를 이용하면 데이터가 반환 될 때까지 기다려야 하는 Future의 한계를 어느정도
극복할 수 있다.

FutureBuilder(
        future: getNumber(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return Center(
              child: CircularProgressIndicator(),
            );
          }

          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'FutureBuilder',
                style: textStyle.copyWith(fontSize: 20),
              ),
              Text('conState: ${snapshot.connectionState}'),
              Text('Data: ${snapshot.data}'),
              Text('Error: ${snapshot.error}'),
              ElevatedButton(
                  onPressed: () {
                    setState(() {});
                  },
                  child: Text('setState'))
            ],
          );
        },
      )

FutureBuilder의 future는 Future<>를 반환하는 함수여야 한다.

conState는 none, waiting, done 상태가 있고,
상태가 바뀔 때 마다 builder가 새로 호출된다.

FutureBuilder의 특징은 done -> waiting 상태로 바뀌어도 기존 값이 유지 된다는 것이다. (캐싱)
즉 외부에서 setState로 conState의 상태를 변경시켜도 done으로 바뀔 때까지 기존 값이 유지된다.

좋은 웹페이지 즐겨찾기