앱에 실시간 검색 기능을 추가하려면 사용자가 텍스트를 입력하는 즉시 검색 결과를 업데이트하는 기능이 필요합니다. 이를 위해 Flutter에서는 TextField 위젯과 ListView를 사용하여 실시간 검색 기능을 구현할 수 있습니다.

1. TextField 및 ListView 추가

가장 먼저, 검색 기능을 추가할 화면에 TextField와 검색 결과를 표시할 ListView 위젯을 추가합니다.

TextField(
  onChanged: (text) {
    // 입력된 텍스트로 실시간 검색 기능 구현
    setState(() {
      // 검색 결과 업데이트
    });
  },
),
ListView.builder(
  itemCount: _searchResults.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(_searchResults[index]),
    );
  },
),

위 코드에서 _searchResults는 검색 결과를 담는 리스트입니다.

2. 실시간 검색 기능 추가

TextField의 onChanged 콜백을 사용하여 사용자가 텍스트를 입력할 때마다 실시간 검색 기능을 구현할 수 있습니다. 입력된 텍스트를 기준으로 검색 결과를 필터링하고, 해당 결과를 _searchResults 리스트에 업데이트합니다.

onChanged: (text) {
  setState(() {
    _searchResults = _dataList.where((item) => item.toLowerCase().contains(text.toLowerCase())).toList();
  });
},

위 코드에서 _dataList는 전체 데이터 목록을 담고 있는 리스트입니다.

이제 위의 단계를 따라 코드를 구현하고 실행하면, 사용자가 텍스트를 입력할 때마다 실시간으로 검색 결과가 업데이트되는 실시간 검색 기능이 완성됩니다.

참고: Flutter 공식 문서 - TextField, Flutter 공식 문서 - ListView