[flutter] 플러터 프로바이더를 사용한 데이터 필터링 예시

14 Dec 2023

flutter

이 예시는 플러터 앱에서 프로바이더를 사용하여 데이터를 필터링하는 방법을 보여줍니다.

프로바이더 설정

먼저, provider 패키지를 사용하여 데이터 관리를 위한 프로바이더를 설정합니다.

dependencies:
  provider: ^6.3.1

데이터 모델 생성

다음으로, 필터링될 데이터 모델을 생성합니다. 예를 들어, 제품을 나타내는 Product 클래스를 만들어봅시다.

class Product {
  final String name;
  final bool isFeatured;

  Product({required this.name, required this.isFeatured});
}

데이터 필터링

이제, 프로바이더를 사용하여 데이터를 필터링하는 로직을 작성합니다.

class ProductProvider with ChangeNotifier {
  List<Product> _products = [
    Product(name: '휴대폰', isFeatured: true),
    Product(name: '노트북', isFeatured: false),
    Product(name: '태블릿', isFeatured: true),
  ];

  List<Product> get featuredProducts =>
      _products.where((product) => product.isFeatured).toList();
}

UI에서 사용

마지막으로, 필터링된 데이터를 UI에서 사용할 수 있도록 프로바이더를 사용합니다.

class ProductScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var products = Provider.of<ProductProvider>(context).featuredProducts;
    return ListView.builder(
      itemCount: products.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(products[index].name),
        );
      },
    );
  }
}

이제, ProductScreen 위젯은 ProductProvider를 사용하여 특징있는 제품들을 필터링하여 보여줄 것입니다.

이것은 간단한 예시지만, 프로바이더를 사용하여 데이터를 필터링하고 UI에 반영하는 방법을 보여주고 있습니다.

더 많은 자세한 내용은 플러터 공식 문서를 확인해보세요.