강의

멘토링

커뮤니티

인프런 커뮤니티 질문&답변

unipics님의 프로필 이미지
unipics

작성한 질문수

Flutter 앱 개발 실전

Provider 실습

37.provider 실습 문제점, 카트에서 상품이 지워지지 않습니다.

해결된 질문

작성

·

14

1

37.provider 실습 시, 코드는 동일하게 잘 작성된것 같은데, 카트에 담기기는 잘 되는데, 카트에서 상품 클릭 시 remove가 안되는 문제가 있습니다.

class Cart extends StatelessWidget {
  const Cart({super.key});

  @override
  Widget build(BuildContext context) {
    List<Product> cartProductList = context.select<ProviderCart, List<Product>>(
      (providerCart) => providerCart.cartProductList,
    );

    return Scaffold(
      body: cartProductList.isEmpty
          /// Empty
          ? const Center(
              child: Text(
                "Empty",
                style: TextStyle(fontSize: 24, color: Colors.grey),
              ),
            )
          /// Not Empty
          : ListView.builder(
              itemCount: cartProductList.length,
              itemBuilder: (context, index) {
                Product product = cartProductList[index];
                return ProductTile(
                  product: product,
                  isInCart: true,
                  onPressed: context.read<ProviderCart>().onProductPressed,
                );
              },
            ),
    );
  }
}

답변 2

1

DevStory님의 프로필 이미지
DevStory
지식공유자

안녕하세요.

원인을 파악하려면 provider_cart.dart 파일 내용이 필요할 것 같습니다.

해당 파일의 최종적인 형태는 다음과 같아야 작동합니다.

import 'package:apple_store/common/product.dart';
import 'package:flutter/material.dart';

class ProviderCart with ChangeNotifier {
  /// 카트에 담긴 상품 목록
  List<Product> cartProductList = [];

  /// 상품 클릭
  void onProductPressed(Product product) {
    if (cartProductList.contains(product)) {
      // cartProductList.remove(product);
      cartProductList = cartProductList.where((cartProduct) {
        return cartProduct != product;
      }).toList();
    } else {
      // cartProductList.add(product);
      cartProductList = [...cartProductList, product];
    }
    notifyListeners();
  }
}

위에 주석으로 된 것 처럼 removeadd로 구현된 경우에는 context.select로 호출시 화면 갱신이 안되실 수 있으며, 그 이유는 37. Provider 실습 강의 9:50초에서 설명을 들으실 수 있습니다.

확인해 보시고도 작동하지 않으신다면 오픈카카오톡으로 문의 주세요.

감사합니다 🙂

unipics님의 프로필 이미지
unipics
질문자

cartProductList =
으로 리스트를 받았어야 하네요, 이게 빠졌어요. 해결했습니다, 감사합니다.

---------------------------------------
안녕하세요?

코드는 동일합니다. 한번 봐주시겠어요?

import 'package:apple_store/common/product.dart';
import 'package:flutter/material.dart';

class ProviderCart with ChangeNotifier {
  /// 카트에 담긴 상품 목록
  List<Product> cartProductList = [];

  /// 상품 클릭
  void onProductPressed(Product product) {
    if (cartProductList.contains(product)) {
      //cartProductList.remove(product);
      cartProductList.where((cartProduct) {
        return cartProduct != product;
      }).toList();
    } else {
      //cartProductList.add(product);
      cartProductList = [...cartProductList, product];
    }
    notifyListeners();
  }
}

0

안녕하세요, 인프런 AI 인턴입니다. unipics님.

카트에서 상품이 삭제되지 않는 문제는 onPressed 콜백을 정의할 때 일반적으로 발생할 수 있는 문제입니다. ProviderCart에서 상품을 삭제하는 메서드가 제대로 구현되었는지 확인해보세요. 아래에 몇 가지 점검해야 할 부분을 안내드리겠습니다.

  1. ProviderCart 클래스 내 메서드 정의: ProviderCart 클래스에서 상품을 삭제하기 위한 onProductPressed 메서드를 정확하게 구현했는지 확인하세요. 이 메서드는 Product 객체가 전달받았을 때 해당 제품을 cartProductList에서 제거해야 합니다.
class ProviderCart with ChangeNotifier {
  List<Product> cartProductList = [];
  
  // 상품 추가 메서드
  void addProduct(Product product) {
    cartProductList.add(product);
    notifyListeners();
  }

  // 상품 삭제 메서드
  void onProductPressed(Product product) {
    cartProductList.remove(product);
    notifyListeners();
  }
}
  1. context.read<ProviderCart>().onProductPressed 사용: 코드에서 onPressed에 전달되는 콜백이 실제로 ProviderCartonProductPressed 메서드를 호출하는지, 그리고 올바른 Product 객체가 전달되는지 확인하세요.

  2. Product 클래스의 == 오버라이드: remove 메서드가 제대로 작동하려면, Product 클래스에서 == 연산자를 올바르게 오버라이드하고 hashCode를 구현하는 것이 필요할 수 있습니다. 이를 통해 동일한 제품을 식별할 수 있습니다.

class Product {
  final int id;
  final String name;

  Product(this.id, this.name);

  @override
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is Product &&
          runtimeType == other.runtimeType &&
          id == other.id &&
          name == other.name;

  @override
  int get hashCode => id.hashCode ^ name.hashCode;
}

이 외에 코드 로직이나 문법에서의 작은 실수를 점검해 보시는 것도 좋습니다.

관련된 유사한 질문의 답변 URL은 다음과 같습니다:
- Provider로 구현된 카트의 상품 추가/삭제 문제 해결하기

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

unipics님의 프로필 이미지
unipics

작성한 질문수

질문하기