import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart'; import 'package:diplomaticquarterapp/widgets/in_app_browser/InAppBrowser.dart'; import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart'; import 'package:flutter/material.dart'; import 'package:flutter_inappwebview/flutter_inappwebview.dart'; class PaymentMethod extends StatefulWidget { @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, body: Container( margin: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0), child: SingleChildScrollView( child: Container( child: Column( mainAxisSize: MainAxisSize.max, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( margin: EdgeInsets.fromLTRB(0.0, 15.0, 0.0, 0.0), alignment: Alignment.center, child: Text("Select Payment Method", style: TextStyle( fontSize: 26.0, fontWeight: FontWeight.bold)), ), Container( margin: EdgeInsets.only(top: 25.0), child: Flex( direction: Axis.horizontal, children: [ Expanded( child: Container( child: InkWell( onTap: () { updateSelectedPaymentMethod("mada"); }, 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 == "mada" ? BorderSide( color: Colors.green, width: 5.0) : BorderSide( color: Colors.transparent, width: 0.0), ), child: Container( height: 120.0, padding: EdgeInsets.all(7.0), width: MediaQuery.of(context).size.width * 0.45, child: Image.asset( "assets/images/new-design/mada.png"), ), ), ), ), ), Expanded( child: Container( child: InkWell( onTap: () { updateSelectedPaymentMethod("sadad"); }, 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 == "sadad" ? BorderSide( color: Colors.green, width: 5.0) : BorderSide( color: Colors.transparent, width: 0.0), ), child: Container( height: 120.0, padding: EdgeInsets.all(7.0), width: MediaQuery.of(context).size.width * 0.45, child: Image.asset( "assets/images/new-design/sadad.png"), ), ), ), ), ), ], ), ), Container( margin: EdgeInsets.only(top: 25.0), child: Flex( direction: Axis.horizontal, children: [ Expanded( child: Container( child: InkWell( onTap: () { updateSelectedPaymentMethod("visa"); }, 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 == "visa" ? BorderSide( color: Colors.green, width: 5.0) : BorderSide( color: Colors.transparent, width: 0.0), ), child: Container( height: 120.0, padding: EdgeInsets.all(7.0), width: MediaQuery.of(context).size.width * 0.45, child: Image.asset( "assets/images/new-design/visa.png"), ), ), ), ), ), Expanded( child: Container( child: InkWell( onTap: () { updateSelectedPaymentMethod("mastercard"); }, 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 == "mastercard" ? BorderSide( color: Colors.green, width: 5.0) : BorderSide( color: Colors.transparent, width: 0.0), ), child: Container( height: 120.0, padding: EdgeInsets.all(7.0), width: MediaQuery.of(context).size.width * 0.45, child: Image.asset( "assets/images/new-design/mastercard.png"), ), ), ), ), ), ], ), ), Container( margin: EdgeInsets.only(top: 25.0), child: Flex( direction: Axis.horizontal, children: [ Expanded( child: Container( child: InkWell( onTap: () { updateSelectedPaymentMethod("installment"); }, 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 == "installment" ? BorderSide( color: Colors.green, width: 5.0) : BorderSide( color: Colors.transparent, width: 0.0), ), child: Container( height: 120.0, padding: EdgeInsets.all(7.0), width: MediaQuery.of(context).size.width * 0.45, child: Image.asset( "assets/images/new-design/installment.png"), ), ), ), ), ), ], ), ), ], ), ), ), ), bottomSheet: Container( width: MediaQuery.of(context).size.width, height: 50.0, 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.width * 0.7, height: 45.0, child: RaisedButton( color: new Color(0xFF60686b), textColor: Colors.white, disabledTextColor: Colors.white, disabledColor: new Color(0xFFbcc2c4), onPressed: () { // navigateToBookSuccess(context); // insertAppointment(context, widget.doctor); openPayment(); }, child: Text(TranslationBase.of(context).confirm, style: TextStyle(fontSize: 18.0)), ), ), ), ); } openPayment() { MyInAppBrowser browser = new MyInAppBrowser(onExitCallback: onBrowserExit); browser.openUrl(url: "data:text/html;base64,PGh0bWw+IDxoZWFkPjwvaGVhZD48Ym9keT48Zm9ybSBpZD0icGF5bWVudEZvcm0iIGFjdGlvbj0iaHR0cHM6Ly9obWd3ZWJzZXJ2aWNlcy5jb20vUGF5Rm9ydFdlYkxpdmUvcGFnZXMvU2VuZFBheUZvcnRSZXF1ZXN0LmFzcHgiIG1ldGhvZD0icG9zdCI+PGlucHV0IHR5cGU9ImhpZGRlbiIgbmFtZT0iQW1vdW50IiB2YWx1ZT0iMTIyIj48aW5wdXQgdHlwZT0iaGlkZGVuIiBuYW1lPSJQcm9qSUQiIHZhbHVlPSIxMiI+PGlucHV0IHR5cGU9ImhpZGRlbiIgbmFtZT0iT3JkZXJfRGVzYyIgdmFsdWU9IkFkdmFuY2UgUGF5bWVudCI+PGlucHV0IHR5cGU9ImhpZGRlbiIgbmFtZT0iT3JkZXJJRCIgdmFsdWU9IjEyLTEyMzE3NTUtMTU5NjY0MDY0MSI+PGlucHV0IHR5cGU9ImhpZGRlbiIgbmFtZT0iUGF5bWVudE9wdGlvbiIgdmFsdWU9Ik1BREEiPjxpbnB1dCB0eXBlPSJoaWRkZW4iIG5hbWU9IkVtYWlsIiB2YWx1ZT0iVGFtZXIuZmFuYXNoZWhAZ21haWwuY29tIj48aW5wdXQgdHlwZT0iaGlkZGVuIiBuYW1lPSJTZXJ2SUQiIHZhbHVlPSIzIiAgPjxpbnB1dCB0eXBlPSJoaWRkZW4iIG5hbWU9IkNoYW5uZWxJRCIgdmFsdWU9IjIiICA+PGlucHV0IHR5cGU9ImhpZGRlbiIgbmFtZT0iTGFuZyIgdmFsdWU9IkVOIiAgPjxpbnB1dCB0eXBlPSJoaWRkZW4iIG5hbWU9IlJldHVyblVSTCIgdmFsdWU9IiIgID48aW5wdXQgdHlwZT0iaGlkZGVuIiBuYW1lPSJDdXN0TmFtZSIgdmFsdWU9IlRBKioqKiIgPjxpbnB1dCB0eXBlPSJoaWRkZW4iIG5hbWU9IlBhdGllbnRPdXRTQSIgdmFsdWU9ImZhbHNlIiA+PGlucHV0IHR5cGU9ImhpZGRlbiIgbmFtZT0iUGF0aWVudFR5cGVJRCIgdmFsdWU9IjEiID48aW5wdXQgdHlwZT0iaGlkZGVuIiBuYW1lPSJEZXZpY2VUb2tlbiIgdmFsdWU9InVuZGVmaW5lZCx1bmRlZmluZWQiID48aW5wdXQgdHlwZT0iaGlkZGVuIiBuYW1lPSJMb25naXR1ZGUiIHZhbHVlPSJ1bmRlZmluZWQiID48aW5wdXQgdHlwZT0iaGlkZGVuIiBuYW1lPSJMYXRpdHVkZSIgdmFsdWU9InVuZGVmaW5lZCIgPjxpbnB1dCB0eXBlPSJoaWRkZW4iIG5hbWU9IkxpdmVfU2VydmljZUlEIiB2YWx1ZT0idW5kZWZpbmVkIiA+PGlucHV0IHR5cGU9ImhpZGRlbiIgbmFtZT0iQ3VzdElEIiB2YWx1ZT0iMTIzMTc1NSIgID48aW5wdXQgdHlwZT0iaGlkZGVuIiBuYW1lPSJSZXNwb25zZUNvbnRpbnVlVVJMIiB2YWx1ZT0iaHR0cDovL2htZy5jb20vRG9jdW1lbnRzL3N1Y2Nlc3MuaHRtbCIgPjxpbnB1dCB0eXBlPSJoaWRkZW4iIG5hbWU9IkJhY2tDbGlja1VybCIgdmFsdWU9Imh0dHA6Ly9obWcuY29tL0RvY3VtZW50cy9zdWNjZXNzLmh0bWwiID48L2Zvcm0+PHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPiBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgicGF5bWVudEZvcm0iKS5zdWJtaXQoKTsgPC9zY3JpcHQ+PC9ib2R5PjwvaHRtbD4="); } onBrowserExit() { print("onBrowserExit Called!!!!"); } updateSelectedPaymentMethod(String selectedMethod) { setState(() { selectedPaymentMethod = selectedMethod; }); } }