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

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:sf_app_platform/payments/view/screens/account_created_screen.dart';

class SignupScreen extends StatefulWidget {
  const SignupScreen({super.key});

  @override
  _SignupScreenState createState() => _SignupScreenState();
}

class _SignupScreenState extends State<SignupScreen> {
  int currentStep = 0;
  bool passwordVisible=false;

  @override
  void initState(){
    super.initState();
    passwordVisible=true;
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(child: Container(
          padding: const EdgeInsets.all(20),
          child: SizedBox(
            child: Stepper(
              controlsBuilder: (BuildContext context, ControlsDetails controls) {
                return Row(
                  children: <Widget>[
                    OutlinedButton(
                      onPressed: controls.onStepCancel,
                      child: const Text('Atrás'),
                    ),
                    FilledButton(
                      onPressed: controls.onStepContinue,
                      child: const Text('Siguiente'),
                    ),
                  ],
                );
              },
              type: StepperType.horizontal,
              currentStep: currentStep,
              onStepCancel: () => currentStep == 0
                  ? null
                  : setState(() {
                currentStep -= 1;
              }),
              onStepContinue: () {
                bool isLastStep = (currentStep == getSteps().length - 1);
                if (isLastStep) {
                  Navigator.pushReplacement(context, MaterialPageRoute(
                    builder: (_) => AccountCreatedScreen(),
                  ));
                } else {
                  setState(() {
                    currentStep += 1;
                  });
                }
              },
              steps: getSteps(),
            )
          )),
      )),
    );
  }

  List<Step> getSteps() {
    return <Step>[
      Step(
        state: currentStep > 0 ? StepState.complete : StepState.indexed,
        isActive: currentStep >= 0,
        stepStyle: currentStep >= 0? StepStyle(connectorThickness: 0, color: Color(0xFF329e95), indexStyle: TextStyle(color: Colors.transparent)) : StepStyle(connectorThickness: 0, color: Colors.transparent, boxShadow: BoxShadow(spreadRadius: 5), indexStyle: TextStyle(color: Colors.transparent)),
        title: const Text(""),
        content: Column(
          spacing: 30,
          children: [
            Text("Datos personales"),
            Text("Identifícate"),
            Text("Nos aseguraremos de que la cuenta está a nombre del adulto responsable"),
            TextField(decoration: InputDecoration(labelText: "Nombre", hintText: "Nombre")),
            TextField(decoration: InputDecoration(labelText: "Apellidos", hintText: "Apellidos")),
            Row(
              children: [
                Expanded( child: TextField(
                  decoration: InputDecoration(label: Text("Fecha de nacimiento"), hintText: "DD"),
                  keyboardType: TextInputType.number,
                  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                )),
                Expanded( child: TextField(
                  decoration: InputDecoration(hintText: "MM"),
                  keyboardType: TextInputType.number,
                  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                )),
                Expanded( child: TextField(
                  decoration: InputDecoration(hintText: "AAAA"),
                  keyboardType: TextInputType.number,
                  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                )),
              ],
            ),
            DropdownMenu(
              width: double.infinity,
              label: Text("¿Qué familiar eres?"),
              dropdownMenuEntries: [
                DropdownMenuEntry(label: "Padre", value: "Padre"),
                DropdownMenuEntry(label: "Madre", value: "Madre"),
                DropdownMenuEntry(label: "Tutor", value: "Tutor"),
              ],
            ),
          ],
        ),
      ),
      Step(
        state: currentStep > 1 ? StepState.complete : StepState.indexed,
        isActive: currentStep >= 1,
        stepStyle: currentStep >= 1? StepStyle(connectorThickness: 0, color: Color(0xFF329e95), indexStyle: TextStyle(color: Colors.transparent)) : StepStyle(connectorThickness: 0, color: Colors.white, boxShadow: BoxShadow(spreadRadius: 1), indexStyle: TextStyle(color: Colors.transparent)),
        title: const Text(""),
        content: Column(
          spacing: 30,
          children: [
            Text("Domicilio"),
            Text("Tu dirección", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
            Text("Tu dirección nos ayuda a verificar y mantener la seguridad de tu cuenta"),
            TextField(decoration: InputDecoration(hintText: "Dirección completa")),
            TextField(decoration: InputDecoration(hintText: "Ciudad")),
            DropdownMenu(
              dropdownMenuEntries: List<DropdownMenuEntry>.generate(3, (int index) {
                return DropdownMenuEntry(value: "España", label: "España");
              }),
              hintText: "País",
              width: double.infinity,
            ),
            TextField(decoration: InputDecoration(hintText: "Nacionalidad"))
          ],
        ),
      ),
      Step(
        state: currentStep > 2 ? StepState.complete : StepState.indexed,
        isActive: currentStep >= 2,
        stepStyle: currentStep >= 2? StepStyle(connectorThickness: 0, color: Color(0xFF329e95), indexStyle: TextStyle(color: Colors.transparent)) : StepStyle(connectorThickness: 0, color: Colors.white, boxShadow: BoxShadow(spreadRadius: 1), indexStyle: TextStyle(color: Colors.transparent)),
        title: const Text(""),
        content: Column(
          spacing: 30,
          children: [
            Text("Usuario y contacto"),
            Text("Crea tu usuario", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
            Text("Con tu email y tu número podremos mantenerte siempre informado"),
            TextField(decoration: InputDecoration(labelText: "Correo electrónico", hintText: "Correo electrónico")),
            Row(children: [
              DropdownMenu(
                initialSelection: "es",
                dropdownMenuEntries: List<DropdownMenuEntry>.generate(3, (int index){
                  return DropdownMenuEntry(labelWidget: Icon(Icons.outlined_flag), label: "es", value: "es");
                })
              ),
              Expanded(child: TextField(
                  decoration: InputDecoration(labelText: "Teléfono móvil", hintText: "Teléfono"),
                  keyboardType: TextInputType.number)
              )
              ],
            ),
            TextField(
              obscureText: passwordVisible,
              enableSuggestions: false,
              autocorrect: false,
              decoration: InputDecoration(
                labelText: "Contraseña",
                hintText: "********",
                suffixIcon: IconButton(
                  icon: Icon(passwordVisible
                    ? Icons.visibility
                    : Icons.visibility_off),
                  onPressed: () {
                    setState(() {
                      passwordVisible = !passwordVisible;
                    });
                  },
                ),
              )
            ),
            TextField(obscureText: passwordVisible,
              enableSuggestions: false,
              autocorrect: false,
              decoration: InputDecoration(
                labelText: "Repetir contraseña",
                hintText: "*******",
                suffixIcon: IconButton(
                  icon: Icon(passwordVisible
                  ? Icons.visibility
                    : Icons.visibility_off),
                  onPressed: () {
                    setState(() {
                      passwordVisible = !passwordVisible;
                    });
                  },
                ),
              )
            ),
          ],
        ),
      ),
    ];
  }
}