import 'dart:io'; 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/others/app_scaffold_widget.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; class PaymentMethod extends StatefulWidget { Function onSelectedMethod; PaymentMethod({this.onSelectedMethod}); @override _PaymentMethodState createState() => _PaymentMethodState(); } class _PaymentMethodState extends State { String selectedPaymentMethod = "MADA"; @override Widget build(BuildContext context) { return AppScaffold( appBarTitle: TranslationBase.of(context).paymentMethod, isShowAppBar: true, showNewAppBar: true, showNewAppBarTitle: true, backgroundColor: CustomColors.appBackgroudGrey2Color, body: Container( margin: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0), child: SingleChildScrollView( child: Container( child: Column( mainAxisSize: MainAxisSize.max, crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( margin: EdgeInsets.fromLTRB(4, 15.0, 4, 0.0), child: Text(TranslationBase.of(context).selectPaymentOption, style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold)), ), Container( width: double.infinity, child: InkWell( onTap: () { updateSelectedPaymentMethod("MADA"); }, 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: selectedPaymentMethod == "MADA" ? 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(selectedPaymentMethod == "MADA" ? CustomColors.accentColor : Colors.transparent, 100, Colors.grey, 0.5), ), mWidth(12), Container( height: 60.0, width: 60, padding: EdgeInsets.all(7.0), child: Image.asset("assets/images/new/payment/Mada.png"), ), mWidth(12), Text( "Mada", style: TextStyle( color: Colors.black, fontSize: 14, fontWeight: FontWeight.bold, ), ), mFlex(1), if (selectedPaymentMethod == "MADA") 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( width: double.infinity, child: InkWell( onTap: () { updateSelectedPaymentMethod("VISA"); }, 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: selectedPaymentMethod == "VISA" ? 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(selectedPaymentMethod == "VISA" ? CustomColors.accentColor : Colors.transparent, 100, Colors.grey, 0.5), ), mWidth(12), Container( height: 60.0, padding: EdgeInsets.all(7.0), width: 60, child: Image.asset("assets/images/new/payment/visa.png"), ), mWidth(12), Text( "VISA", style: TextStyle( color: Colors.black, fontSize: 14, fontWeight: FontWeight.bold, ), ), mFlex(1), if (selectedPaymentMethod == "VISA") 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( width: double.infinity, child: InkWell( onTap: () { updateSelectedPaymentMethod("MASTERCARD"); }, 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: selectedPaymentMethod == "MASTERCARD" ? 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(selectedPaymentMethod == "MASTERCARD" ? CustomColors.accentColor : Colors.transparent, 100, Colors.grey, 0.5), ), mWidth(12), Container( height: 60.0, padding: EdgeInsets.all(7.0), width: 60, child: Image.asset("assets/images/new/payment/Mastercard.png"), ), mWidth(12), Text( "MasterCard", style: TextStyle( color: Colors.black, fontSize: 14, fontWeight: FontWeight.bold, ), ), mFlex(1), if (selectedPaymentMethod == "MASTERCARD") 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( width: double.infinity, child: InkWell( onTap: () { updateSelectedPaymentMethod("Installment"); }, 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: selectedPaymentMethod == "Installment" ? 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(selectedPaymentMethod == "Installment" ? CustomColors.accentColor : Colors.transparent, 100, Colors.grey, 0.5), ), mWidth(12), Container( height: 60.0, padding: EdgeInsets.all(7.0), width: 60, child: Image.asset("assets/images/new/payment/installments.png"), ), mWidth(12), Text( "Installments", style: TextStyle( color: Colors.black, fontSize: 14, fontWeight: FontWeight.bold, ), ), mFlex(1), if (selectedPaymentMethod == "Installment") 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, ), ), ), ], ), ), ), ), ), Platform.isIOS ? Container( width: double.infinity, child: InkWell( onTap: () { updateSelectedPaymentMethod("ApplePay"); }, 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: selectedPaymentMethod == "ApplePay" ? 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(selectedPaymentMethod == "ApplePay" ? CustomColors.accentColor : Colors.transparent, 100, Colors.grey, 0.5), ), mWidth(12), Container( height: 60.0, padding: EdgeInsets.all(7.0), width: 60, child: Image.asset("assets/images/new/payment/Apple_Pay.png"), ), mWidth(12), Text( "Apple Pay", style: TextStyle( color: Colors.black, fontSize: 14, fontWeight: FontWeight.bold, ), ), mFlex(1), if (selectedPaymentMethod == "ApplePay") 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.only(top: 25.0), // child: Flex( // direction: Axis.horizontal, // children: [ // Expanded( // child: Container( // child: InkWell( // onTap: () { // updateSelectedPaymentMethod("ApplePay"); // }, // child: Card( // elevation: 3.0, // margin: EdgeInsets.fromLTRB(8.0, 16.0, 8.0, 8.0), // color: Colors.white, // shape: RoundedRectangleBorder( // borderRadius: BorderRadius.circular(10), // side: selectedPaymentMethod == "ApplePay" ? BorderSide(color: Colors.green, width: 5.0) : BorderSide(color: Colors.transparent, width: 0.0), // ), // child: Container( // height: 120.0, // padding: EdgeInsets.all(20.0), // child: SvgPicture.asset("assets/images/new-design/applepay.svg"), // ), // ), // ), // ), // ), // Expanded( // child: Container(), // ), // ], // ), // ) : Container(), SizedBox( height: 150.0, ), ], ), ), ), ), bottomSheet: Container( padding: EdgeInsets.all(16), color: Colors.white, child: Container( width: MediaQuery.of(context).size.width, height: 50.0, color: Colors.white, // margin: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 20.0), child: ButtonTheme( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10.0), ), minWidth: MediaQuery.of(context).size.height * 0.1, height: 45.0, child: RaisedButton( color: CustomColors.green, textColor: Colors.white, disabledTextColor: Colors.white, disabledColor: new Color(0xFFbcc2c4), elevation: 0, onPressed: () { widget.onSelectedMethod(selectedPaymentMethod); Navigator.pop(context, selectedPaymentMethod); }, child: Text(TranslationBase.of(context).confirm.toUpperCase(), style: TextStyle( fontSize: 14.0, fontWeight: FontWeight.w600, )), ), ), ), ), ); } updateSelectedPaymentMethod(String selectedMethod) { setState(() { selectedPaymentMethod = selectedMethod; }); } }