Confirmation Screen

confirmation.dart

Widget build(BuildContext context) {
  final vm = context.select(
    (ConfirmationViewModel model) => model,
  );

  final txtFee = nf.format(vm.selectedPaymentOption!.total - vm.invoiceValue);

  final txtTotal = nf.format(vm.selectedPaymentOption!.total);

  final txtYouPay =
      '${vm.selectedPaymentOption!.number} x ${nf.format(vm.selectedPaymentOption!.value)}';

  final txtInvoiceValue = nf.format(vm.invoiceValue);

  return Scaffold(
    appBar: AppBar(
      title: const Text('Pagamento da fatura'),
    ),
    body: Padding(
      padding: const EdgeInsets.all(12.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text("Revise os valores",
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
          Card(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Row(
                      children: [
                        Text("Fatura de junho",
                            style:
                                TextStyle(color: Colors.grey, fontSize: 16)),
                        Spacer(),
                        Text(txtInvoiceValue,
                            style:
                                TextStyle(color: Colors.grey, fontSize: 16))
                      ],
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Row(
                      children: [
                        Text("Taxa de operação",
                            style:
                                TextStyle(color: Colors.grey, fontSize: 16)),
                        Spacer(),
                        Text(txtFee,
                            style:
                                TextStyle(color: Colors.grey, fontSize: 16))
                      ],
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Row(
                      children: [
                        Text("Total", style: TextStyle(fontSize: 16)),
                        Spacer(),
                        Text(txtTotal, style: TextStyle(fontSize: 16))
                      ],
                    ),
                  ),
                  Divider(),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Row(
                      children: [
                        Text("Você vai pagar",
                            style: TextStyle(
                                fontWeight: FontWeight.bold, fontSize: 16)),
                        Spacer(),
                        Text(txtYouPay,
                            style: TextStyle(
                                fontWeight: FontWeight.bold, fontSize: 20))
                      ],
                    ),
                  )
                ],
              ),
            ),
          ),
          Card(
            child: Padding(
              padding: const EdgeInsets.all(12.0),
              child: Text(
                  "Este pagamento é referente somente ao mês de junho. Não vamos salvar os dados do seu cartão para pagamentos recorrentes.",
                  style: TextStyle(color: Colors.grey, fontSize: 16)),
            ),
          ),
          Spacer(),
          Row(
            children: [
              OutlinedButton(
                  onPressed: () {
                    Navigator.pop(context);
                  },
                  child: Text("Voltar")),
              Spacer(),
              Text("3 de 3"),
              Spacer(),
              ElevatedButton(
                  onPressed: () {
                    showProcessingDialog(context, vm.userCreditCard!.cvv);
                  },
                  child: Text("Pagar Fatura"))
            ],
          )
        ],
      ),
    ),
  );
}