[flutter] 플러터 Flutter_typeahead에서 검색어 추천 목록에 캐싱 기능 추가하기

소개

flutter_typeahead는 Flutter에서 사용할 수 있는 검색어 추천 기능을 제공하는 패키지입니다. 이 패키지는 사용자가 입력한 텍스트를 기반으로 검색어를 추천하며, 실시간으로 업데이트되는 기능을 가지고 있습니다. 그러나, 매번 검색어를 추천할 때마다 API 호출을 하게 되면 비효율적일 수 있습니다. 따라서 이번 포스트에서는 검색어 추천 목록에 캐싱 기능을 추가하여 API 호출을 최소화하는 방법을 알아보겠습니다.

캐싱 기능 추가

캐싱 기능을 추가하기 위해서는 flutter_typeahead 패키지의 TypeAheadController를 사용해야 합니다. 이 컨트롤러를 사용하면 검색어 추천 목록을 비동기로 불러올 수 있습니다. 즉, 한 번 추천 목록을 불러온 후에는 다음에 같은 검색어를 입력할 때까지 API 호출을 하지 않고 캐시된 데이터를 사용하게 됩니다.

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

class MyTypeAheadWidget extends StatefulWidget {
  @override
  _MyTypeAheadWidgetState createState() => _MyTypeAheadWidgetState();
}

class _MyTypeAheadWidgetState extends State<MyTypeAheadWidget> {
  final TextEditingController _controller = TextEditingController();
  final TypeAheadController<String> _typeAheadController = TypeAheadController();
  List<String> _suggestions = [];

  Future<List<String>> _getSuggestions(String query) async {
    // API 호출로 검색어 추천 목록을 가져오는 비동기 함수
    return await YourApi.getSuggestions(query);
  }

  @override
  Widget build(BuildContext context) {
    return TypeAheadField(
      textFieldConfiguration: TextFieldConfiguration(
        controller: _controller,
      ),
      suggestionsCallback: (query) async {
        if (_suggestions.isEmpty) {
          // 검색어 추천 목록을 캐싱하지 않았을 때에만 비동기로 불러옴
          _suggestions = await _getSuggestions(query);
        }
        return _suggestions;
      },
      itemBuilder: (context, suggestion) {
        return ListTile(
          title: Text(suggestion),
        );
      },
      onSuggestionSelected: (suggestion) {
        _controller.text = suggestion;
      },
      onSaved: (value) {
        print(value);
      },
      transitionBuilder: (context, suggestionsBox, controller) {
        return suggestionsBox;
      },
      onSearchCancelled: () {
        setState(() {
          _suggestions = [];
        });
      },
      animationStart: 0.2,
      debounceDuration: Duration(milliseconds: 200),
      controller: _typeAheadController,
    );
  }
}

위의 코드에서 _suggestions라는 변수는 검색어 추천 목록을 저장하는 역할을 합니다. 비동기 함수 _getSuggestions에서는 API 호출을 통해 검색어 추천 목록을 가져오게 됩니다. suggestionsCallback에서는 먼저 _suggestions 변수가 비어있을 때에만 비동기로 suggestions를 가져옵니다. 그렇지 않으면 캐시된 데이터를 사용합니다.

또한, _typeAheadController를 사용하여 TypeAheadField를 컨트롤할 수 있습니다. _typeAheadController.clear()를 호출하면 검색어 입력창을 초기화할 수 있습니다. 검색어를 선택한 후에는 _typeAheadController.text로 선택한 검색어를 가져올 수 있습니다.

결론

이번 포스트에서는 flutter_typeahead 패키지를 사용해 검색어 추천 기능을 구현하는 방법에 대해 알아보았습니다. 또한, 검색어 추천 목록을 캐싱하여 API 호출을 최소화하는 방법을 살펴보았습니다. 이를 통해 사용자 경험을 개선하고 애플리케이션의 성능을 향상시킬 수 있습니다.