Flutter 결제 위젯 릴리즈 모드 에러
아이폰 시뮬레이터와 실기기로 테스트할 때는 스크린샷의 에러가 발생하지 않는데, 배포를 위해 엑스코드에서 재빌드하니 위젯이 그려지지 않습니다.
45 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
renderAgreement를 통해 약관 렌더링 제대로 진행되었나요?
renderPaymentMethods도 코드상으로는 제대로 실행되고 있는거죠?
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
네 맞습니다.
플러터 내부에서 디버그모드로 실행했을 때는 모두 정상 작동됩니다.
릴리즈 모드로 실행만 하면 이렇게 되네요.
제가 플루터 개발경험이 깊지않아서, 확인해 보겠습니다.
샘플 그대로 실행하신걸까요?
제가 샘플 코드 기준으로 설명드리면.
GitHub
payment-widget-sample/flutter/lib/utils/config.dart at main · tossp...
토스페이먼츠 결제위젯 샘플 프로젝트입니다. . Contribute to tosspayments/payment-widget-sample development by creating an account on GitHub.
해당 파일에서 _live에 키 값이 제대로 지정되어 있는지 봐주셔야 할 것 같습니다.
저도 확인해본 바
샘플코드 그대로는 릴리즈모드에서 동작되는데, 위에 높이 1000정도의 컨테이너만 변경 했을 때에도 렌더링이 되지 않습니다.
아마 Flutter 내부에서 스크롤 위치에 따라 그때 그때 위젯을 렌더링하기 때문인 것으로 보입니다.
네 맞습니다. 필요한 영역만큼 늘였다 줄였다 하기때문에 해당 부분이 픽스되면 렌더에 문제가 있을 수는 있습니다.
해당 에러 외 render중 발생한 에러가 따로있으면 공유부탁드립니다.
늘었다 줄었다 하는 부분은 PaymentMethodWidget 과 AgreementWidget 뿐입니다.
이 위젯들의 높이를 픽스시킨 것이 아닙니다. 첫 렌더링 때 결제 위젯이 한 화면에 노출되지 않을 정도의 높이를 가진 위젯을 PaymentMethodWidget 과 AgreementWidget 의 상단에 추가했을 때 에러가 발생합니다.
@루크 안녕하세요
제가 보내드린 코드 캡쳐 화면을 예시로 컨테이너의 높이를 200정도로 하여서 다시 실행시키면 렌더링 잘됩니다.
네 안녕하세요
https://github.com/tosspayments/payment-widget-sample/tree/main/flutter
이거는 xcode에서 기기로 build하면 잘 되나요?
GitHub
payment-widget-sample/flutter at main · tosspayments/payment-widget...
토스페이먼츠 결제위젯 샘플 프로젝트입니다. . Contribute to tosspayments/payment-widget-sample development by creating an account on GitHub.
아마 1,000으로 하면 스크롤이 벗어나서 렌더링 되려해서 그럴것 같습니다.
네 샘플 프로젝트 그대로는 동작이되나,
PaymentMethodWidget 과 AgreementWidget 위에 첫 렌더링 때 결제 위젯이 한 화면에 노출되지 않을 정도의 높이를 가진 위젯을 PaymentMethodWidget 과 AgreementWidget 추가했을 때 에러가 발생합니다.
디버그모드에서는 스크롤을 내렸을 때 또 렌더링이
잘 됩니다.
렌더링할 때 사용한 clientKey 남겨주시겠어요
💡 정보 제출
민감 정보를 안전하게 제출해주세요
제출했습니다.
variantKey는 DEFAULT로 하셨죠?
넵
우선 크게 높이가 엄청난 위젯 같지는 않은데요
네 맞습니다.
스크롤을 내려야 보이는 상황일 때만 렌더링이 안됩니다.
렌더링 영역이 주문서 중간에 있어, 처음 화면이 이동했을 때는 focus가 안 갔을 때를 말씀하시는거죠?
네 맞습니다.
해당 현상 영상으로 한번 제출 부탁드립니다.
네
위 영상이 플러터 실행 환경에서 정상 작동하는 영상입니다.
그리고 이 영상이 코드 그대로 엑스코드에서 실행시켰을 때 영상입니다.
에러메세지는 이러합니다.
2개 차이는 전자가 height200이고 후자는 1000인거죠?
아니오 위에 보내드린 영상은 동일한 코드입니다.
샘플 코드로도 보여드릴까요?
전자 후자 차이는 실행환경 차이입니다.
플러터로 실기기 테스트 할 시 에는 정상 작동하는데,
앱스토어에 올리면 저렇게됩니다.
아 동일한 코드인데, appstore 배포 여부에 따라 발생한다는 말씀이시죠?
네 정확히는
배포를 위해 엑스코드에서 빌드했을 때 발생합니다.
디버그 모드와 릴리즈 모드 차이입니다.
앱스토어(테스트플라이트)에도 올려서 확인해봤는데 동일한 에러가 발생합니다.
말씀하신 디버그 / 릴리즈 모드라는게. 저희쪽 build variant에도 영향을 끼치나요?
variant key 말씀하시는 건가요?
그런 것 같지는 않은게, 샘플 코드는 height 가 200일떄 릴리즈 모드에서도 정상 작동합니다.
지금 에러 받는 건 height가 얼마인가요?
(처음 겪는 현상이고 정확한 원인 확인을 위해 계쏙 질문드려요)
네네 제가 했을 때는 1000 으로 했고 정확한 수치는 모릅니다.
스크롤을 내려야 결제 위젯이 보일 때 해당 현상 발생합니다.
샘플코드로 릴리즈모드에서 실험한 영상입니다.
렌더링 되는게 위에 200짜리 컨텐츠가 있을 때이고
렌더링이 안되는 게 위에 1000짜리 컨텐츠가 있을 때입니다.
에러코드 동일합니다.
네 확인 후 안내드리겠습니다.
빠른 확인을 위해 아래 내용만 확인 가능한 선에서 답변부탁드립니다.
- (샘플코드도) 1,000일 때 렌더안되는건 release mode에서만 발생하나요?
더불어 1,000으로 렌더링 하시는 이유가 있을까요?
어차피 containter는 가변이어서요
1. 샘플코드는 디버그 모드에서도 발생합니다.
2. 결제 위젯이 스크롤을 내렸을 때 안보이는 상황을 연출하기 위해서 1000으로 렌더링합니다. 오해가 있는 부분은 페이먼트 위젯의 높이를 1000으로 변경하는 게 아니라, 페이먼트 위젯 위에 1000짜리 높이의 컨테이너를 추가해서 실험한 겁니다. 제 실제 프로덕트의 상황이 샘플 코드에서도 동일하게 오류가 발생하는지 확인하려고 1000짜리 높이의 컨테이너를 추가해서 테스트했습니다.
확인해보고 안내드릴게요.
@루크 혹시 안드로이드도 확인해보셨을까요?
안드로이드는 안해보았습니다.
ListView를 쓰고 있는데, ListView는 기본적으로 lazy loading을 사용해서 문제가 생기고 있습니다. LazyList에 cacheExtent 속성을 적절히 지정해 주면 해결됩니다.