[Flutter] 웹에서 데이터 받아올 때

웹에서 데이터를 받아왔을 때 제대로 받아왔는지 확인하고 싶다. 이럴 경우 어떻게 하는지 작성해보고자 한다.

1. if문 사용하기

데이터를 서버에서 가져와서 쓰는 경우)

데이터가 없는데 보여주고자 하면 에러가 난다. 서버와 통신하는 시간이 좀 걸린다. 그래서 if문을 써서 변수 안에 데이터가 있는지 체크한다.

if(data.isNotEmpty){
	<확인하고자 하는 코드>
}else {
      return Text('로딩중');
    }

로딩중 대신 CircularProgressIndicator()등의 위젯을 사용하여 가독성있게 보여줄 수도 있다.

return Center(
        child: SizedBox(
          width: 100,
          height: 100,
          child: Column(
            children: const [CircularProgressIndicator(), 
															Text('로딩중입니다. ')],
          ),
        ),
      );

로딩중

반응형

2. FutureBuilder 사용하기

state가 서버의 요청으로 인해서 늦게 데이터가 받아와지는 경우)

FutureBuilder()는 입력한 Future 변수가 실제 데이터로 변할 때 내부 코드 1회 실행해주는 위젯이다. 

FutureBuilder (
  future: http.get(~),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text('post에 데이터 있으면 보여줄 위젯')
    } 
    return Text('post에 데이터 없으면 보여줄 위젯')
  },
)

• future: 안에는 Future에 담을 state 이름을 넣어준다.
  • state에 저장해서 쓰는게 더 유용하다.
• builder: future가 완료되면 builder안에 작성된 위젯을 보여준다.
• snapshot : 변화된 state 데이터를 의미한다.

→ FutureBuilder의 경우 데이터가 딱 한번 쓰일 때 유용하다. 만약 데이터가 자주 바뀐다면 불편해서 사용 안하는 것이 낫다.