passo_mobile_app/unit2/lib/screens/unit2/login/register.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:flutter_svg/svg.dart';
import 'package:fluttericon/font_awesome5_icons.dart';
import 'package:fluttericon/font_awesome_icons.dart';
import 'package:form_builder_validators/form_builder_validators.dart';
import 'package:go_router/go_router.dart';
import 'package:unit2/theme-data.dart/btn-style.dart';
import 'package:unit2/widgets/wave.dart';

import '../../../theme-data.dart/colors.dart';
import '../../../theme-data.dart/form-style.dart';
import '../../../utils/global.dart';
import '../../../utils/text_container.dart';
import '../../../utils/validators.dart';

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

  @override
  State<Register> createState() => _RegisterState();
}

class _RegisterState extends State<Register> {
  bool showSuffixIcon = false;
  bool _showPassword = true;
  final _formKey = GlobalKey<FormBuilderState>();
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        resizeToAvoidBottomInset: true,
        appBar: AppBar(
          backgroundColor: primary,
          elevation: 0,
          automaticallyImplyLeading: true,
          title: const Text("Register password"),
          centerTitle: true,
        ),
        body: SingleChildScrollView(
          child: Stack(
            children: [
              Wave(height: blockSizeVertical * 8),
              Positioned(
                  bottom: 0, child: WaveReverse(height: blockSizeVertical * 8)),
              Container(
                height: screenHeight * .90,
                padding: const EdgeInsets.symmetric(horizontal: 15),
                child: FormBuilder(
                  key: _formKey,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      SvgPicture.asset(
                        'assets/svgs/logo.svg',
                        height: blockSizeVertical * 16,
                        allowDrawingOutsideViewBox: true,
                        color: primary,
                      ),
                      Text(unitApp,
                          style: TextStyle(
                              fontSize: blockSizeVertical * 8,
                              fontWeight: FontWeight.w800,
                              letterSpacing: .2,
                              height: 1,
                              color: Colors.black87)),
                      Text(
                        registerToContinue,
                        style: TextStyle(
                            fontSize: blockSizeVertical * 2,
                            height: 1.5,
                            fontWeight: FontWeight.w600),
                      ),
                      const SizedBox(
                        height: 15,
                      ),
                      // Password
                      FormBuilderTextField(
                        name: 'password',
                        validator: registerPasswordValidator,
                        // initialValue: state.password,
                        onChanged: (value) {
                          value!.isEmpty
                              ? setState(() {
                                  showSuffixIcon = false;
                                })
                              : setState(() {
                                  showSuffixIcon = true;
                                });
                        },
                        autofocus: false,
                        style: const TextStyle(
                            fontWeight: FontWeight.bold, color: Colors.black87),
                        decoration: loginTextFieldStyle().copyWith(
                            suffixIcon: Visibility(
                              visible: showSuffixIcon,
                              child: _showPassword
                                  ? IconButton(
                                      icon: Icon(FontAwesome5.eye_slash,
                                          size: 24,
                                          color: Theme.of(context)
                                              .textTheme
                                              .displayLarge
                                              ?.color),
                                      onPressed: () {
                                        setState(() {
                                          _showPassword = false;
                                        });
                                      },
                                    )
                                  : IconButton(
                                      onPressed: () {
                                        setState(() {
                                          _showPassword = true;
                                        });
                                      },
                                      icon: Icon(FontAwesome5.eye,
                                          size: 24,
                                          color: Theme.of(context)
                                              .textTheme
                                              .displayLarge
                                              ?.color)),
                            ),
                            prefixIcon: const Icon(Icons.lock),
                            labelText: "Password",
                            hintText: enterPassword),
                        obscureText: _showPassword ? true : false,
                      ),
                      const SizedBox(
                        height: 15,
                      ),
                      FormBuilderTextField(
                        name: 'confirmPassword',
                        validator: registerPasswordValidator,
                        // initialValue: state.password,
                        onChanged: (value) {
                          value!.isEmpty
                              ? setState(() {
                                  showSuffixIcon = false;
                                })
                              : setState(() {
                                  showSuffixIcon = true;
                                });
                        },
                        autofocus: false,
                        style: const TextStyle(
                            fontWeight: FontWeight.bold, color: Colors.black87),
                        decoration: loginTextFieldStyle().copyWith(
                            suffixIcon: Visibility(
                              visible: showSuffixIcon,
                              child: _showPassword
                                  ? IconButton(
                                      icon: Icon(FontAwesome5.eye_slash,
                                          size: 24,
                                          color: Theme.of(context)
                                              .textTheme
                                              .displayLarge
                                              ?.color),
                                      onPressed: () {
                                        setState(() {
                                          _showPassword = false;
                                        });
                                      },
                                    )
                                  : IconButton(
                                      onPressed: () {
                                        setState(() {
                                          _showPassword = true;
                                        });
                                      },
                                      icon: Icon(FontAwesome5.eye,
                                          size: 24,
                                          color: Theme.of(context)
                                              .textTheme
                                              .displayLarge
                                              ?.color)),
                            ),
                            prefixIcon: const Icon(Icons.lock),
                            labelText: confirmPassword,
                            hintText: enterConfirmPassword),
                        obscureText: _showPassword ? true : false,
                      ),
                      const SizedBox(
                        height: 15,
                      ),
                      SizedBox(
                        width: double.infinity,
                        height: blockSizeVertical * 6,
                        child: ElevatedButton(
                            style: secondaryBtnStyle(
                                second, Colors.transparent, primary),
                            onPressed: () {
                              if (_formKey.currentState!.saveAndValidate()) {
                                context.goNamed('home');
                              }
                            },
                            child: const Text(register)),
                      )
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}