[flutter] 플러터 프로바이더를 사용하여 쇼핑몰 앱 만들기

26 Dec 2023

flutter

이번 포스트에서는 플러터(Flutter)의 상태 관리 라이브러리인 프로바이더(Provider)를 사용하여 간단한 쇼핑몰 앱을 만드는 방법에 대해 알아보겠습니다. 프로바이더는 플러터 앱의 상태 관리를 간편하게 해주는 매우 유용한 라이브러리입니다.

프로바이더란 무엇인가?

프로바이더는 플러터 앱에서 상태 관리를 위한 라이브러리로, 위젯 트리에 있는 모든 위젯에게 데이터를 제공하는데 사용됩니다. 이를 통해 상태 변화가 있을 때 해당 데이터를 사용하는 모든 위젯에 자동으로 업데이트되도록 할 수 있습니다.

쇼핑몰 앱 만들기

우리는 간단한 쇼핑몰 앱을 만들어 볼 것입니다. 이 앱은 상품 목록을 표시하고 각 상품을 장바구니에 추가하는 기능을 갖고 있습니다.

프로바이더 설정

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

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

그리고 터미널에서 flutter pub get 명령어를 사용하여 패키지를 다운로드 합니다.

모델 클래스 생성

다음으로, 상품을 나타내는 모델 클래스를 생성합니다.

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

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

상태 관리 클래스 생성

이제 프로바이더를 사용하여 상태를 관리하는 클래스를 만들어 보겠습니다.

import 'package:flutter/material.dart';

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

  List<Product> get products => _products;

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

프로바이더 제공하기

이제 main.dart 파일에서 프로바이더를 제공하고 앱 화면을 구성합니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('쇼핑몰 앱'),
        ),
        body: ProductList(),
      ),
    );
  }
}

소비자로 사용하기

이제 ProductList 위젯에서 프로바이더를 사용하여 장바구니에 상품을 추가하는 방법을 보여줍니다.

class ProductList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: products.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(products[index].name),
          subtitle: Text(products[index].description),
          trailing: IconButton(
            icon: Icon(Icons.add_shopping_cart),
            onPressed: () {
              Provider.of<Cart>(context, listen: false).addProduct(products[index]);
              // 장바구니에 상품 추가
            },
          ),
        );
      },
    );
  }
}

이제 당신은 프로바이더를 사용하여 쇼핑몰 앱을 만드는 방법을 알게 되었습니다. 이것은 플러터에서 상태 관리를 쉽게 해주는 강력한 도구입니다.

프로바이더에 대한 자세한 내용은 공식 문서를 참조하세요.