[flutter] 플러터를 활용한 앱 내부 검색 및 필터링 기능 구현

15 Dec 2023

flutter

안녕하세요! 이번에는 플러터(Flutter)로 앱 내부에서 검색하고 필터링하는 기능을 구현하는 방법에 대해 알아보겠습니다.

1. 검색 기능 구현하기

우선, 검색 기능을 구현하기 위해서는 TextField와 ListView를 이용하여 사용자가 입력한 키워드로 데이터를 필터링하는 기능을 추가할 수 있습니다.

TextField(
  onChanged: (value) {
    setState(() {
      _searchKeyword = value;
    });
  },
  decoration: InputDecoration(
    labelText: '검색',
    hintText: '검색어를 입력하세요',
    prefixIcon: Icon(Icons.search),
  ),
),
ListView.builder(
  itemCount: _filteredData.length,
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Text(_filteredData[index].title),
      // 나머지 항목 표시
    );
  },
),

2. 필터링 기능 추가하기

데이터 리스트를 필터링하여 원하는 조건에 맞는 항목만 표시할 수 있습니다. 이를 위해 ListView와 함께 List를 필터링하여 새로운 리스트에 저장한 후 화면에 표시합니다.

List<Data> _dataList = getDataList(); // 데이터 리스트 가져오기

List<Data> _filteredData = _dataList.where((data) {
  return data.title.toLowerCase().contains(_searchKeyword.toLowerCase());
}).toList();

이제, 사용자가 입력한 키워드에 부합하는 데이터만을 필터링하여 화면에 표시됩니다.

이렇게 플러터로 앱 내부에서 검색하고 필터링하는 기능을 구현할 수 있습니다. 플러터의 다양한 UI 위젯과 Dart 언어의 강력한 기능을 활용하여 사용자 친화적이고 효율적인 앱을 개발할 수 있습니다.

참고문헌:

Flutter Documentation: https://flutter.dev/docs
Dart Documentation: https://dart.dev/guides
Official Flutter GitHub Repository: https://github.com/flutter/flutter

이상으로 ‘플러터를 활용한 앱 내부 검색 및 필터링 기능 구현’에 대해 알아보았습니다. 감사합니다!