[flutter] 플러터(Flutter)로 검색 기능 구현하기

18 Dec 2023

flutter

플러터(Flutter)는 Google에서 개발한 오픈소스 프레임워크로, iOS와 안드로이드 모두에서 동작하는 애플리케이션을 빌드할 수 있습니다. 이번 글에서는 플러터를 사용하여 간단한 검색 기능을 구현하는 방법에 대해 알아보겠습니다.

1. 검색 필드 추가하기

먼저, 플러터 앱의 화면에 검색 필드를 추가해야 합니다. 다음과 같이 TextField 위젯을 사용하여 검색 필드를 생성할 수 있습니다.

TextField(
  controller: _searchController,
  decoration: InputDecoration(
    labelText: '검색',
    hintText: '검색어를 입력하세요',
    prefixIcon: Icon(Icons.search),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
)

위 코드에서 _searchController는 검색어를 관리하는데 사용할 컨트롤러입니다.

2. 검색어로 필터링하기

검색 필드에 입력된 검색어를 기반으로 리스트를 필터링하여 보여주어야 합니다. 다음은 검색 필드의 입력을 감지하고 리스트를 필터링하는 방법입니다.

ListView.builder(
  itemCount: _filteredItems.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(_filteredItems[index]),
    );
  },
)

void _onSearch(String keyword) {
  _filteredItems.clear();
  if (keyword.isEmpty) {
    _filteredItems.addAll(_allItems);
  } else {
    _allItems.forEach((item) {
      if (item.toLowerCase().contains(keyword.toLowerCase())) {
        _filteredItems.add(item);
      }
    });
  }
}

위 코드는 ListView.builder를 사용하여 리스트를 생성하고, _onSearch 함수를 통해 검색어에 따라 리스트를 필터링합니다.

3. 검색 이벤트 처리하기

마지막으로, 검색 필드의 입력 변화를 감지하고 검색을 실행하는 이벤트 처리를 구현해야 합니다. 다음은 검색 필드의 입력을 감지하고 _onSearch 함수를 호출하는 방법입니다.

TextField(
  controller: _searchController,
  onChanged: (value) {
    _onSearch(value);
  },
)

위 코드에서 onChanged 이벤트 핸들러를 사용하여 검색 필드의 입력 변화를 감지하고, _onSearch 함수를 호출하여 검색을 실행합니다.

위와 같이 플러터를 사용하여 간단한 검색 기능을 구현할 수 있습니다.

참고 자료:

플러터 공식 문서: https://flutter.dev

본 내용은 플러터(Flutter)를 사용하여 검색 기능을 구현하는 방법에 대해 안내하고 있으며, 플러터에 대한 기본적인 이해가 필요합니다.