[flutter] 플러터 Flutter_typeahead에서 검색 결과의 영화 정보 표시하기

안녕하세요! 이번에는 플러터의 패키지 중 하나인 Flutter_typeahead를 사용하여 검색 결과의 영화 정보를 표시하는 방법에 대해 알아보겠습니다.

1. Flutter_typeahead란?

Flutter_typeahead는 플러터에서 자동 완성 기능을 구현할 때 사용되는 패키지입니다. 이 패키지를 사용하면 사용자가 입력한 키워드를 기반으로 자동 완성된 결과를 보여줄 수 있습니다.

2. 필요한 패키지 추가하기

먼저, 검색 결과를 표시하기 위해 영화 정보를 가져오기 위해 http 패키지를 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가해주세요.

dependencies:
  http: ^0.13.3
  flutter_typeahead: ^2.0.0

저장 후 패키지를 가져와야 합니다. 터미널에서 프로젝트 루트 디렉터리로 이동하고 다음 명령어를 실행하세요.

flutter pub get

3. 검색 결과 표시하기

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

class MovieSearch extends StatefulWidget {
  @override
  _MovieSearchState createState() => _MovieSearchState();
}

class _MovieSearchState extends State<MovieSearch> {
  final TextEditingController _typeAheadController = TextEditingController();
  List<Movie> _movies = [];

  void getMovies(String keyword) async {
    var response = await http.get(Uri.parse('https://api.themoviedb.org/3/search/movie?api_key=YOUR_API_KEY&query=$keyword'));
    if (response.statusCode == 200) {
      var data = json.decode(response.body);
      setState(() {
        _movies = List<Movie>.from(data['results'].map((movie) => Movie.fromJson(movie)));
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Movie Search'),
      ),
      body: Column(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.all(8.0),
            child: FlutterTypeahead(
              textFieldConfiguration: TextFieldConfiguration(
                controller: _typeAheadController,
                decoration: InputDecoration(
                  labelText: 'Movie Title',
                ),
              ),
              suggestionsCallback: (pattern) async {
                if (pattern.isNotEmpty) {
                  getMovies(pattern);
                }
              },
              itemBuilder: (context, Movie movie) {
                return ListTile(
                  title: Text(movie.title),
                  subtitle: Text(movie.releaseDate),
                );
              },
              onSuggestionSelected: (Movie movie) {
                _typeAheadController.text = movie.title;
              },
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: _movies.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(_movies[index].title),
                  subtitle: Text(_movies[index].releaseDate),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

class Movie {
  final String title;
  final String releaseDate;

  Movie({required this.title, required this.releaseDate});

  factory Movie.fromJson(Map<String, dynamic> json) {
    return Movie(
      title: json['title'],
      releaseDate: json['release_date'],
    );
  }
}

위의 코드는 영화 제목을 입력하는 입력창(TextField)과 자동 완성 결과를 보여주는 FlutterTypeahead 위젯 그리고 검색된 영화 목록을 보여주는 ListView로 구성된 MovieSearch 위젯입니다. 검색어를 입력하면 http 패키지를 사용하여 영화 정보를 가져온 후, Movie 객체로 변환하여 _movies 리스트에 저장합니다. 그리고 _movies 리스트를 ListView.builder를 사용하여 보여줍니다.

YOUR_API_KEY 부분에는 실제로 사용하는 영화 정보 API의 키 값을 입력해야 합니다. 해당 부분을 자신의 API 키로 대체해주세요.

이제 MovieSearch 위젯을 사용하여 검색 결과의 영화 정보를 표시할 수 있습니다.

마무리

플러터의 Flutter_typeahead 패키지를 사용하여 검색 결과의 영화 정보를 표시하는 방법에 대해 알아보았습니다. 이를 응용하여 다양한 자동 완성 기능을 구현할 수 있습니다. 자신의 프로젝트에서 활용해보시기 바랍니다.