Flutter의 데이터 필터링(Data Filtering) 사용법

데이터 필터링(Data Filtering)은 애플리케이션에서 사용자가 필요로 하는 데이터를 선택적으로 보여주는 중요한 기능입니다. 예를 들어, 목록에서 특정 조건에 맞는 항목만 표시하거나, 검색 기능을 구현할 때 필터링을 통해 원하는 데이터를 추출할 수 있습니다. 이번 글에서는 Flutter에서 데이터를 필터링하는 다양한 방법을 단계별로 설명하겠습니다.

1. 데이터 필터링이란?

데이터 필터링은 주어진 데이터 목록에서 특정 조건에 맞는 항목만을 추려내는 작업입니다. 사용자는 데이터가 많을수록 원하는 정보를 빠르게 찾기 위해 데이터를 필터링할 필요가 있습니다. Flutter에서 데이터 필터링은 주로 컬렉션(List)에서 특정 조건을 만족하는 항목을 검색하거나 필터링하는 형태로 구현됩니다.

데이터 필터링은 다양한 방식으로 이루어질 수 있습니다:

• 리스트에서 필터링: 조건에 맞는 항목만 필터링하여 표시.
• 검색 기능 구현: 검색어를 기반으로 데이터를 필터링.
• 상태 기반 필터링: 상태나 값에 따라 데이터를 구분하여 필터링.

2. 간단한 데이터 필터링 구현

Flutter에서 데이터를 필터링하는 가장 기본적인 방법은 Dart의 컬렉션 메서드를 사용하는 것입니다. Dart의 where 메서드를 사용하면 조건에 맞는 항목만 선택적으로 필터링할 수 있습니다.

2.1 간단한 리스트 필터링 예제

아래는 간단한 문자열 리스트에서 'a'가 포함된 항목만 필터링하는 예제입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FilterExample(),
    );
  }
}

class FilterExample extends StatefulWidget {
  @override
  _FilterExampleState createState() => _FilterExampleState();
}

class _FilterExampleState extends State<FilterExample> {
  List<String> items = ["apple", "banana", "orange", "grape", "avocado"];
  List<String> filteredItems = [];

  @override
  void initState() {
    super.initState();
    // 'a'가 포함된 항목만 필터링
    filteredItems = items.where((item) => item.contains('a')).toList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Simple Filter Example')),
      body: ListView.builder(
        itemCount: filteredItems.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(filteredItems[index]),
          );
        },
      ),
    );
  }
}

• where 메서드: Dart에서 제공하는 메서드로, 조건을 만족하는 항목만 필터링하여 새로운 리스트로 반환합니다.
• contains: 문자열에서 특정 문자가 포함된 항목을 찾는 메서드입니다.

이 예제는 기본적으로 'a' 문자가 포함된 항목들만 필터링하여 리스트에 보여줍니다.

 

 

반응형

 

3. 검색 기능을 사용한 데이터 필터링

사용자가 입력한 검색어를 기반으로 데이터를 필터링하는 것은 매우 흔한 UI 기능 중 하나입니다. Flutter의 TextField와 상태 관리(State Management)를 사용하여 실시간 검색 필터링을 구현할 수 있습니다.

3.1 검색 필터링 구현 예제

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SearchFilterExample(),
    );
  }
}

class SearchFilterExample extends StatefulWidget {
  @override
  _SearchFilterExampleState createState() => _SearchFilterExampleState();
}

class _SearchFilterExampleState extends State<SearchFilterExample> {
  List<String> items = ["apple", "banana", "orange", "grape", "avocado"];
  List<String> filteredItems = [];
  TextEditingController _searchController = TextEditingController();

  @override
  void initState() {
    super.initState();
    filteredItems = items;
    _searchController.addListener(_filterItems);
  }

  void _filterItems() {
    setState(() {
      filteredItems = items
          .where((item) => item.toLowerCase().contains(_searchController.text.toLowerCase()))
          .toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Search Filter Example')),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              controller: _searchController,
              decoration: InputDecoration(
                labelText: 'Search',
                border: OutlineInputBorder(),
              ),
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: filteredItems.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(filteredItems[index]),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _searchController.dispose();
    super.dispose();
  }
}

• TextField: 사용자가 검색어를 입력할 수 있는 위젯입니다. 입력된 값을 바탕으로 리스트를 필터링합니다.
• addListener: TextEditingController를 통해 사용자의 입력을 실시간으로 감지하여 필터링된 리스트를 업데이트합니다.

이 예제는 검색어가 변경될 때마다 filteredItems 리스트를 업데이트하여, 입력된 검색어에 해당하는 항목만 필터링하여 표시합니다.

 

728x90

 

 

4. 상태 기반 필터링

Flutter에서 상태 관리 도구를 활용하면 상태를 기준으로 데이터를 필터링할 수 있습니다. 상태 기반 필터링은 예를 들어, 사용자가 특정 카테고리를 선택하거나, 조건에 맞는 데이터를 실시간으로 필터링하여 UI에 반영하는 데 유용합니다.

4.1 상태 관리와 필터링 예제

아래 예제에서는 Provider를 사용하여 필터 조건을 상태로 관리하고, 선택한 조건에 따라 리스트가 필터링됩니다.

먼저, provider 패키지를 설치해야 합니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

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

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => FilterModel(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FilterScreen(),
    );
  }
}

class FilterModel extends ChangeNotifier {
  List<String> items = ["apple", "banana", "orange", "grape", "avocado"];
  String _filter = 'All';

  List<String> get filteredItems {
    if (_filter == 'All') {
      return items;
    } else {
      return items.where((item) => item.startsWith(_filter.toLowerCase())).toList();
    }
  }

  void updateFilter(String filter) {
    _filter = filter;
    notifyListeners();
  }
}

class FilterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final filterModel = Provider.of<FilterModel>(context);

    return Scaffold(
      appBar: AppBar(title: Text('State-Based Filtering')),
      body: Column(
        children: [
          DropdownButton<String>(
            value: filterModel._filter,
            items: ['All', 'A', 'B', 'O', 'G'].map((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            onChanged: (value) {
              if (value != null) {
                filterModel.updateFilter(value);
              }
            },
          ),
          Expanded(
            child: ListView.builder(
              itemCount: filterModel.filteredItems.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(filterModel.filteredItems[index]),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

• ChangeNotifier: 필터 상태를 관리하는 모델로, 사용자가 선택한 필터 조건에 따라 리스트를 필터링합니다.
• DropdownButton: 사용자가 선택할 수 있는 필터 옵션을 제공하는 위젯입니다.
• notifyListeners: 필터가 변경될 때 UI가 자동으로 업데이트되도록 알림을 보내는 메서드입니다.

이 코드는 사용자가 드롭다운 메뉴에서 특정 필터를 선택하면, 해당 필터에 맞는 항목만 리스트에 표시됩니다.

5. 다중 조건 필터링

하나의 조건뿐만 아니라 여러 조건을 조합하여 데이터를 필터링할 수 있습니다. 예를 들어, 특정 카테고리와 함께 가격 범위나 사용자의 평점에 따라 데이터를 필터

링하는 경우를 살펴볼 수 있습니다.

5.1 다중 조건 필터링 예제

class Product {
  final String name;
  final String category;
  final double price;

  Product({required this.name, required this.category, required this.price});
}

List<Product> products = [
  Product(name: "Laptop", category: "Electronics", price: 1500),
  Product(name: "Phone", category: "Electronics", price: 800),
  Product(name: "Shoes", category: "Fashion", price: 100),
  Product(name: "Shirt", category: "Fashion", price: 40),
];

List<Product> filterProducts(String category, double minPrice, double maxPrice) {
  return products
      .where((product) =>
          product.category == category &&
          product.price >= minPrice &&
          product.price <= maxPrice)
      .toList();
}

위 예제는 상품 목록에서 카테고리와 가격 범위 조건에 맞는 상품만 필터링하는 방법을 보여줍니다.

결론

Flutter에서 데이터 필터링은 다양한 상황에서 사용할 수 있으며, 간단한 리스트 필터링부터 상태 관리와 결합된 복잡한 필터링까지 다양한 방법으로 구현할 수 있습니다. where 메서드를 사용한 기본적인 필터링 방법, 검색어를 기반으로 한 필터링, 그리고 상태 관리 도구를 사용한 상태 기반 필터링을 통해 데이터를 효과적으로 필터링할 수 있습니다. 이러한 방법들을 활용하여 Flutter 애플리케이션에서 사용자 경험을 개선해보세요.