[flutter] 플러터 프로바이더를 사용하여 음료 주문 앱 만들기

26 Dec 2023

flutter

플러터(Flutter)는 Google에서 개발한 모바일 어플리케이션 개발 프레임워크이며, 프로바이더(Provider)는 상태 관리를 위한 패키지 중 하나입니다.

이번 블로그 포스트에서는 플러터 프로바이더를 사용하여 음료 주문 앱을 만들어보겠습니다.

1. 필요한 패키지 설치

플러터 프로바이더를 사용하기 위해서는 provider 패키지를 설치해야 합니다.

flutter pub add provider

2. 모델 클래스 만들기

주문할 음료의 정보를 담을 모델 클래스를 만들어줍니다.

class Drink {
  final String name;
  final String imageUrl;
  final double price;

  Drink({required this.name, required this.imageUrl, required this.price});
}

3. 프로바이더 사용하기

주문할 음료 목록과 장바구니에 담긴 음료 목록을 상태로 관리하기 위해 프로바이더를 사용합니다.

class DrinkProvider with ChangeNotifier {
  List<Drink> _drinks = [
    Drink(name: '아메리카노', imageUrl: 'assets/americano.jpg', price: 3000),
    Drink(name: '카페라떼', imageUrl: 'assets/cafelatte.jpg', price: 3500),
    // 음료 정보 추가
  ];
  List<Drink> _cart = [];

  List<Drink> get drinks => _drinks;
  List<Drink> get cart => _cart;

  // 장바구니에 음료 추가하는 메서드
  void addToCart(Drink drink) {
    _cart.add(drink);
    notifyListeners();
  }
}

4. UI 구현

주문할 음료 목록과 장바구니에 담긴 음료 목록을 화면에 표시하는 UI를 구현합니다.

class DrinkMenuScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var drinks = Provider.of<DrinkProvider>(context).drinks;

    return ListView.builder(
      itemCount: drinks.length,
      itemBuilder: (context, index) {
        return ListTile(
          leading: Image.asset(drinks[index].imageUrl),
          title: Text(drinks[index].name),
          subtitle: Text('가격: ${drinks[index].price}원'),
          trailing: IconButton(
            icon: Icon(Icons.add),
            onPressed: () {
              Provider.of<DrinkProvider>(context, listen: false).addToCart(drinks[index]);
            },
          ),
        );
      },
    );
  }
}

class CartScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var cart = Provider.of<DrinkProvider>(context).cart;

    return ListView.builder(
      itemCount: cart.length,
      itemBuilder: (context, index) {
        return ListTile(
          leading: Image.asset(cart[index].imageUrl),
          title: Text(cart[index].name),
          subtitle: Text('가격: ${cart[index].price}원'),
        );
      },
    );
  }
}

5. 결론

플러터 프로바이더를 이용하여 음료 주문 앱을 만들어봤습니다. 프로바이더를 사용하면 상태를 효율적으로 관리할 수 있으며, 코드의 가독성과 유지보수성을 높일 수 있습니다.

이상으로, 프로바이더를 사용하여 음료 주문 앱을 만드는 방법에 대해 알아보았습니다.

참고 자료:

목차

1. 필요한 패키지 설치

2. 모델 클래스 만들기

3. 프로바이더 사용하기

4. UI 구현

5. 결론