[Cookbook] Internet에서 데이터 가져오기

전체 과정

1) http 패키지 추가

2) http 패키지를 통한 네트워크 요청

3) response를 Dart Object로 변경

4) Flutter로 Data 가져오기

5) Flutter에서 Data 전시

 

상세 과정

1) http 패키지 추가

-> pubspec.yaml 파일에 dependency 추가

-> main.dart 파일에 http 패키지 import

-> AndroidManifest.xml에 internet Permission 추가 (android > app > src > debug > AndroidManifest.xml)

 

2) network request

http.get() method를 통해 sample album을 가져옴.

http.Response 클래스는 성공적인 http call에 대한 data를 가지고 있음

 

3) Response를 Dart Object로 변경

-> Future<http.Response>로 작업 하는 것은 아주 어려움, 따라서, http.Response를 Dart 객체로 변경하여 사용하는 것이 나음. (JSON과 Serialization을 참고하기)

class Album {

	// init value
	factory Album.fromJson(Map<String, dynamic> json) {
    	return Album(
        	userId = json['userId'],
            id = json['id'],
            title = json['title']
        );
    }
}

 

-> http.Response를 Album으로 변경하는 방법

dart:convert 패키지를 통해 Response body를 JSON Map으로 변경하기

-> Response가 Success로 나오면, fromJson() factory method를 이용하여, JSON Map을 Album 클래스로 변경하기

-> Response가 200 이 아니라면 exception을 던지기, null을 던지면 안됨.

Future<Album> fetchAlbum() async {
	final response = await http
    	.get(Uri.parse('{주소}'));
        
	if (response.statusCode == 200) {
    	return Album.fromJson(jsonDecode(response.body));
    } else {
    	throw Exception('Failed to load album');
    }
}

 

4) 데이터 가져오기

fetchAlbum() method를 initState(), didChangeDependencies()로 가져오기

- initState( ) : 정확하게 딱 한 번 호출되고 그 이후에는 호출되지 않음

- InheritedWidget이 바뀐 이후에 API가 reloading 되는 것을 원하는 경우에는 didChangeDependencies() method에 넣기!

 

class _MyAppState extends State<MyApp> {
	late Future<Album> futureAlbum;
    
    @override
    void initState() {
    	super.initState();
        futureAlbum = fetchAlbum();
    }
}

 

5) Flutter에서 데이터 전시

FutureBuilder 사용하기, asynchronous data source에 사용하기 쉬움

 

------

FutureBuilder

1) Future 속성 정의

내가 다루고 싶은 Future

2) Builder 속성 정의

Future의 State에 따라 내가 render하고 싶은 builder를 정의, 

--------

 

* fetchAlbum()과 같이 불러오는 API method를 build에 포함시키지 않도록 하자.

Build method는 꽤 자주 불려짐. 따라서 주의해야함.

 

 

[전체 코드]

- Center > child 부분에 FutureBuilder를 넣으면, 해당 Future가 생성되었을 때, Widget에 대해서 build가 된다.