[flutter] 플러터 프로바이더를 사용하여 재고 관리 앱 만들기

26 Dec 2023

flutter

이 포스트에서는 Flutter 프레임워크에서 상태 관리를 위해 프로바이더(Provider)를 사용하여 재고 관리 앱을 만드는 방법에 대해 알아볼 것입니다.

프로바이더란?

플러터의 프로바이더(Provider)는 상태 관리를 위한 패키지로, 간단하고 효율적인 방법으로 상태를 관리할 수 있게 해줍니다. 이를 통해 앱의 상태를 전역으로 관리하고 상태 변화를 감지할 수 있습니다.

재고 관리 앱 디자인

이 앱은 간단한 재고 관리 앱으로, 제품의 이름, 가격 및 재고량을 관리할 수 있습니다. 사용자는 제품을 추가하고 삭제할 수 있으며, 재고 수량을 조정할 수 있습니다.

프로바이더를 사용한 Flutter 앱 개발

의존성 추가

먼저, pubspec.yaml 파일에 다음과 같이 프로바이더 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

프로바이더 패키지를 추가한 후 flutter pub get 명령어를 통해 의존성을 업데이트합니다.

모델 및 데이터 제공자 설정

제품 정보를 담는 모델 클래스를 만든 후, 프로바이더 패턴을 적용한 데이터 제공자를 만들어야 합니다. 이 데이터 제공자는 제품 목록 및 상태를 관리하고 이를 UI에 제공합니다.

class Product {
  final String name;
  final double price;
  int quantity;

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

class InventoryProvider extends ChangeNotifier {
  List<Product> _products = [];

  List<Product> get products => _products;

  void addProduct(Product product) {
    _products.add(product);
    notifyListeners();
  }

  // 재고 조정, 삭제 등 다양한 메서드 구현
}

UI 구현

UI를 구현할 때, Consumer 위젯을 사용하여 프로바이더의 데이터를 구독하고 UI를 업데이트합니다.

Consumer<InventoryProvider>(
  builder: (context, inventory, child) {
    return ListView.builder(
      itemCount: inventory.products.length,
      itemBuilder: (context, index) {
        final product = inventory.products[index];
        return ListTile(
          title: Text(product.name),
          subtitle: Text('가격: \$${product.price.toStringAsFixed(2)}, 재고: ${product.quantity}'),
          // 추가적인 UI 및 기능 구현
        );
      },
    );
  },
)

위와 같이 프로바이더를 사용하면 간단하게 상태를 관리하고 UI를 업데이트할 수 있습니다.

이렇게 프로바이더를 사용하여 간단한 재고 관리 앱을 만들어 보았습니다. 프로바이더는 플러터 앱의 상태 관리를 효과적으로 처리하는 방법 중 하나이며, 복잡한 상태 관리를 위한 다양한 기능을 제공합니다.

더 많은 기능을 추가하여 실제 사용할 수 있는 앱으로 발전시켜 보세요!

목차