registration page finish

pull/14/head
Lucas Delanier 2 years ago
parent 686b601735
commit ffd9015dfe

@ -9,6 +9,13 @@
</list> </list>
</value> </value>
</entry> </entry>
<entry key="auto_size_text">
<value>
<list>
<option value="$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/auto_size_text-3.0.0/lib" />
</list>
</value>
</entry>
<entry key="boolean_selector"> <entry key="boolean_selector">
<value> <value>
<list> <list>
@ -328,6 +335,7 @@
</properties> </properties>
<CLASSES> <CLASSES>
<root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/async-2.9.0/lib" /> <root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/async-2.9.0/lib" />
<root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/auto_size_text-3.0.0/lib" />
<root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/boolean_selector-2.1.0/lib" /> <root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/boolean_selector-2.1.0/lib" />
<root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/characters-1.2.1/lib" /> <root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/characters-1.2.1/lib" />
<root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/clock-1.1.1/lib" /> <root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/clock-1.1.1/lib" />

@ -1,9 +1,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.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/registration_screen.dart';
import 'package:justmusic/screens/welcome_screen.dart';
void main() { void main() {
runApp(const MyApp()); runApp(const MyApp());
@ -16,6 +14,7 @@ class MyApp extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky); SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
Paint.enableDithering = true;
return ScreenUtilInit( return ScreenUtilInit(
builder: (context, child) { builder: (context, child) {
return MaterialApp( return MaterialApp(

@ -1,3 +1,6 @@
import 'dart:ui';
import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart';
@ -22,51 +25,137 @@ class _RegistrationScreenState extends State<RegistrationScreen> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
backgroundColor: bgColor, backgroundColor: bgColor,
body: Padding( body: Stack(
padding: EdgeInsets.symmetric(horizontal: defaultPadding), children: [
SingleChildScrollView(
child: SizedBox(
width: double.infinity,
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
verticalDirection: VerticalDirection.up,
children: [ children: [
SizedBox(height: 51), Padding(
SignInButton( padding: EdgeInsets.only(top: 100.h),
Buttons.Google, child: AutoSizeText(
text: "Login with Google", "On a besoin de ça!",
onPressed: () {}, style: GoogleFonts.plusJakartaSans(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 30.w),
maxLines: 1,
maxFontSize: 50,
overflow: TextOverflow.fade,
),
), ),
SizedBox(height: 47.h),
ConstrainedBox( ConstrainedBox(
constraints: BoxConstraints(maxWidth: 600.w), constraints: BoxConstraints(maxWidth: 600),
child: Row( child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisAlignment: MainAxisAlignment.start,
children: [ children: [
Expanded(
child: Container(
color: Color(0xFF3D3D3D),
height: 1,
),
),
Padding( Padding(
padding: const EdgeInsets.only( padding:
left: defaultPadding, right: defaultPadding), EdgeInsets.symmetric(horizontal: defaultPadding),
child: Text( child: Padding(
'Ou', padding: EdgeInsets.only(bottom: 50.h),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
SizedBox(
height: 15.h,
),
SizedBox(
width: 230.h,
child: AutoSizeText(
"Promis cest rapide.",
style: GoogleFonts.plusJakartaSans( style: GoogleFonts.plusJakartaSans(
color: Colors.white, fontWeight: FontWeight.bold), color: Colors.white,
fontWeight: FontWeight.w400,
fontSize: 17.w),
maxFontSize: 20,
textAlign: TextAlign.center,
), ),
), ),
Expanded(
child: Container(
height: 1,
color: Color(0xFF3D3D3D),
)),
], ],
), ),
), ),
SizedBox(height: 98.h), ),
SizedBox(width: 600.w, child: LoginButton()),
Padding( Padding(
padding: EdgeInsets.only(bottom: 25), padding: EdgeInsets.only(
bottom: 16.h,
left: defaultPadding,
right: defaultPadding),
child: TextFormField(
validator: (value) {
if (value == null || value.isEmpty) {
return 'TODO';
}
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))),
contentPadding: const EdgeInsets.only(
top: 0, bottom: 0, left: defaultPadding),
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(
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: 16.h,
left: defaultPadding,
right: defaultPadding),
child: TextFormField( child: TextFormField(
obscureText: passenable, obscureText: passenable,
validator: (value) { validator: (value) {
@ -77,22 +166,27 @@ class _RegistrationScreenState extends State<RegistrationScreen> {
}, },
cursorColor: primaryColor, cursorColor: primaryColor,
keyboardType: TextInputType.emailAddress, keyboardType: TextInputType.emailAddress,
style: GoogleFonts.plusJakartaSans(color: primaryColor), style: GoogleFonts.plusJakartaSans(
color: primaryColor),
decoration: InputDecoration( decoration: InputDecoration(
focusedBorder: OutlineInputBorder( focusedBorder: OutlineInputBorder(
borderSide: BorderSide(width: 1, color: strokeTextField), borderSide: BorderSide(
borderRadius: BorderRadius.all(Radius.circular(10))), width: 1, color: strokeTextField),
contentPadding: borderRadius:
EdgeInsets.only(top: 0, bottom: 0, left: defaultPadding), BorderRadius.all(Radius.circular(10))),
contentPadding: EdgeInsets.only(
top: 0, bottom: 0, left: defaultPadding),
fillColor: bgTextField, fillColor: bgTextField,
filled: true, filled: true,
focusColor: Color.fromRGBO(255, 255, 255, 0.30), focusColor: Color.fromRGBO(255, 255, 255, 0.30),
enabledBorder: OutlineInputBorder( enabledBorder: OutlineInputBorder(
borderSide: BorderSide(width: 1, color: strokeTextField), borderSide: BorderSide(
borderRadius: BorderRadius.all(Radius.circular(10))), width: 1, color: strokeTextField),
hintText: 'Confirmation du Mot de passe', borderRadius:
hintStyle: BorderRadius.all(Radius.circular(10))),
GoogleFonts.plusJakartaSans(color: strokeTextField), hintText: 'Mot de passe',
hintStyle: GoogleFonts.plusJakartaSans(
color: strokeTextField),
suffixIcon: Container( suffixIcon: Container(
padding: EdgeInsets.only(right: 10), padding: EdgeInsets.only(right: 10),
margin: EdgeInsets.all(5), margin: EdgeInsets.all(5),
@ -107,11 +201,14 @@ class _RegistrationScreenState extends State<RegistrationScreen> {
} }
}); });
}, // Image tapped }, // Image tapped
splashColor: Colors.white10, // Splash color over image splashColor: Colors
.white10, // Splash color over image
child: Image( child: Image(
image: passenable image: passenable
? AssetImage("assets/images/show_icon.png") ? AssetImage(
: AssetImage("assets/images/hide_icon.png"), "assets/images/show_icon.png")
: AssetImage(
"assets/images/hide_icon.png"),
height: 2, height: 2,
), ),
)), )),
@ -119,7 +216,10 @@ class _RegistrationScreenState extends State<RegistrationScreen> {
), ),
), ),
Padding( Padding(
padding: EdgeInsets.only(bottom: 21), padding: EdgeInsets.only(
bottom: 16.h,
left: defaultPadding,
right: defaultPadding),
child: TextFormField( child: TextFormField(
obscureText: passenable, obscureText: passenable,
validator: (value) { validator: (value) {
@ -130,22 +230,27 @@ class _RegistrationScreenState extends State<RegistrationScreen> {
}, },
cursorColor: primaryColor, cursorColor: primaryColor,
keyboardType: TextInputType.emailAddress, keyboardType: TextInputType.emailAddress,
style: GoogleFonts.plusJakartaSans(color: primaryColor), style: GoogleFonts.plusJakartaSans(
color: primaryColor),
decoration: InputDecoration( decoration: InputDecoration(
focusedBorder: OutlineInputBorder( focusedBorder: OutlineInputBorder(
borderSide: BorderSide(width: 1, color: strokeTextField), borderSide: BorderSide(
borderRadius: BorderRadius.all(Radius.circular(10))), width: 1, color: strokeTextField),
contentPadding: borderRadius:
EdgeInsets.only(top: 0, bottom: 0, left: defaultPadding), BorderRadius.all(Radius.circular(10))),
contentPadding: EdgeInsets.only(
top: 0, bottom: 0, left: defaultPadding),
fillColor: bgTextField, fillColor: bgTextField,
filled: true, filled: true,
focusColor: Color.fromRGBO(255, 255, 255, 0.30), focusColor: Color.fromRGBO(255, 255, 255, 0.30),
enabledBorder: OutlineInputBorder( enabledBorder: OutlineInputBorder(
borderSide: BorderSide(width: 1, color: strokeTextField), borderSide: BorderSide(
borderRadius: BorderRadius.all(Radius.circular(10))), width: 1, color: strokeTextField),
hintText: 'Mot de passe', borderRadius:
hintStyle: BorderRadius.all(Radius.circular(10))),
GoogleFonts.plusJakartaSans(color: strokeTextField), hintText: 'Confirmation du Mot de passe',
hintStyle: GoogleFonts.plusJakartaSans(
color: strokeTextField),
suffixIcon: Container( suffixIcon: Container(
padding: EdgeInsets.only(right: 10), padding: EdgeInsets.only(right: 10),
margin: EdgeInsets.all(5), margin: EdgeInsets.all(5),
@ -160,11 +265,14 @@ class _RegistrationScreenState extends State<RegistrationScreen> {
} }
}); });
}, // Image tapped }, // Image tapped
splashColor: Colors.white10, // Splash color over image splashColor: Colors
.white10, // Splash color over image
child: Image( child: Image(
image: passenable image: passenable
? AssetImage("assets/images/show_icon.png") ? AssetImage(
: AssetImage("assets/images/hide_icon.png"), "assets/images/show_icon.png")
: AssetImage(
"assets/images/hide_icon.png"),
height: 2, height: 2,
), ),
)), )),
@ -172,112 +280,93 @@ class _RegistrationScreenState extends State<RegistrationScreen> {
), ),
), ),
Padding( Padding(
padding: EdgeInsets.only(bottom: 21), padding:
child: TextFormField( EdgeInsets.symmetric(horizontal: defaultPadding),
validator: (value) { child: SizedBox(width: 600, child: LoginButton()),
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( SizedBox(height: 50.h),
flex: 3, ConstrainedBox(
child: Padding( constraints: BoxConstraints(maxWidth: 600),
padding: EdgeInsets.only(bottom: 63.h), child: Row(
child: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisAlignment: MainAxisAlignment.end,
children: [ children: [
Text( Expanded(
"On a besoin de ça!", child: Container(
style: GoogleFonts.plusJakartaSans( color: Color(0xFF3D3D3D),
color: Colors.white, height: 1,
fontWeight: FontWeight.w600,
fontSize: 34.h),
), ),
SizedBox(
height: 15.h,
), ),
SizedBox( Padding(
width: 230.w, padding: const EdgeInsets.only(
left: defaultPadding, right: defaultPadding),
child: Text( child: Text(
"Promis cest rapide.", 'Ou',
style: GoogleFonts.plusJakartaSans( style: GoogleFonts.plusJakartaSans(
color: Colors.white, color: Colors.white, fontWeight: FontWeight.bold),
fontWeight: FontWeight.w400,
fontSize: 17.h),
textAlign: TextAlign.center,
), ),
), ),
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))),
), ),
Padding( ),
padding: EdgeInsets.only(top: 45.h), ),
],
),
)),
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, left: defaultPadding, right: defaultPadding),
child: ClipRRect( child: ClipRRect(
borderRadius: BorderRadius.circular(10.0), borderRadius: BorderRadius.circular(10.0),
child: LinearProgressIndicator( child: LinearProgressIndicator(
minHeight: 2.5.h, minHeight: 5,
value: 0.5, value: 0.5,
backgroundColor: grayColor, backgroundColor: grayColor,
color: primaryColor, color: primaryColor,
), ),
), ),
), ),
],
), ),
), ),
],
),
); );
} }
} }

@ -47,13 +47,16 @@ class WellcomeScreen extends StatelessWidget {
SizedBox( SizedBox(
height: 25, height: 25,
), ),
Text( ConstrainedBox(
constraints: BoxConstraints(maxWidth: 520),
child: Text(
"Explore les nouvelles découvertes musicales de tes amis, et partage leur ton mood.", "Explore les nouvelles découvertes musicales de tes amis, et partage leur ton mood.",
style: GoogleFonts.plusJakartaSans( style: GoogleFonts.plusJakartaSans(
color: Colors.white, color: Colors.white,
fontWeight: FontWeight.w200, fontWeight: FontWeight.w200,
fontSize: 15), fontSize: 15),
), ),
),
], ],
), ),
), ),

@ -8,6 +8,13 @@ packages:
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
source: hosted source: hosted
version: "2.9.0" version: "2.9.0"
auto_size_text:
dependency: "direct main"
description:
name: auto_size_text
url: "https://pub.dartlang.org"
source: hosted
version: "3.0.0"
boolean_selector: boolean_selector:
dependency: transitive dependency: transitive
description: description:

@ -41,6 +41,7 @@ dependencies:
smooth_corner: ^1.1.0 smooth_corner: ^1.1.0
flutter_signin_button: ^2.0.0 flutter_signin_button: ^2.0.0
flutter_screenutil: ^5.7.0 flutter_screenutil: ^5.7.0
auto_size_text: ^3.0.0
dev_dependencies: dev_dependencies:
flutter_test: flutter_test:

Loading…
Cancel
Save