sf-app-platform/lib/payments/view/screens/settings_screen.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../../domain/ports/theme_port.dart';

class SettingsScreen extends StatefulWidget{
  @override
  State<SettingsScreen> createState() => SettingsScreenState();

}

class SettingsScreenState extends State<SettingsScreen>{

  @override
  Widget build(BuildContext context) {
    ThemePort theme = context.read<ThemePort>();

    final name = "Juan";
    final balance = 50;
    final fullName = "Juan Pérez Cruz";
    final birthDate = "08/03/1976";
    final relation = "Padre";
    final address = "Calle Gran Vía 30 6º, 28013";
    final country = "España";
    final nationality = "Español";
    final email = "juanpcruz@gmail.com";
    final phone = "123456789";

    final content = [
      Center(child: Column(children: [
        Text("Ajustes de la cuenta", style: TextStyle(fontSize: 30, color: theme.getColorFor(ThemeCode.text_secondary))),
        Text("Saldo: $balance€", style: TextStyle(color: theme.getColorFor(ThemeCode.text_secondary))),
      ])),
      Container(
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(20)),
            color: theme.getColorFor(ThemeCode.background_primary)
        ),
        child: Column(children: [
          Row(
            spacing: 10,
            children: [
              Text(name, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
              Spacer(),
              TextButton(onPressed: ()=>{}, child: Text("Editar wallet")),
              Icon(Icons.attach_money),
            ],
          ),
          Text(relation)
        ]),
      ),
      Container(
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(20)),
            color: theme.getColorFor(ThemeCode.background_primary)
        ),
        child: Column(children: [
          Row(
            spacing: 10,
            children: [
              Text("Datos personales", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
              Spacer(),
              TextButton(onPressed: ()=>{}, child: Text("Editar"))
            ],
          ),
          Text.rich(TextSpan(text:"Nombre: ", style: TextStyle(fontWeight: FontWeight.bold),
              children: [TextSpan(text: fullName, style: TextStyle(fontWeight: FontWeight.normal))
              ])),
          Text.rich(TextSpan(text:"Fecha de nacimiento: ", style: TextStyle(fontWeight: FontWeight.bold),
              children: [TextSpan(text: birthDate, style: TextStyle(fontWeight: FontWeight.normal))
              ])),
          Text.rich(TextSpan(text:"Familiar: ", style: TextStyle(fontWeight: FontWeight.bold),
              children: [TextSpan(text: relation, style: TextStyle(fontWeight: FontWeight.normal))
              ]))
        ]),
      ),
      Container(
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(20)),
            color: theme.getColorFor(ThemeCode.background_primary)
        ),
        child: Column(children: [
          Row(
            spacing: 10,
            children: [
              Text("Dirección", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
              Spacer(),
              TextButton(onPressed: ()=>{}, child: Text("Editar"))
            ],
          ),
          Text.rich(TextSpan(text:"Dirección: ", style: TextStyle(fontWeight: FontWeight.bold),
              children: [TextSpan(text: address, style: TextStyle(fontWeight: FontWeight.normal))
              ])),
          Text.rich(TextSpan(text:"País: ", style: TextStyle(fontWeight: FontWeight.bold),
              children: [TextSpan(text: country, style: TextStyle(fontWeight: FontWeight.normal))
              ])),
          Text.rich(TextSpan(text:"Nacionalidad: ", style: TextStyle(fontWeight: FontWeight.bold),
              children: [TextSpan(text: nationality, style: TextStyle(fontWeight: FontWeight.normal))
              ]))
        ]),
      ),
      Container(
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(20)),
            color: theme.getColorFor(ThemeCode.background_primary)
        ),
        child: Column(children: [
          Row(
            spacing: 10,
            children: [
              Text("Usuario", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
              Spacer(),
              TextButton(onPressed: ()=>{}, child: Text("Editar"))
            ],
          ),
          Text.rich(TextSpan(text:"Correo: ", style: TextStyle(fontWeight: FontWeight.bold),
              children: [TextSpan(text: email, style: TextStyle(fontWeight: FontWeight.normal))
              ])),
          Text.rich(TextSpan(text:"Teléfono: ", style: TextStyle(fontWeight: FontWeight.bold),
              children: [TextSpan(text: phone, style: TextStyle(fontWeight: FontWeight.normal))
              ]))
        ]),
      ),

      Container(
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(20)),
            color: theme.getColorFor(ThemeCode.background_primary)
        ),
        child: Row(
          spacing: 10,
          children: [
            Text("Cambio de contraseña", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
            Spacer(),
            TextButton(onPressed: ()=>{}, child: Text("Editar"))
          ],
        ),
      ),
      Container(
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(20)),
          color: theme.getColorFor(ThemeCode.background_primary)
        ),
        child: Column(
          children: [
            Row(
              spacing: 10,
              children: [
                Text("Método de pago", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
                Spacer(),
                TextButton(onPressed: ()=>{}, child: Text("Editar"))
              ],
            ),
            Text("Puedes cambiar el método de pago en cualquier momento")
          ]
        )
      ),
      Container(
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(20)),
          color: theme.getColorFor(ThemeCode.background_tertiary)
        ),
        child: Column(
          children: [
            Row(
              spacing: 10,
              children: [
                Text("Plan anual", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
                Spacer(),
                TextButton(onPressed: ()=>{}, child: Text("Cambiar Plan"))
              ],
            ),
            Text("Sin permanencia"),
            Text("Llamadas y datos ilimitados"),
            Text("2 meses gratis"),
          ]
        )
      ),

      TextButton(onPressed: ()=>{}, child: Text("Contáctanos")),
      TextButton(onPressed: ()=>{}, child: Text("Preguntas frecuentes")),
    ];

    return Scaffold(
      backgroundColor: theme.getColorFor(ThemeCode.background_secondary),
      body: Stack(children: [
        DecoratedBox(
          decoration: BoxDecoration(
            borderRadius: const BorderRadius.all(Radius.circular(30)),
            color: Color(0xFF4B4B4B)
          ),
          child: SizedBox(width: double.infinity, height: 200),
        ),
        Column(children: [Expanded (child: Container(
          margin: EdgeInsets.all(20),
          child: ListView.separated(
            itemBuilder: (BuildContext context, int index) {return content[index];},
            separatorBuilder: (BuildContext context, int index) {
              return Divider(color: Colors.transparent, height: 20);
            },
            itemCount: content.length))),
          Container(
            padding: EdgeInsets.all(20),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20)),
              color: theme.getColorFor(ThemeCode.background_primary),
            ),
            child: Column(
              children: [
                FilledButton(onPressed: ()=>{}, child: Container(
                  width: double.infinity,
                  padding: EdgeInsets.all(20),
                  child: Center(child: Text("Guardar cambios"))
                )),
                TextButton(onPressed: ()=>Navigator.pop(context), child: Text("Cancelar"))
              ],
            ),
          ),
        ])
      ])
    );
  }
}