In App 결제 기능 구축(5)

일단 UI를 대충 짜보았다.

 

다른 앱의 UI를 벤치마킹 했다!

 

 

 

 

일단 오른쪽 위에 있는 Text는 Obx로 User정보 가져와서 바꿔준다

-> User정보는 stream으로 계속 바뀌도록 되어있다

 

아래에 있는 구매 버튼은 market에서 product를 가져온 후에 FutureBuilder로 실행시켜줄 예정이다.

 

Future loadingProductForSale() async {
  const Set<String> _kIds = <String>{'dia_1', 'dia_2'};
  final ProductDetailsResponse response = await InAppPurchase.instance.queryProductDetails(_kIds);
  logger.d('response : $response');
  List<ProductDetails> products = response.productDetails;
  for (var e in products) {
    logger.d(e.toDetailString());
  }
  if (response.notFoundIDs.isNotEmpty) {
    // Handle the error.
    logger.d('response.notFoundIDs.isNotEmpty ${response.notFoundIDs}');
  }
}

toString 을 보기 좋게 바꿔놓는다. 

extension ToolsWithDateTime on ProductDetails {
  String toDetailString() {
    return 'detail product -> id : $id,\ntitle :$title  \n description: $description, \n price:  $price,'
        '\n rawPrice: $rawPrice,  \n currencyCode: $currencyCode';
  }
}

 

그런 뒤에 loadingProductForSale()을 FutureBuilder에 넣어준다. 

 

body: FutureBuilder(
  future: loadingProductForSale(),
  builder: (BuildContext context, AsyncSnapshot<List<ProductDetails>> snapshot) {
    if (snapshot.data == null) {
      return Center(
        child: CircularProgressIndicator(),
      );
    }
    List<ProductDetails> productList = snapshot.data!;
    return ListView(