[flutter] 플러터 프로바이더를 사용하여 데이터 필터링하기

22 Dec 2023

flutter

플러터 앱에서 데이터를 필터링하는 것은 사용자에게 정확하고 필요한 정보를 제공하는 데 매우 중요합니다. 프로바이더 패키지를 사용하면 상태 관리를 효과적으로 수행할 수 있으며, 필요한 데이터를 필터링하여 UI에 반영할 수 있습니다.

아래는 프로바이더를 사용하여 데이터를 필터링하는 간단한 예제 코드입니다.

1. 프로바이더 설정

먼저, pubspec.yaml 파일에 provider 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^5.0.0

패키지를 설치하기 위해 터미널에서 flutter pub get 명령을 실행합니다.

2. 모델 및 프로바이더 생성

다음으로, 필터링할 데이터 모델 및 그 데이터를 제공하는 프로바이더 클래스를 생성합니다.

class Item {
  final int id;
  final String name;
  final bool isVisible;

  Item(this.id, this.name, this.isVisible);
}

class ItemFilter extends ChangeNotifier {
  bool _showOnlyVisible = false;

  List<Item> _items = [
    Item(1, 'Item 1', true),
    Item(2, 'Item 2', false),
    Item(3, 'Item 3', true),
  ];

  List<Item> get items => _showOnlyVisible
      ? _items.where((item) => item.isVisible).toList()
      : List<Item>.from(_items);
  
  void toggleVisibility() {
    _showOnlyVisible = !_showOnlyVisible;
    notifyListeners();
  }
}

3. 프로바이더 제공

위에서 작성한 ItemFilter 클래스를 사용하여 데이터를 제공하는 프로바이더를 생성합니다.

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

4. 필터링된 데이터 사용

마지막으로, 필터링된 데이터를 화면에 표시할 수 있습니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Filtered Data Example'),
        ),
        body: Consumer<ItemFilter>(
          builder: (context, filter, child) {
            return Column(
              children: [
                Switch(
                  value: filter.showOnlyVisible,
                  onChanged: (value) {
                    filter.toggleVisibility();
                  },
                ),
                ListView.builder(
                  shrinkWrap: true,
                  itemCount: filter.items.length,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text(filter.items[index].name),
                    );
                  },
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

위 코드에서는 ChangeNotifierProvider 및 Consumer 위젯을 사용하여 상태 관리를 처리하고, 필터링된 데이터를 UI에 표시합니다.

이제 프로바이더를 사용하여 데이터를 효과적으로 필터링하고 관리하는 방법에 대해 알게 되었습니다. 프로바이더를 사용하면 상태 관리를 단순화하고 응용 프로그램의 성능을 향상시킬 수 있습니다. 실험해보세요! 😊