[flutter] 플러터에서 훅(hook)을 활용하여 사용자가 입력한 검색어로 데이터 필터링하기

14 Dec 2023

flutter

이번에는 플러터(Flutter) 프레임워크에서 훅(hook)을 활용하여 사용자가 입력한 검색어로 데이터를 필터링하는 방법에 대해 알아보겠습니다.

필요한 라이브러리 설치

가장 먼저 아래의 훅(Hook) 라이브러리를 설치해줍니다.

dependencies:
  flutter_hooks: ^0.18.0

위와 같이 pubspec.yaml 파일에 의존성을 추가한 후, 아래 명령어를 실행하여 라이브러리를 설치합니다.

flutter pub get

검색 기능 구현

다음으로, 입력된 텍스트로 데이터를 필터링하는 검색 기능을 구현해보겠습니다.

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

class SearchScreen extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final searchController = useTextEditingController();
    final filteredData = useMemoized(() {
      return _data.where((item) =>
          item.toLowerCase().contains(searchController.text.toLowerCase()))
          .toList();
    }, [searchController.text]);

    return Scaffold(
      appBar: AppBar(
        title: Text('검색'),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              controller: searchController,
              decoration: InputDecoration(
                labelText: '검색어 입력',
              ),
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: filteredData.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(filteredData[index]),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

위 코드에서는 useTextEditingController를 사용하여 검색어 입력 필드의 컨트롤러를 설정하고, useMemoized를 활용하여 입력된 검색어에 따라 데이터를 필터링하고 있습니다.

마치며

이렇게 플러터의 훅을 활용하여 검색 기능을 구현하는 간단한 예제를 살펴보았습니다. 훅을 사용함으로써 코드의 가독성을 높이고 상태를 효율적으로 관리할 수 있습니다.

참고로, 위 예제에서는 _data 변수를 필터링할 데이터로 가정하고 사용하였습니다. 만약 실제 사용하는 데이터에 맞게 코드를 수정해야 합니다.

포스팅을 참고하시면 도움이 될 것입니다:

플러터 훅(Flutter Hook) 공식 문서: https://pub.dev/packages/flutter_hooks

기술적으로 설명된 내용들이 유용하길 바라며, 더 많은 기술적인 지식을 습득할 수 있는 기회가 되었으면 좋겠습니다.