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

플러터(Flutter)의 flutter_typeahead 패키지는 사용자가 텍스트 입력 시 자동완성 기능을 제공하는 라이브러리입니다. 검색 결과를 통해 도서 정보를 표시하는 기능을 구현해보겠습니다.

Step 1: 패키지 추가하기

먼저, pubspec.yaml 파일에 flutter_typeahead 패키지를 추가해야 합니다. 아래와 같이 dependencies 섹션에 패키지를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  flutter_typeahead: ^x.x.x  # 원하는 버전 지정

그리고 다음 명령어로 패키지를 가져옵니다.

$ flutter pub get

Step 2: 검색 API와 연동하기

도서 정보를 검색하기 위해 도서 API와 연동해야 합니다. API가 있을 경우 해당 API와 통신하는 코드를 작성하고, 검색 결과를 받아오는 함수를 구현해주세요.

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

Future<List<Book>> searchBooks(String query) async {
  final response = await http.get(Uri.parse('URL'));
  if (response.statusCode == 200) {
    final jsonData = json.decode(response.body);
    List<Book> books = [];
    for (var bookData in jsonData['books']) {
      books.add(Book.fromJson(bookData));
    }
    return books;
  } else {
    throw Exception('Failed to load books');
  }
}

위 코드에서 URL 부분을 도서 API의 엔드포인트로 변경해야 합니다. 또한, Book 클래스는 API로부터 받은 JSON 데이터를 매핑할 클래스입니다. 필요에 따라 Book 클래스를 생성하고 fromJson 메서드를 구현해주세요.

Step 3: Flutter_typeahead 위젯 사용하기

이제 flutter_typeahead 패키지를 사용하여 텍스트 입력 시 자동완성 기능을 제공하는 위젯을 생성합니다. 해당 위젯에서 사용자의 입력 텍스트를 받아 searchBooks 함수를 호출하고, 도서 정보를 받아와 표시하는 기능을 구현합니다.

import 'package:flutter/material.dart';
import 'package:flutter_typeahead/flutter_typeahead.dart';

class BookSearchWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TypeAheadField(
      textFieldConfiguration: TextFieldConfiguration(
        autofocus: false,
        decoration: InputDecoration(
          hintText: '도서명을 입력하세요',
        ),
      ),
      suggestionsCallback: (query) async {
        return await searchBooks(query);
      },
      itemBuilder: (context, suggestion) {
        return ListTile(
          title: Text(suggestion.title),
          subtitle: Text(suggestion.author),
        );
      },
      onSuggestionSelected: (suggestion) {
        // 선택한 도서를 처리하는 로직을 구현하세요
      },
    );
  }
}

위 코드에서 TextFieldConfiguration 부분은 텍스트 필드의 스타일과 힌트 텍스트를 설정합니다. suggestionsCallback에서는 사용자의 입력을 받아 searchBooks 함수를 호출하여 검색 결과를 반환합니다. itemBuilder에서는 각 검색 결과의 도서 제목과 저자를 표시합니다. 마지막으로 onSuggestionSelected는 사용자가 검색 결과 중 하나를 선택할 때 실행되는 콜백 함수를 정의합니다.

마무리

위와 같이 flutter_typeahead 패키지를 사용하여 도서 검색 기능을 구현할 수 있습니다. 여기서는 간단한 예제를 보여드렸지만, 실제로는 검색 결과에 대한 상세 정보를 표시하는 등 추가적인 기능을 구현할 수 있습니다. 자세한 내용은 flutter_typeahead GitHub 페이지를 참조해주세요.