플러터에서 http 패키지를 사용한 The Movie Database API사용 방법

 

플러터로 영화 검색 앱을 만드는 방법을 간단히 설명할게요!

여기서는 영화 정보 API(예: The Movie Database API)를 사용해서 영화 목록을 검색하고 보여주는 앱을 만들 거예요.

 

1. Flutter 프로젝트 생성

먼저, 플러터 프로젝트를 만들어야 해요.

flutter create movie_search_app
cd movie_search_app

2. 의존성 추가

pubspec.yaml 파일을 열고, 필요한 패키지를 추가해요.

우리는 영화 정보를 가져오기 위해 http 패키지를 사용할 거예요.

dependencies:
  flutter:
    sdk: flutter
  http: ^0.14.0

그 후, flutter pub get 명령어로 패키지를 설치해요.

3. API 설정

The Movie Database (TMDb) API를 사용하려면, TMDb 웹사이트에서 API 키를 받아야 해요. 가입 후 API 키를 생성하고, 이 키를 앱에 넣어야 해요.

4. 코드 작성

다음은 간단한 영화 검색 앱의 코드 예시입니다.

4.1. movie_search_app/lib/main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Movie Search',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MovieSearchScreen(),
    );
  }
}

class MovieSearchScreen extends StatefulWidget {
  @override
  _MovieSearchScreenState createState() => _MovieSearchScreenState();
}

class _MovieSearchScreenState extends State<MovieSearchScreen> {
  final TextEditingController _controller = TextEditingController();
  List movies = [];
  bool isLoading = false;

  Future<void> fetchMovies(String query) async {
    final apiKey = 'YOUR_API_KEY'; // 여기에 TMDb API 키를 넣으세요
    final url =
        'https://api.themoviedb.org/3/search/movie?api_key=$apiKey&query=$query';
    setState(() {
      isLoading = true;
    });

    final response = await http.get(Uri.parse(url));
    final data = jsonDecode(response.body);

    setState(() {
      isLoading = false;
      movies = data['results'];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Movie Search'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                labelText: 'Search for a movie',
                border: OutlineInputBorder(),
              ),
              onChanged: (text) {
                if (text.isNotEmpty) {
                  fetchMovies(text);
                }
              },
            ),
            SizedBox(height: 20),
            isLoading
                ? CircularProgressIndicator()
                : Expanded(
                    child: ListView.builder(
                      itemCount: movies.length,
                      itemBuilder: (context, index) {
                        final movie = movies[index];
                        return ListTile(
                          title: Text(movie['title']),
                          subtitle: Text(movie['release_date'] ?? 'No date'),
                          leading: movie['poster_path'] != null
                              ? Image.network(
                                  'https://image.tmdb.org/t/p/w200${movie['poster_path']}')
                              : null,
                        );
                      },
                    ),
                  ),
          ],
        ),
      ),
    );
  }
}

5. 앱 실행

이제 flutter run 명령어로 앱을 실행하면, 영화 검색이 가능한 앱이 됩니다. 사용자가 텍스트 필드에 영화 이름을 입력하면, 해당 영화 목록을 TMDb API에서 받아와서 화면에 보여줍니다.

 

6. 주요 파라미터 설명

6.1. apiKey

• 설명: The Movie Database (TMDb) API에서 사용자의 인증을 위한 키입니다.
• 위치: fetchMovies 함수 안에 직접 정의되어 있음.
• 예시 값: 'YOUR_API_KEY' (여기에는 실제 TMDb API 키를 입력해야 합니다.)

6.2. query

• 설명: 사용자가 검색하려고 입력한 영화 제목입니다. fetchMovies 함수에 전달됩니다.
• 위치: fetchMovies 함수의 매개변수.
• 예시 값: 'Inception', 'Avatar' 등 사용자가 입력하는 영화 제목.

6.3. url

• 설명: TMDb API에 요청을 보낼 때 사용하는 URL입니다. apiKey와 query를 포함하여 검색 결과를 가져옵니다.
• 위치: fetchMovies 함수 내부에서 정의된 변수.
• 구성 방식: 'https://api.themoviedb.org/3/search/movie?api_key=$apiKey&query=$query'
• 예시 값: https://api.themoviedb.org/3/search/movie?api_key=YOUR_API_KEY&query=Inception

6.4. isLoading

• 설명: 데이터를 로딩 중인지 여부를 나타내는 불리언(Boolean) 값입니다. fetchMovies 함수가 실행 중일 때 true로 설정되며, 로딩이 끝나면 false로 바뀝니다.
• 위치: _MovieSearchScreenState 클래스의 상태(state) 변수.
• 예시 값: true 또는 false

6.5. movies

• 설명: 검색된 영화 리스트입니다. TMDb API로부터 받은 results 데이터를 저장합니다.
• 위치: _MovieSearchScreenState 클래스의 상태 변수.
• 예시 값: 영화 리스트 데이터 (예: [{ 'title': 'Inception', 'release_date': '2010-07-16', ... }])

6.6. movie['title']

• 설명: 영화 제목을 나타냅니다. movies 리스트에 있는 각 영화 데이터에서 제목을 가져옵니다.
• 위치: ListView.builder 위젯 내부에서 사용.
• 예시 값: 'Inception', 'Avatar' 등 영화 제목.

6.7. movie['release_date']

• 설명: 영화의 개봉일을 나타냅니다. movies 리스트의 각 영화 객체에서 개봉일을 가져옵니다.
• 위치: ListView.builder 위젯 내부에서 사용.
• 예시 값: '2010-07-16' (영화의 개봉일)

6.8. movie['poster_path']

• 설명: 영화 포스터 이미지 경로입니다. TMDb의 이미지 서버 URL에 추가하여 이미지를 가져옵니다.
• 위치: ListView.builder 위젯 내부에서 이미지 URL 생성에 사용.
• 예시 값: '/kqjL17yufvn9OVLyXYpvtyrFfak.jpg'
  • 이미지 URL 형식: 'https://image.tmdb.org/t/p/w200${movie['poster_path']}'

7. 추가 사항

• API에서 가져오는 데이터의 다양한 정보를 보여줄 수 있어요 (예: 영화의 개요, 평점 등).
• 결과를 더 예쁘게 꾸밀 수도 있어요.

이 앱은 기본적인 영화 검색 기능을 가지고 있어요. 더 많은 기능을 추가하고 싶다면, TMDb API에서 제공하는 다양한 데이터를 활용해보세요!

 

구독!! 공감과 댓글,

광고 클릭은 저에게 큰 힘이 됩니다.

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱