[flutter] 플러터 Flutter_typeahead에서 검색 결과를 서버에서 가져오기

플러터(Flutter)의 인기있는 패키지인 flutter_typeahead를 사용하면 자동완성 기능을 쉽게 구현할 수 있습니다. 하지만 기본적으로 flutter_typeahead는 클라이언트 측에서 검색 결과를 제공합니다. 만약 서버에서 검색 결과를 가져오고 싶다면 어떻게 해야 할까요? 이 글에서는 flutter_typeahead를 사용하여 서버에서 검색 결과를 가져오는 방법을 알아보도록 하겠습니다.

1. 패키지 추가하기

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

dependencies:
  flutter:
    sdk: flutter
  flutter_typeahead: ^1.8.8

변경사항을 적용하기 위해 터미널에서 flutter packages get 명령어를 실행해주세요.

2. 서버에서 검색 결과 가져오기

flutter_typeahead를 사용하여 서버에서 검색 결과를 가져오기 위해서는 suggestionsCallback 인자를 사용해야 합니다. suggestionsCallback에는 검색어를 전달받아 서버에 요청을 보내고 검색 결과를 반환하는 콜백 함수를 작성해야 합니다.

예를 들어, 서버에 GET 요청을 보내고 응답으로 JSON 형식의 검색 결과를 받는다고 가정해봅시다. 다음은 suggestionsCallback에서 서버에 요청을 보내고 응답을 처리하는 예제 코드입니다.

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> _suggestions = [];

  Future<List<String>> getSuggestions(String query) async {
    final response = await http.get('https://example.com/api/suggestions?query=$query');

    if (response.statusCode == 200) {
      final List<dynamic> data = jsonDecode(response.body);
      final List<String> suggestions = data.map<String>((dynamic item) => item.toString()).toList();
      return suggestions;
    } else {
      throw Exception('Failed to fetch suggestions');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Typeahead Example'),
      ),
      body: TypeAheadField(
        textFieldConfiguration: TextFieldConfiguration(
          decoration: InputDecoration(
            hintText: 'Search',
          ),
        ),
        suggestionsCallback: (String pattern) async {
          return await getSuggestions(pattern);
        },
        itemBuilder: (BuildContext context, String suggestion) {
          return ListTile(
            title: Text(suggestion),
          );
        },
      ),
    );
  }
}

위 코드에서 getSuggestions 함수는 검색어를 전달받고 서버에 GET 요청을 보내고, 응답으로 받아온 JSON 데이터중 문자열을 추출하여 검색 결과로 반환합니다. 또한, suggestionsCallback에서 getSuggestions 함수를 호출하여 검색 결과를 가져옵니다.

3. 검색 결과 화면에 보여주기

flutter_typeahead는 검색 결과를 화면에 보여주는 itemBuilder 콜백 함수를 제공합니다. 이 함수에서는 검색 결과를 표시할 위젯을 반환해야 합니다. 예제 코드에서는 ListTile 위젯을 사용하여 각 검색 결과를 나타내고 있습니다.

4. 마무리

이제 flutter_typeahead를 사용하여 서버에서 검색 결과를 가져오는 방법을 알아보았습니다. 위 코드를 참고하여 애플리케이션에 맞게 적용해보세요. 서버와의 통신에는 http 패키지를 사용했지만, 실제로 사용할 때에는 원하는 통신 라이브러리를 사용하시면 됩니다.