Flutter 인터넷에서 데이터 가져오기

인터넷을 통해 데이터를 가져오기 위해 Dart와 Flutter는 도구를 제공합니다. 

이 글은 Flutter cookbook을 참고했습니다. 

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

인터넷에서 데이터 가져오기

 

 

📕 1. http 패키지 추가하기

http 패키지를 사용하면 인터넷으로부터 손쉽게 데이터를 가져옵니다. 

pubspec.yaml의 dependencies 부분에 최신 버전의 http 패키지를 추가합니다. 

dependencies:
  http: <latest_version>

 

그리고 사용할 dart파일 상단에 http패키지를 import 해줍니다. 

import 'package:http/http.dart' as http;

 

 

📕 2. 네트워크 요청하기 

 

1.http.get()메서드는 Response를 포함하고 있는 Future를 반환합니다. 

void getData() async {
	Response response = await http.get(Uri.parse('https://example.com/whatsit/create'));
}

 

2.dart:convert 패키지를 통해 응답 내용을 받아옵니다. 

Future<Post> fetchPost() async {
  final response =
      await http.get('https://jsonplaceholder.typicode.com/posts/1');

  if (response.statusCode == 200) {
    // 만약 서버가 OK 응답을 반환하면, JSON을 파싱합니다.
    return Post.fromJson(json.decode(response.body));
  } else {
    // 만약 응답이 OK가 아니면, 에러를 던집니다.
    throw Exception('Failed to load post');
  }
}

 

 

 

📕 4. 데이터 가져오기

class _MyAppState extends State<MyApp> {
  Future<Post> post;

  @override
  void initState() {
    super.initState();
    post = fetchPost();
  }

 

📕 5. 데이터 보여주기

FutureBuilder<Post>(
  future: post,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text(snapshot.data.title);
    } else if (snapshot.hasError) {
      return Text("${snapshot.error}");
    }

    // 기본적으로 로딩 Spinner를 보여줍니다.
    return CircularProgressIndicator();
  },
);

 

역시 개발의 시작은 api통신인 것 같습니다. 갈길이 머네요👍