[Flutter] http 통신(GET) & JSON 파싱 (2)

지난 포스팅에 이어 서버에서 가져온 데이터를 앱 화면에 보여지도록 해보겠습니다.

 

4. 데이터 Fetch

fetchAlbum()메소드를 initState() or didChangeDependencies()에서 호출합니다. initState() 메소드는 한번 실행된 후 다시는 실행되지 않습니다. 따라서 InheritedWidget의 변화에 따라 API가 다시 로드 되는 것을 원한다면, fetchAlbum() 메소드를 didChangeDependencies()안에서 호출하고 그렇지 않다면  initState()에서 호출하면 됩니다.

 

class _ListTileAppState extends State<riview_test> {
  late Future<Album> futureAlbum; //late : non-nullable 변수의 초기화를 나중에 할 수 있게해줌

  	@override
  	void initState(){
    		super.initState();
    		futureAlbum=fetchAlbum();// 빌드시 futureAlbum이 fetchAlbum()으로 초기화 됨
  	}
  //...
  }

 

late 변수를 사용하면 non-nullable변수의 초기화를 선언 이후에 할 수 있게해줍니다. 그렇다면 그냥 late대신 nullable로 선언하고 나중에 다시 초기화하면 되지 않느냐?라고 생각할 수있겠지만, 그렇게되면 개발자가 다른 사람에게 코드의 관리를 넘겼을 때, 넘겨받은 관리자가 null이라는 값도 변수에 의미있는 값으로 쓰인다고 오해할 수 있기 때문에 이런 상황에서는 변수가 non-nullable이 되도록 late를 사용하는 것이 바람직합니다.

 

5. 데이터 보여주기

데이터를 화면에 나타내기 위해서 FutureBuilder 위젯을 사용하였습니다. Flutter는 API 응답객체인 Future에 대한 대응 Widget으로, FutureBuilder를 제공합니다. Future객체는 비동기처리 결과를 처리하는 객체로서, snapshot 정보를 통해 비동기 처리 결과를 얻을 수 있습니다.

 

두 매개변수를 제공해주어야합니다.

1. 작업하고자 하는 Future. 지금의 경우, fetchAlbum()함수에서 리턴된 future.
2. Future의 상태(loading, success 또는 error)에 따라서 Flutter에게 어떤 것을 만들어야하는지 알려주는 builder 함수.

 

child:FutureBuilder<Album>(
          future: futureAlbum,//작업하고하자는 future -> fetchAlbum()의 리턴값
          builder: (context,snapshot){ //snapshot 정보를 통해 비동기 처리 결과를 어들 수 있음
            if (snapshot.hasData) {
              return Column(
                children: [
                  Text(snapshot.data!.http_status),
                  Text(snapshot.data!.data1),
                  Text(snapshot.data!.data2),
                  Text(snapshot.data!.data3[2]),
                ],
              );
            } else if (snapshot.hasError) {
              return Text('${snapshot.error}');
            }

            // By default, show a loading spinner.
            //data를 아직 받아 오지 못했을때 실행되는 부분
            return const CircularProgressIndicator();
          },
        ),

 

fetchAlbum은 non-nullable 값만을 리턴할 수 있기 때문에, "404 Not Found" server response 의 경우에도 exception을 발생시켜야합니다. 그래서. Exception 발생이 에러 메세지를 나타내는데 사용될 수 있는 snapshot.hasError를 true로 만들어주었습니다.  서버에는 데이터가 이렇게 저장되어있습니다.

앱을 실행해보면

 

데이터가 성공적으로 불러와지는 모습을 볼 수 있습니다!

 

참고자료

https://velog.io/@rkddl6803/Flutter-%EC%9D%B8%ED%84%B0%EB%84%B7%EC%97%90%EC%84%9C-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0#%EC%99%9C-fetchalbum%EC%9D%B4-initstate-%EC%95%88%EC%97%90%EC%84%9C-%EC%8B%A4%ED%96%89%EB%90%90%EB%8A%94%EA%B0%80

https://docs.flutter.dev/cookbook/networking/fetch-data