import 'dart:io'; import 'package:diplomaticquarterapp/core/viewModels/pharmacyModule/OrderPreviewViewModel.dart'; import 'package:diplomaticquarterapp/theme/colors.dart'; import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart'; import 'package:diplomaticquarterapp/uitl/utils_new.dart'; import 'package:diplomaticquarterapp/widgets/buttons/defaultButton.dart'; import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart'; import 'package:flutter/material.dart'; class PaymentMethodSelectPage extends StatefulWidget { @override _PaymentMethodSelectPageState createState() => _PaymentMethodSelectPageState(); } class _PaymentMethodSelectPageState extends State { PaymentOption selectedPaymentOption; @override Widget build(BuildContext context) { Size screenSize = MediaQuery.of(context).size; double cardWidth = screenSize.width / 2 - 32; return AppScaffold( appBarTitle: TranslationBase.of(context).paymentMethod, isShowAppBar: true, isPharmacy: true, isShowDecPage: false, body: Container( width: double.infinity, margin: EdgeInsets.symmetric(horizontal: 0, vertical: 16), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Center( child: Text( TranslationBase.of(context).selectPaymentOption, style: TextStyle( fontSize: 20, fontWeight: FontWeight.bold, color: Colors.black, ), ), ), Container( margin: EdgeInsets.symmetric(horizontal: 0, vertical: 16), child: Column( children: [ PaymentMethodCard( cardWidth, selectedPaymentOption, PaymentOption.meda, () => { setState(() { selectedPaymentOption = PaymentOption.meda; }) }), PaymentMethodCard( cardWidth, selectedPaymentOption, PaymentOption.visa, () => { setState(() { selectedPaymentOption = PaymentOption.visa; }) }), PaymentMethodCard( cardWidth, selectedPaymentOption, PaymentOption.mastercard, () => { setState(() { selectedPaymentOption = PaymentOption.mastercard; }) }), PaymentMethodCard( cardWidth, selectedPaymentOption, PaymentOption.installments, () => { setState(() { selectedPaymentOption = PaymentOption.installments; }) }), if (Platform.isIOS) PaymentMethodCard( cardWidth, selectedPaymentOption, PaymentOption.applepay, () => { setState(() { selectedPaymentOption = PaymentOption.applepay; }) }), ], ), ), ], ), ), bottomSheet: Container( color: Theme.of(context).scaffoldBackgroundColor, padding: EdgeInsets.symmetric(horizontal: 16, vertical: 20), child: DefaultButton( TranslationBase.of(context).next, selectedPaymentOption != null ? () => {Navigator.pop(context, selectedPaymentOption)} : null, color: Color(0xff5AB154), ), ), ); } } class PaymentMethodCard extends StatelessWidget { final double cardWidth; final PaymentOption selectedPaymentOption; final PaymentOption paymentOption; final Function selectMethod; PaymentMethodCard(this.cardWidth, this.selectedPaymentOption, this.paymentOption, this.selectMethod); @override Widget build(BuildContext context) { bool isSelected = false; if (selectedPaymentOption != null && selectedPaymentOption == paymentOption) { isSelected = true; } return Container( width: MediaQuery.of(context).size.width * 0.99, child: InkWell( onTap: selectMethod, child: Card( elevation: 0.0, margin: EdgeInsets.fromLTRB(8.0, 16.0, 8.0, 8.0), color: Colors.white, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10), side: isSelected ? BorderSide(color: Colors.green, width: 2.0) : BorderSide(color: Colors.transparent, width: 0.0), ), child: Padding( padding: const EdgeInsets.all(12.0), child: Row( children: [ Container( width: 24, height: 24, decoration: containerColorRadiusBorderWidth(isSelected ? CustomColors.accentColor : Colors.transparent, 100, Colors.grey, 0.5), ), mWidth(12), Container( height: 70.0, width: 70.0, child: Image.asset(getPaymentOptionImage(paymentOption)), ), mFlex(1), if (isSelected) Container( decoration: containerRadius(CustomColors.green, 200), padding: EdgeInsets.only(top: 6, bottom: 6, left: 12, right: 12), child: Text( TranslationBase.of(context).paymentSelected, style: TextStyle( color: Colors.white, fontSize: 11, ), ), ), ], ), ), ), // Container( // margin: EdgeInsets.symmetric(horizontal: 2, vertical: 0), // child: Stack( // children: [ // Container( // padding: EdgeInsets.symmetric(horizontal: 8, vertical: 8), // margin: EdgeInsets.symmetric(horizontal: 14, vertical: 8), // decoration: new BoxDecoration( // color: Colors.grey.shade100, // shape: BoxShape.rectangle, // borderRadius: BorderRadius.circular(8), // border: Border.fromBorderSide(BorderSide( // color: isSelected ? Color(0xff20BC11) : Colors.grey.shade300, // width: 0.8, // )), // ), // width: cardWidth, // child: Image.asset( // getPaymentOptionImage(paymentOption), // fit: BoxFit.cover, // ), // ), // if (isSelected) // Positioned( // right: 1, // child: Icon( // Icons.check_circle, // color: Color(0xff20BC11), // size: 30, // ), // ), // ], // ), // ), ), ); } String getPaymentOptionImage(PaymentOption paymentOption) { String assetFile = "assets/images/new/payment/"; switch (paymentOption.index) { case 0: return "${assetFile}Mada.png"; break; case 1: return "${assetFile}sadad.png"; break; case 2: return "${assetFile}visa.png"; break; case 3: return "${assetFile}Mastercard.png"; break; case 4: return "${assetFile}installments.png"; break; case 5: return "${assetFile}Apple_Pay.png"; break; default: return ""; } } }