[flutter] 플러터에서 GET 메소드를 사용하여 가장 인기 있는 영화 정보를 가져오는 방법은 무엇인가요?

이번 블로그 게시물에서는 Flutter 애플리케이션에서 GET 메소드를 사용하여 인기 있는 영화 정보를 가져오는 방법에 대해 알아보겠습니다.

1. HTTP 패키지 설치

프로젝트의 pubspec.yaml 파일에 http 패키지를 추가해야합니다. 아래와 같이 의존성을 추가하세요:

dependencies:
  http: ^0.13.0

의존성을 추가한 후에는 터미널에서 flutter pub get 명령어를 실행하여 패키지를 설치해주세요.

2. GET 메소드로 API 호출하기

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

Future<List<Map<String, dynamic>>> getPopularMovies() async {
  var url = Uri.parse('https://api.example.com/movies/popular');
  var response = await http.get(url);

  if (response.statusCode == 200) {
    var jsonResponse = jsonDecode(response.body);
    List<Map<String, dynamic>> movies = List<Map<String, dynamic>>.from(jsonResponse['movies']);
    return movies;
  } else {
    throw Exception('Failed to load popular movies');
  }
}

위의 코드는 GET 메소드를 사용하여 인기 있는 영화 정보를 가져오는 메소드입니다. http 패키지를 사용하여 API에 GET 요청을 보내고, 응답을 받아 JSON 형식으로 디코딩합니다.

응답이 성공하는 경우, jsonResponse에서 영화 목록을 가져옵니다. 응답이 실패하는 경우, Exception을 throw합니다.

3. FutureBuilder를 사용하여 영화 정보 표시하기

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Popular Movies'),
        ),
        body: FutureBuilder(
          future: getPopularMovies(),
          builder: (BuildContext context, AsyncSnapshot<List<Map<String, dynamic>>> snapshot) {
            if (snapshot.hasData) {
              return ListView.builder(
                itemCount: snapshot.data.length,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    title: Text(snapshot.data[index]['title']),
                    subtitle: Text(snapshot.data[index]['overview']),
                  );
                },
              );
            } else if (snapshot.hasError) {
              return Center(
                child: Text('Error: ${snapshot.error}'),
              );
            } else {
              return Center(
                child: CircularProgressIndicator(),
              );
            }
          },
        ),
      ),
    );
  }
}

위의 코드는 FutureBuilder를 사용하여 API로부터 받아온 영화 정보를 UI에 표시하는 예시입니다. getPopularMovies() 메소드로부터 List<Map<String, dynamic>> 형태의 데이터를 받아옵니다.

snapshot의 상태에 따라 다른 UI를 반환합니다. 데이터가 있는 경우 ListView를 통해 영화 목록을 표시하고, 오류가 있는 경우 오류 메시지를 표시하고, 데이터를 아직 받아오지 못한 경우 로딩 상태를 표시합니다.

이제 Flutter 애플리케이션에서 GET 메소드를 사용하여 인기 있는 영화 정보를 가져오는 방법을 배웠습니다. 이를 통해 영화 정보를 API로부터 가져와서 애플리케이션에서 활용할 수 있습니다.

참고 자료