[flutter] 플러터 훅 위젯을 활용한 데이터 필터링 방법

21 Dec 2023

flutter

플러터(Flutter) 앱에서 데이터를 필터링하고 표시하는 것은 매우 중요합니다. 이를 위해 훅(Provider) 위젯을 사용하여 간단하고 효과적인 방법으로 데이터 필터링을 구현할 수 있습니다.

이 블로그 포스트에서는 플러터의 훅 위젯을 활용하여 데이터 필터링을 하는 방법을 살펴보겠습니다.

1. 훅(Provider) 위젯의 기본 개념

플러터에서 훅(Provider) 위젯은 상태 관리를 위한 강력한 도구로, 앱 전반에 걸쳐 데이터를 공유하고 관리할 수 있습니다. 훅을 사용하면 데이터의 변경을 감지하여 화면을 업데이트할 수 있으며, 필요에 따라 데이터를 필터링할 수도 있습니다.

2. 데이터 필터링 구현하기

다음은 플러터에서 훅을 활용하여 데이터 필터링을 구현하는 간단한 예제 코드입니다.

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

final filterProvider = StateProvider<String>((ref) => '');

final items = [
  'Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'
];

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Data Filtering Example'),
        ),
        body: Center(
          child: Column(
            children: [
              TextField(
                onChanged: (value) {
                  context.read(filterProvider).state = value;
                },
              ),
              Consumer(builder: (context, watch, _) {
                final filter = watch(filterProvider).state;
                final filteredItems = items
                    .where((item) => item.toLowerCase().contains(filter.toLowerCase()))
                    .toList();

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

위의 코드는 hooks_riverpod 패키지를 사용하여 데이터 필터링을 구현한 예제입니다. filterProvider를 통해 필터 값을 관리하고, 필터에 따라 ListView에 표시할 항목을 동적으로 변경하도록 구성되어 있습니다.

결론

플러터의 훅(Provider) 위젯을 사용하면 데이터를 필터링하는 작업을 쉽게 처리할 수 있습니다. 이를 통해 사용자가 입력한 값에 따라 데이터를 동적으로 필터링하여 화면에 표시할 수 있으며, 데이터 관리 및 상태 업데이트도 간편하게 처리할 수 있습니다.

데이터 필터링에 관련된 더 많은 정보는 플러터 공식 문서에서 확인할 수 있습니다.