[flutter] 플러터에서 훅(hook)을 사용해 리스트 필터링 기능 구현하기

14 Dec 2023

flutter

플러터(Flutter)는 강력한 UI 빌딩 툴킷으로, 다양한 기능을 제공합니다. 이 중에서도 최근에 도입된 훅(hook) 기능을 사용하면 상태 관리와 관련된 코드를 간결하게 작성할 수 있습니다. 이번 포스트에서는 플러터에서 훅을 사용하여 리스트 필터링 기능을 구현하는 방법에 대해 알아보겠습니다.

1. 필요한 라이브러리 추가하기

먼저, 리스트 필터링을 위해 hooks_riverpod 라이브러리를 설치해야 합니다.

dependencies:
  flutter:
    sdk: flutter
  hooks_riverpod: ^1.0.0

위와 같이 pubspec.yaml 파일에 hooks_riverpod 라이브러리를 추가해줍니다. 그리고 flutter pub get 명령어로 라이브러리를 다운로드 받습니다.

2. 리스트 필터링 기능 구현하기

이제 필터링을 적용할 리스트를 가지고 있는 플러터 위젯을 작성합니다. 여기서는 단순히 숫자 리스트를 예로 들어 설명하겠습니다.

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

final numberListProvider = StateProvider((ref) => List.generate(10, (index) => index + 1));

class FilteredListWidget extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final numberList = ref.watch(numberListProvider).state;
    final filteredList = useState<List<int>>(numberList);

    return Scaffold(
      appBar: AppBar(
        title: Text('Filtered List'),
      ),
      body: Column(
        children: [
          TextField(
            decoration: InputDecoration(labelText: 'Enter filter'),
            onChanged: (filter) {
              filteredList.value = filter.isEmpty
                  ? numberList
                  : numberList.where((element) => element.toString().contains(filter)).toList();
            },
          ),
          ListView.builder(
            shrinkWrap: true,
            itemCount: filteredList.value.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('${filteredList.value[index]}'),
              );
            },
          ),
        ],
      ),
    );
  }
}

위 코드에서는 hooks_riverpod 라이브러리의 useState를 사용하여 입력 필드를 통해 리스트를 필터링하는 기능을 구현하였습니다.

3. 결과 확인하기

해당 코드를 실행하면 앱 화면에 입력 필드가 나타나고, 해당 필드에 입력한 값에 따라 리스트가 동적으로 필터링되는 것을 확인할 수 있습니다.

훅을 사용하여 플러터에서 리스트 필터링 기능을 구현하는 것은 간단하면서도 효율적인 방법이며, 앱의 UX를 향상시킬 수 있는 중요한 요소입니다.

이상으로, 플러터에서 훅을 사용하여 리스트 필터링 기능을 구현하는 방법에 대해 알아보았습니다.

참고문헌:
Flutter Hooks
Riverpod

다음은 플러터에서 훅을 사용하여 리스트 필터링 기능을 구현하는 방법에 대해 알아보겠습니다.