import 'dart:ui'; import 'package:auto_size_text/auto_size_text.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:flutter_signin_button/button_list.dart'; import 'package:flutter_signin_button/button_view.dart'; import 'package:google_fonts/google_fonts.dart'; import 'package:justmusic/values/constants.dart'; import '../components/login_button.dart'; import '../main.dart'; class RegistrationScreen extends StatefulWidget { const RegistrationScreen({Key? key}) : super(key: key); @override State createState() => _RegistrationScreenState(); } class _RegistrationScreenState extends State { bool passenable = true; final _formKey = GlobalKey(); final _userPseudoTextField = TextEditingController(); final _userMailTextField = TextEditingController(); final _passwordTextField = TextEditingController(); final _passwordConfirmTextField = TextEditingController(); handleRegister() async { if (_formKey.currentState!.validate()) { try { await MyApp.userViewModel.register(_userPseudoTextField.text, _passwordTextField.text, _userMailTextField.text); Navigator.pushNamed(context, '/explanation'); } catch (e) { ScaffoldMessenger.of(context).showSnackBar( SnackBar( content: Text( e.toString() ?? "", style: GoogleFonts.plusJakartaSans(color: Colors.white, fontWeight: FontWeight.w400, fontSize: 20.h), ), backgroundColor: Colors.red, ), ); } } } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: bgColor, body: Form( key: _formKey, child: Stack( children: [ SingleChildScrollView( child: SizedBox( width: double.infinity, child: Column( children: [ Padding( padding: EdgeInsets.only(top: 100.h), child: AutoSizeText( "On a besoin de ça!", style: GoogleFonts.plusJakartaSans(color: Colors.white, fontWeight: FontWeight.w600, fontSize: 30.w), maxLines: 1, maxFontSize: 50, overflow: TextOverflow.fade, ), ), ConstrainedBox( constraints: BoxConstraints(maxWidth: 600), child: Column( mainAxisAlignment: MainAxisAlignment.start, children: [ Padding( padding: EdgeInsets.symmetric(horizontal: defaultPadding), child: Padding( padding: EdgeInsets.only(bottom: 50.h), child: Column( mainAxisAlignment: MainAxisAlignment.end, children: [ SizedBox( height: 15.h, ), SizedBox( width: 230.h, child: AutoSizeText( "Promis c’est rapide.", style: GoogleFonts.plusJakartaSans( color: Colors.white, fontWeight: FontWeight.w400, fontSize: 17.w), maxFontSize: 20, textAlign: TextAlign.center, ), ), ], ), ), ), Padding( padding: EdgeInsets.only(bottom: 16.h, left: defaultPadding, right: defaultPadding), child: TextFormField( controller: _userPseudoTextField, keyboardAppearance: Brightness.dark, validator: (value) { if (value == null || value.isEmpty) { return 'entrez un pseudo valide'; } return null; }, cursorColor: primaryColor, keyboardType: TextInputType.emailAddress, style: GoogleFonts.plusJakartaSans(color: primaryColor, fontSize: 15), decoration: InputDecoration( focusedBorder: OutlineInputBorder( borderSide: BorderSide(width: 1.sp, color: strokeTextField), borderRadius: const BorderRadius.all(Radius.circular(10))), prefix: const Padding(padding: EdgeInsets.only(left: 20.0)), suffix: const Padding(padding: EdgeInsets.only(left: 20.0)), fillColor: bgTextField, filled: true, focusColor: const Color.fromRGBO(255, 255, 255, 0.30), enabledBorder: const OutlineInputBorder( borderSide: BorderSide(width: 1, color: strokeTextField), borderRadius: BorderRadius.all(Radius.circular(10))), hintText: 'Pseudo', hintStyle: GoogleFonts.plusJakartaSans(color: strokeTextField)), )), Padding( padding: EdgeInsets.only(bottom: 16.h, left: defaultPadding, right: defaultPadding), child: TextFormField( controller: _userMailTextField, keyboardAppearance: Brightness.dark, validator: (value) { if (value == null || value.isEmpty) { return 'entrez un email valide'; } return null; }, cursorColor: primaryColor, keyboardType: TextInputType.emailAddress, style: GoogleFonts.plusJakartaSans(color: primaryColor), decoration: InputDecoration( focusedBorder: OutlineInputBorder( borderSide: BorderSide(width: 1, color: strokeTextField), borderRadius: BorderRadius.all(Radius.circular(10))), prefix: const Padding(padding: EdgeInsets.only(left: 20.0)), suffix: const Padding(padding: EdgeInsets.only(left: 20.0)), fillColor: bgTextField, filled: true, focusColor: Color.fromRGBO(255, 255, 255, 0.30), enabledBorder: OutlineInputBorder( borderSide: BorderSide(width: 1, color: strokeTextField), borderRadius: BorderRadius.all(Radius.circular(10))), hintText: 'Email', hintStyle: GoogleFonts.plusJakartaSans(color: strokeTextField)), )), Padding( padding: EdgeInsets.only(bottom: 16.h, left: defaultPadding, right: defaultPadding), child: TextFormField( controller: _passwordTextField, keyboardAppearance: Brightness.dark, obscureText: passenable, validator: (value) { if (value == null || value.isEmpty) { return 'entrez un mot de passe valide'; } return null; }, cursorColor: primaryColor, style: GoogleFonts.plusJakartaSans(color: primaryColor), decoration: InputDecoration( focusedBorder: OutlineInputBorder( borderSide: BorderSide(width: 1, color: strokeTextField), borderRadius: BorderRadius.all(Radius.circular(10))), prefix: const Padding(padding: EdgeInsets.only(left: 20.0)), suffix: const Padding(padding: EdgeInsets.only(left: 20.0)), fillColor: bgTextField, filled: true, focusColor: Color.fromRGBO(255, 255, 255, 0.30), enabledBorder: OutlineInputBorder( borderSide: BorderSide(width: 1, color: strokeTextField), borderRadius: BorderRadius.all(Radius.circular(10))), hintText: 'Mot de passe', hintStyle: GoogleFonts.plusJakartaSans(color: strokeTextField), suffixIcon: Container( padding: EdgeInsets.only(right: 10), margin: EdgeInsets.all(5), height: 3, child: InkWell( onTap: () { setState(() { if (passenable) { passenable = false; } else { passenable = true; } }); }, // Image tapped splashColor: Colors.white10, // Splash color over image child: Image( image: passenable ? AssetImage("assets/images/show_icon.png") : AssetImage("assets/images/hide_icon.png"), height: 2, ), )), ), ), ), Padding( padding: EdgeInsets.only(bottom: 16.h, left: defaultPadding, right: defaultPadding), child: TextFormField( controller: _passwordConfirmTextField, keyboardAppearance: Brightness.dark, obscureText: passenable, validator: (value) { if (value == null || value.isEmpty) { return 'entrez un mot de passe valide'; } else if (_passwordTextField.text != value) { return 'les mots de passes ne sont pas identiques'; } return null; }, cursorColor: primaryColor, keyboardType: TextInputType.emailAddress, style: GoogleFonts.plusJakartaSans(color: primaryColor), decoration: InputDecoration( focusedBorder: OutlineInputBorder( borderSide: BorderSide(width: 1, color: strokeTextField), borderRadius: BorderRadius.all(Radius.circular(10))), prefix: const Padding(padding: EdgeInsets.only(left: 20.0)), suffix: const Padding(padding: EdgeInsets.only(left: 20.0)), fillColor: bgTextField, filled: true, focusColor: Color.fromRGBO(255, 255, 255, 0.30), enabledBorder: OutlineInputBorder( borderSide: BorderSide(width: 1, color: strokeTextField), borderRadius: BorderRadius.all(Radius.circular(10))), hintText: 'Confirmation du Mot de passe', hintStyle: GoogleFonts.plusJakartaSans(color: strokeTextField), suffixIcon: Container( padding: EdgeInsets.only(right: 10), margin: EdgeInsets.all(5), height: 3, child: InkWell( onTap: () { setState(() { if (passenable) { passenable = false; } else { passenable = true; } }); }, // Image tapped splashColor: Colors.white10, // Splash color over image child: Image( image: passenable ? AssetImage("assets/images/show_icon.png") : AssetImage("assets/images/hide_icon.png"), height: 2, ), )), ), ), ), Padding( padding: EdgeInsets.symmetric(horizontal: defaultPadding), child: SizedBox( width: 600, child: LoginButton( callback: handleRegister, )), ), Align( child: GestureDetector( behavior: HitTestBehavior.translucent, onTap: () { Navigator.pushNamed(context, '/login'); }, child: Padding( padding: EdgeInsets.only(top: 20), child: RichText( textAlign: TextAlign.center, text: TextSpan( text: 'Tu as déjà un compte?', style: GoogleFonts.plusJakartaSans( color: Colors.white, fontWeight: FontWeight.w400, fontSize: 15), children: [ TextSpan( text: " Connexion", style: GoogleFonts.plusJakartaSans( fontSize: 15, fontWeight: FontWeight.w400, color: primaryColor)), ], ), ), ), ), ), ], )), SizedBox(height: 50.h), ConstrainedBox( constraints: BoxConstraints(maxWidth: 600), child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Expanded( child: Container( color: Color(0xFF3D3D3D), height: 1, ), ), Padding( padding: const EdgeInsets.only(left: defaultPadding, right: defaultPadding), child: Text( 'Ou', style: GoogleFonts.plusJakartaSans(color: Colors.white, fontWeight: FontWeight.bold), ), ), Expanded( child: Container( height: 1, color: Color(0xFF3D3D3D), )), ], ), ), SizedBox(height: 47.h), ConstrainedBox( constraints: BoxConstraints(maxWidth: 540), child: SizedBox( width: 300.sp, height: 50, child: SignInButton( Buttons.Google, text: "Login with Google", onPressed: () {}, shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))), ), ), ), ], ), )), IgnorePointer( child: Container( height: 240.h, decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topRight, stops: [0, 1], colors: [bgColor.withOpacity(1), bgColor.withOpacity(0)])), ), ), Align( alignment: Alignment.topCenter, child: ConstrainedBox( constraints: BoxConstraints(maxWidth: 800), child: Padding( padding: EdgeInsets.only(top: 45.h, left: defaultPadding, right: defaultPadding), child: ClipRRect( borderRadius: BorderRadius.circular(10.0), child: LinearProgressIndicator( minHeight: 5, value: 0.5, backgroundColor: grayColor, color: primaryColor, ), ), ), ), ), ], ), ), ); } }