Payment Options Screen Layout

layout.dart

build(BuildContext context) {
  final operationTax = nf.format((widget.selectedPaymentOption.number *
          widget.selectedPaymentOption.value) -
      widget.paymentOptionsViewModel.invoiceValue);

  return Scaffold(
    appBar: AppBar(
      title: const Text('Pagamento da fatura'),
    ),
    body: Container(
      child: Padding(
        padding: const EdgeInsets.all(10.0),
        child: Column(
          children: [
            Align(
                alignment: Alignment.centerLeft,
                child: Text("Escolha o número de parcelas:",
                    style: TextStyle(
                        fontWeight: FontWeight.bold, fontSize: 16))),
            Expanded(
              child: ListView.builder(
                  itemCount:
                      widget.paymentOptionsViewModel.paymentOptions.length,
                  itemBuilder: (context, indice) {
                    final paymentOption =
                        widget.paymentOptionsViewModel.paymentOptions[indice];
                    return PaymentOptionTile(
                        paymentOption, widget.selectedPaymentOption, (value) {
                      setState(() {
                        widget.selectedPaymentOption = value;
                      });
                    });
                  }),
            ),
            Divider(),
            Card(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(top: 20.0),
                      child: Row(
                        children: [
                          Text(
                            "Fatura de junho",
                            style:
                                TextStyle(color: Colors.grey, fontSize: 16),
                          ),
                          Spacer(),
                          Text(
                            "${nf.format(widget.paymentOptionsViewModel.invoiceValue)}",
                            style:
                                TextStyle(color: Colors.grey, fontSize: 16),
                          ),
                        ],
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 20.0, bottom: 20.0),
                      child: Row(
                        children: [
                          Text(
                            "Taxa da operação",
                            style:
                                TextStyle(color: Colors.grey, fontSize: 16),
                          ),
                          Spacer(),
                          Text(
                            "$operationTax",
                            key: Key("tax"),
                            style:
                                TextStyle(color: Colors.grey, fontSize: 16),
                          ),
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ),
            Row(
              children: [
                OutlinedButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    child: Text("Voltar")),
                Spacer(),
                Text("1 de 3"),
                Spacer(),
                ElevatedButton(
                    onPressed: () {
                      debugPrint("Continuar...");
                    },
                    child: Text("Continuar"))
              ],
            )
          ],
        ),
      ),
    ),
  );
}