From 686b6017352c9aa12cabb6573d081a17376e5242 Mon Sep 17 00:00:00 2001 From: Lucas Delanier Date: Sun, 16 Jul 2023 22:24:10 +0200 Subject: [PATCH] new page --- justMUSIC/lib/main.dart | 3 +- .../lib/screens/registration_screen.dart | 283 ++++++++++++++++++ 2 files changed, 285 insertions(+), 1 deletion(-) create mode 100644 justMUSIC/lib/screens/registration_screen.dart diff --git a/justMUSIC/lib/main.dart b/justMUSIC/lib/main.dart index 335e2c1..7516de1 100644 --- a/justMUSIC/lib/main.dart +++ b/justMUSIC/lib/main.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:justmusic/screens/login_screen.dart'; +import 'package:justmusic/screens/registration_screen.dart'; import 'package:justmusic/screens/welcome_screen.dart'; void main() { @@ -31,7 +32,7 @@ class MyApp extends StatelessWidget { // is not restarted. primarySwatch: Colors.blue, ), - home: const WellcomeScreen(), + home: const RegistrationScreen(), ); }, designSize: Size(390, 844), diff --git a/justMUSIC/lib/screens/registration_screen.dart b/justMUSIC/lib/screens/registration_screen.dart new file mode 100644 index 0000000..7a97e3b --- /dev/null +++ b/justMUSIC/lib/screens/registration_screen.dart @@ -0,0 +1,283 @@ +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'; + +class RegistrationScreen extends StatefulWidget { + const RegistrationScreen({Key? key}) : super(key: key); + + @override + State createState() => _RegistrationScreenState(); +} + +class _RegistrationScreenState extends State { + bool passenable = true; + + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: bgColor, + body: Padding( + padding: EdgeInsets.symmetric(horizontal: defaultPadding), + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + verticalDirection: VerticalDirection.up, + children: [ + SizedBox(height: 51), + SignInButton( + Buttons.Google, + text: "Login with Google", + onPressed: () {}, + ), + SizedBox(height: 47.h), + ConstrainedBox( + constraints: BoxConstraints(maxWidth: 600.w), + 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: 98.h), + SizedBox(width: 600.w, child: LoginButton()), + Padding( + padding: EdgeInsets.only(bottom: 25), + child: TextFormField( + obscureText: passenable, + validator: (value) { + if (value == null || value.isEmpty) { + return 'TODO'; + } + 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))), + contentPadding: + EdgeInsets.only(top: 0, bottom: 0, left: defaultPadding), + 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.only(bottom: 21), + child: TextFormField( + obscureText: passenable, + validator: (value) { + if (value == null || value.isEmpty) { + return 'TODO'; + } + 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))), + contentPadding: + EdgeInsets.only(top: 0, bottom: 0, left: defaultPadding), + 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: 21), + child: TextFormField( + validator: (value) { + if (value == null || value.isEmpty) { + return 'TODO'; + } + 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))), + contentPadding: EdgeInsets.only( + top: 0, bottom: 0, left: defaultPadding), + 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: 21), + child: TextFormField( + validator: (value) { + if (value == null || value.isEmpty) { + return 'TODO'; + } + 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))), + contentPadding: EdgeInsets.only( + top: 0, bottom: 0, left: defaultPadding), + 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: 'Pseudo', + hintStyle: + GoogleFonts.plusJakartaSans(color: strokeTextField)), + )), + Flexible( + flex: 3, + child: Padding( + padding: EdgeInsets.only(bottom: 63.h), + child: Column( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + Text( + "On a besoin de ça!", + style: GoogleFonts.plusJakartaSans( + color: Colors.white, + fontWeight: FontWeight.w600, + fontSize: 34.h), + ), + SizedBox( + height: 15.h, + ), + SizedBox( + width: 230.w, + child: Text( + "Promis c’est rapide.", + style: GoogleFonts.plusJakartaSans( + color: Colors.white, + fontWeight: FontWeight.w400, + fontSize: 17.h), + textAlign: TextAlign.center, + ), + ), + ], + ), + ), + ), + Padding( + padding: EdgeInsets.only(top: 45.h), + child: ClipRRect( + borderRadius: BorderRadius.circular(10.0), + child: LinearProgressIndicator( + minHeight: 2.5.h, + value: 0.5, + backgroundColor: grayColor, + color: primaryColor, + ), + ), + ), + ], + ), + ), + ); + } +}