justDEV
/
justMusic
2
4
Fork 0
Code Issues 35 Pull Requests 5 Packages Projects 1 Releases Wiki Activity

finish the login screen with responsive design ✨

Browse Source
pull/14/head
Lucas Delanier 2 years ago
parent 27421efb71
commit 71aed188ba
8 changed files with 329 additions and 37 deletions
Show Stats Download Patch File Download Diff File

16
.idea/libraries/Dart_Packages.xml
Unescape View File

@ -86,6 +86,13 @@
</list>
</value>
</entry>
<entry key="flutter_signin_button">
<value>
<list>
<option value="$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/flutter_signin_button-2.0.0/lib" />
</list>
</value>
</entry>
<entry key="flutter_test">
<value>
<list>
@ -93,6 +100,13 @@
</list>
</value>
</entry>
<entry key="font_awesome_flutter">
<value>
<list>
<option value="$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/font_awesome_flutter-9.2.0/lib" />
</list>
</value>
</entry>
<entry key="google_fonts">
<value>
<list>
@ -317,6 +331,8 @@
<root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/ffi-2.0.2/lib" />
<root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/file-6.1.4/lib" />
<root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/flutter_lints-2.0.2/lib" />
<root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/flutter_signin_button-2.0.0/lib" />
<root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/font_awesome_flutter-9.2.0/lib" />
<root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/google_fonts-4.0.4/lib" />
<root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/gradiantbutton-0.0.1/lib" />
<root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/http-0.13.5/lib" />

BIN
justMUSIC/assets/images/hide_icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
justMUSIC/assets/images/show_icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

4
justMUSIC/lib/components/login_button.dart
Unescape View File

@ -1,6 +1,5 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class LoginButton extends StatefulWidget {
const LoginButton({Key? key}) : super(key: key);
@ -15,6 +14,7 @@ class _LoginButtonState extends State<LoginButton> {
return ElevatedButton(
onPressed: () {},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Color(0xFF1C1C1C)),
overlayColor:
MaterialStateProperty.all(Color(0xffD3C2FF).withOpacity(0.2)),
shape: MaterialStateProperty.all(RoundedRectangleBorder(
@ -39,7 +39,7 @@ class _LoginButtonState extends State<LoginButton> {
),
child: Container(
padding: EdgeInsets.only(top: 20, bottom: 20),
constraints: BoxConstraints(maxWidth: 300.0, minHeight: 50.0),
constraints: BoxConstraints(maxWidth: 600, minHeight: 50.0),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(

329
justMUSIC/lib/screens/login_screen.dart
Unescape View File

@ -1,5 +1,7 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.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';
@ -13,43 +15,300 @@ class LoginScreen extends StatefulWidget {
}
class _LoginScreenState extends State<LoginScreen> {
bool passenable = true;
final _focusNode = FocusNode();
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: bgColor,
body: Align(
child: Column(
children: [
Expanded(
return GestureDetector(
onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
child: Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: bgColor,
body: Align(
child: SizedBox(
height: double.infinity,
width: 600,
child: Column(
children: [
Text(
"Te revoilà!",
style: GoogleFonts.plusJakartaSans(
color: Colors.white,
fontWeight: FontWeight.w500,
fontSize: 38),
),
SizedBox(
height: 10,
),
SizedBox(
width: 230,
child: Text(
"Bon retour parmis nous tu nous as manqué!",
style: GoogleFonts.plusJakartaSans(
color: Colors.white,
fontWeight: FontWeight.w300,
fontSize: 20),
textAlign: TextAlign.center,
),
),
LoginButton()
],
))
],
),
),
);
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Padding(
padding: EdgeInsets.only(left: 40, right: 40),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 5,
child: Padding(
padding: EdgeInsets.only(bottom: 60),
child: Column(
mainAxisAlignment:
MainAxisAlignment.end,
children: [
Text(
"Te revoilà!",
style:
GoogleFonts.plusJakartaSans(
color: Colors.white,
fontWeight:
FontWeight.w600,
fontSize: 38),
),
SizedBox(
height: 10,
),
SizedBox(
width: 230,
child: Text(
"Bon retour parmis nous tu nous as manqué!",
style:
GoogleFonts.plusJakartaSans(
color: Colors.white,
fontWeight:
FontWeight.w400,
fontSize: 20),
textAlign: TextAlign.center,
),
),
],
),
),
),
Expanded(
flex: 4,
child: Column(
crossAxisAlignment:
CrossAxisAlignment.end,
children: [
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)),
),
SizedBox(
height: 18,
),
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(top: 10),
child: Text(
"Mot de passe oublié?",
style:
GoogleFonts.plusJakartaSans(
color: Colors.white),
),
),
SizedBox(
height: defaultPadding,
),
SizedBox(
width: 600,
child: LoginButton()),
],
)),
Expanded(
flex: 3,
child: Padding(
padding: EdgeInsets.only(top: 20),
child: Column(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceEvenly,
children: [
Container(
color: Color(0xFF3D3D3D),
width: 100,
height: 1,
),
Padding(
padding:
const EdgeInsets.only(
left:
defaultPadding,
right:
defaultPadding),
child: Text(
'Ou',
style: GoogleFonts
.plusJakartaSans(
color:
Colors.white,
fontWeight:
FontWeight
.bold),
),
),
Container(
width: 100,
height: 1,
color: Color(0xFF3D3D3D),
),
],
),
SizedBox(height: defaultPadding),
SignInButton(
Buttons.Google,
text: "Login with Google",
onPressed: () {},
),
Padding(
padding:
EdgeInsets.only(top: 20),
child: RichText(
textAlign: TextAlign.center,
text: TextSpan(
text: 'Pas encore inscrit?',
style: GoogleFonts
.plusJakartaSans(
color: Colors.white,
fontWeight:
FontWeight.w400,
fontSize: 13),
children: <TextSpan>[
TextSpan(
text: " S’inscire",
style: GoogleFonts
.plusJakartaSans(
fontSize: 13,
fontWeight:
FontWeight
.w400,
color:
primaryColor)),
],
),
),
)
],
),
))
],
))))
],
)),
),
));
}
}

2
justMUSIC/lib/values/constants.dart
Unescape View File

@ -9,6 +9,8 @@ const grayColor = Color(0xFF242424);
const profileBttnColor = Color(0xFF232323);
const warningBttnColor = Color(0xFF141414);
const disabledBttnColor = Color(0xFF1F1B2E);
const bgTextField = Color(0xFF1C1B23);
const strokeTextField = Color(0xFF373546);
// All constants important too us

14
justMUSIC/pubspec.lock
Unescape View File

@ -83,11 +83,25 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.2"
flutter_signin_button:
dependency: "direct main"
description:
name: flutter_signin_button
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.0"
flutter_test:
dependency: "direct dev"
description: flutter
source: sdk
version: "0.0.0"
font_awesome_flutter:
dependency: transitive
description:
name: font_awesome_flutter
url: "https://pub.dartlang.org"
source: hosted
version: "9.2.0"
google_fonts:
dependency: "direct main"
description:

1
justMUSIC/pubspec.yaml
Unescape View File

@ -39,6 +39,7 @@ dependencies:
google_fonts: ^4.0.4
gradiantbutton: ^0.0.1
smooth_corner: ^1.1.0
flutter_signin_button: ^2.0.0
dev_dependencies:
flutter_test:

Write Preview
Loading…
Cancel
Save