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

changes for fully responsive design with flutterUtil ✨

Browse Source
pull/14/head
Lucas Delanier 2 years ago
parent 71aed188ba
commit 675a74facb
6 changed files with 696 additions and 284 deletions
Show Stats Download Patch File Download Diff File

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

@ -86,6 +86,13 @@
</list> </list>
</value> </value>
</entry> </entry>
<entry key="flutter_screenutil">
<value>
<list>
<option value="$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/flutter_screenutil-5.7.0/lib" />
</list>
</value>
</entry>
<entry key="flutter_signin_button"> <entry key="flutter_signin_button">
<value> <value>
<list> <list>
@ -331,6 +338,7 @@
<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/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/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_lints-2.0.2/lib" />
<root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/flutter_screenutil-5.7.0/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/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/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/google_fonts-4.0.4/lib" />

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

@ -1,5 +1,6 @@
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';
class LoginButton extends StatefulWidget { class LoginButton extends StatefulWidget {
const LoginButton({Key? key}) : super(key: key); const LoginButton({Key? key}) : super(key: key);
@ -38,8 +39,8 @@ class _LoginButtonState extends State<LoginButton> {
), ),
), ),
child: Container( child: Container(
padding: EdgeInsets.only(top: 20, bottom: 20), padding: EdgeInsets.only(top: 20.h, bottom: 20.h),
constraints: BoxConstraints(maxWidth: 600, minHeight: 50.0), constraints: BoxConstraints(maxWidth: 600, minHeight: 50),
decoration: BoxDecoration( decoration: BoxDecoration(
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(

9
justMUSIC/lib/main.dart
Unescape View File

@ -1,6 +1,8 @@
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:justmusic/screens/login_screen.dart'; import 'package:justmusic/screens/login_screen.dart';
import 'package:justmusic/screens/welcome_screen.dart';
void main() { void main() {
runApp(const MyApp()); runApp(const MyApp());
@ -13,6 +15,8 @@ class MyApp extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky); SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
return ScreenUtilInit(
builder: (context, child) {
return MaterialApp( return MaterialApp(
debugShowCheckedModeBanner: false, debugShowCheckedModeBanner: false,
theme: ThemeData( theme: ThemeData(
@ -27,7 +31,10 @@ class MyApp extends StatelessWidget {
// is not restarted. // is not restarted.
primarySwatch: Colors.blue, primarySwatch: Colors.blue,
), ),
home: const LoginScreen(), home: const WellcomeScreen(),
);
},
designSize: Size(390, 844),
); );
} }
} }

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

@ -1,5 +1,6 @@
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_signin_button/button_list.dart'; import 'package:flutter_signin_button/button_list.dart';
import 'package:flutter_signin_button/button_view.dart'; import 'package:flutter_signin_button/button_view.dart';
import 'package:google_fonts/google_fonts.dart'; import 'package:google_fonts/google_fonts.dart';
@ -26,7 +27,10 @@ class _LoginScreenState extends State<LoginScreen> {
child: Scaffold( child: Scaffold(
resizeToAvoidBottomInset: false, resizeToAvoidBottomInset: false,
backgroundColor: bgColor, backgroundColor: bgColor,
body: Align( body: LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxHeight >= 740) {
return Align(
child: SizedBox( child: SizedBox(
height: double.infinity, height: double.infinity,
width: 600, width: 600,
@ -35,43 +39,51 @@ class _LoginScreenState extends State<LoginScreen> {
children: [ children: [
Expanded( Expanded(
child: Padding( child: Padding(
padding: EdgeInsets.only(left: 40, right: 40), padding:
EdgeInsets.only(left: 40, right: 40),
child: Form( child: Form(
key: _formKey, key: _formKey,
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment:
CrossAxisAlignment.center,
children: [ children: [
Expanded( Flexible(
flex: 5, flex: 5,
child: Padding( child: Padding(
padding: EdgeInsets.only(bottom: 60), padding:
EdgeInsets.only(bottom: 60),
child: Column( child: Column(
mainAxisAlignment: mainAxisAlignment:
MainAxisAlignment.end, MainAxisAlignment.end,
children: [ children: [
Text( Text(
"Te revoilà!", "Te revoilà!",
style: style: GoogleFonts
GoogleFonts.plusJakartaSans( .plusJakartaSans(
color: Colors.white, color:
Colors.white,
fontWeight: fontWeight:
FontWeight.w600, FontWeight
fontSize: 38), .w600,
fontSize: 38.h),
), ),
SizedBox( SizedBox(
height: 10, height: 10,
), ),
SizedBox( SizedBox(
width: 230, width: 230.w,
child: Text( child: Text(
"Bon retour parmis nous tu nous as manqué!", "Bon retour parmis nous tu nous as manqué!",
style: style: GoogleFonts
GoogleFonts.plusJakartaSans( .plusJakartaSans(
color: Colors.white, color: Colors
.white,
fontWeight: fontWeight:
FontWeight.w400, FontWeight
fontSize: 20), .w400,
textAlign: TextAlign.center, fontSize: 20.h),
textAlign:
TextAlign.center,
), ),
), ),
], ],
@ -94,24 +106,30 @@ class _LoginScreenState extends State<LoginScreen> {
}, },
cursorColor: primaryColor, cursorColor: primaryColor,
keyboardType: keyboardType:
TextInputType.emailAddress, TextInputType
style: .emailAddress,
GoogleFonts.plusJakartaSans( style: GoogleFonts
color: primaryColor), .plusJakartaSans(
color:
primaryColor),
decoration: InputDecoration( decoration: InputDecoration(
focusedBorder: OutlineInputBorder( focusedBorder: OutlineInputBorder(
borderSide: BorderSide( borderSide: BorderSide(
width: 1, width: 1,
color: color:
strokeTextField), strokeTextField),
borderRadius: BorderRadius.all( borderRadius:
Radius.circular(10))), BorderRadius.all(
Radius.circular(
10))),
contentPadding: contentPadding:
EdgeInsets.only( EdgeInsets.only(
top: 0, top: 0,
bottom: 0, bottom: 0,
left: defaultPadding), left:
fillColor: bgTextField, defaultPadding),
fillColor:
bgTextField,
filled: true, filled: true,
focusColor: Color.fromRGBO( focusColor: Color.fromRGBO(
255, 255, 255, 0.30), 255, 255, 255, 0.30),
@ -120,11 +138,10 @@ class _LoginScreenState extends State<LoginScreen> {
width: 1, width: 1,
color: color:
strokeTextField), strokeTextField),
borderRadius: BorderRadius.all( borderRadius:
Radius.circular(10))), BorderRadius.all(Radius.circular(10))),
hintText: 'Email', hintText: 'Email',
hintStyle: hintStyle: GoogleFonts.plusJakartaSans(color: strokeTextField)),
GoogleFonts.plusJakartaSans(color: strokeTextField)),
), ),
SizedBox( SizedBox(
height: 18, height: 18,
@ -140,55 +157,68 @@ class _LoginScreenState extends State<LoginScreen> {
}, },
cursorColor: primaryColor, cursorColor: primaryColor,
keyboardType: keyboardType:
TextInputType.emailAddress, TextInputType
style: .emailAddress,
GoogleFonts.plusJakartaSans( style: GoogleFonts
color: primaryColor), .plusJakartaSans(
decoration: InputDecoration( color:
focusedBorder: primaryColor),
OutlineInputBorder( decoration:
InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide( borderSide: BorderSide(
width: 1, width: 1,
color: color:
strokeTextField), strokeTextField),
borderRadius: borderRadius:
BorderRadius.all( BorderRadius
Radius.circular( .all(Radius
.circular(
10))), 10))),
contentPadding: EdgeInsets.only( contentPadding:
EdgeInsets.only(
top: 0, top: 0,
bottom: 0, bottom: 0,
left: defaultPadding), left:
defaultPadding),
fillColor: bgTextField, fillColor: bgTextField,
filled: true, filled: true,
focusColor: Color.fromRGBO( focusColor:
255, 255, 255, 0.30), Color.fromRGBO(255,
enabledBorder: 255, 255, 0.30),
OutlineInputBorder( enabledBorder: OutlineInputBorder(
borderSide: BorderSide( borderSide: BorderSide(
width: 1, width: 1,
color: color:
strokeTextField), strokeTextField),
borderRadius: borderRadius:
BorderRadius.all( BorderRadius
Radius.circular( .all(Radius
.circular(
10))), 10))),
hintText: 'Mot de passe', hintText:
hintStyle: 'Mot de passe',
GoogleFonts.plusJakartaSans( hintStyle: GoogleFonts
color: strokeTextField), .plusJakartaSans(
color:
strokeTextField),
suffixIcon: Container( suffixIcon: Container(
padding: EdgeInsets.only( padding:
EdgeInsets.only(
right: 10), right: 10),
margin: EdgeInsets.all(5), margin:
EdgeInsets.all(
5),
height: 3, height: 3,
child: InkWell( child: InkWell(
onTap: () { onTap: () {
setState(() { setState(() {
if (passenable) { if (passenable) {
passenable = false; passenable =
false;
} else { } else {
passenable = true; passenable =
true;
} }
}); });
}, // Image tapped }, // Image tapped
@ -206,12 +236,14 @@ class _LoginScreenState extends State<LoginScreen> {
), ),
), ),
Padding( Padding(
padding: EdgeInsets.only(top: 10), padding: EdgeInsets.only(
top: 10),
child: Text( child: Text(
"Mot de passe oublié?", "Mot de passe oublié?",
style: style: GoogleFonts
GoogleFonts.plusJakartaSans( .plusJakartaSans(
color: Colors.white), color: Colors
.white),
), ),
), ),
SizedBox( SizedBox(
@ -225,73 +257,427 @@ class _LoginScreenState extends State<LoginScreen> {
Expanded( Expanded(
flex: 3, flex: 3,
child: Padding( child: Padding(
padding: EdgeInsets.only(top: 20), padding:
EdgeInsets.only(top: 20),
child: Column( child: Column(
mainAxisAlignment: mainAxisAlignment:
MainAxisAlignment.start, MainAxisAlignment.start,
crossAxisAlignment: crossAxisAlignment:
CrossAxisAlignment.center, CrossAxisAlignment
.center,
children: [ children: [
Row( ConstrainedBox(
constraints:
BoxConstraints(
maxWidth: 600),
child: Row(
mainAxisAlignment: mainAxisAlignment:
MainAxisAlignment MainAxisAlignment
.spaceEvenly, .spaceEvenly,
children: [ children: [
Container( Expanded(
color: Color(0xFF3D3D3D), child: Container(
width: 100, color: Color(
0xFF3D3D3D),
height: 1, height: 1,
), ),
),
Padding( Padding(
padding: padding: const EdgeInsets
const EdgeInsets.only( .only(
left: left:
defaultPadding, defaultPadding,
right: right:
defaultPadding), defaultPadding),
child: Text( child: Text(
'Ou', 'Ou',
style: GoogleFonts.plusJakartaSans(
color: Colors
.white,
fontWeight:
FontWeight
.bold),
),
),
Expanded(
child:
Container(
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)),
],
),
),
)
],
),
))
],
))))
],
)),
);
} else {
return Align(
child: SizedBox(
height: double.infinity,
width: 600,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Padding(
padding:
EdgeInsets.only(left: 40, right: 40),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
Flexible(
flex: 2,
child: Padding(
padding:
EdgeInsets.only(bottom: 30),
child: Column(
mainAxisAlignment:
MainAxisAlignment.end,
children: [
Text(
"Te revoilà!",
style: GoogleFonts style: GoogleFonts
.plusJakartaSans( .plusJakartaSans(
color: color:
Colors.white, Colors.white,
fontWeight:
FontWeight
.w600,
fontSize: 38.h),
),
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.h),
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, fontSize: 15)),
),
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.h),
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: [
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:
FontWeight FontWeight
.bold), .bold),
), ),
), ),
Expanded(
child:
Container( Container(
width: 100,
height: 1, height: 1,
color: Color(0xFF3D3D3D), color: Color(
), 0xFF3D3D3D),
)),
], ],
), ),
SizedBox(height: defaultPadding), ),
SizedBox(
height:
defaultPadding),
SignInButton( SignInButton(
Buttons.Google, Buttons.Google,
text: "Login with Google", text:
"Login with Google",
onPressed: () {}, onPressed: () {},
), ),
Padding( Padding(
padding: padding:
EdgeInsets.only(top: 20), EdgeInsets.only(
top: 20),
child: RichText( child: RichText(
textAlign: TextAlign.center, textAlign:
TextAlign.center,
text: TextSpan( text: TextSpan(
text: 'Pas encore inscrit?', text:
'Pas encore inscrit?',
style: GoogleFonts style: GoogleFonts
.plusJakartaSans( .plusJakartaSans(
color: Colors.white, color: Colors
.white,
fontWeight: fontWeight:
FontWeight.w400, FontWeight
fontSize: 13), .w400,
children: <TextSpan>[ fontSize:
13),
children: <
TextSpan>[
TextSpan( TextSpan(
text: " S’inscire", text:
style: GoogleFonts " S’inscire",
.plusJakartaSans( style: GoogleFonts.plusJakartaSans(
fontSize: 13, fontSize:
13,
fontWeight: fontWeight:
FontWeight FontWeight
.w400, .w400,
@ -308,7 +694,9 @@ class _LoginScreenState extends State<LoginScreen> {
)))) ))))
], ],
)), )),
), );
)); }
},
)));
} }
} }

7
justMUSIC/pubspec.lock
Unescape View File

@ -83,6 +83,13 @@ packages:
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
source: hosted source: hosted
version: "2.0.2" version: "2.0.2"
flutter_screenutil:
dependency: "direct main"
description:
name: flutter_screenutil
url: "https://pub.dartlang.org"
source: hosted
version: "5.7.0"
flutter_signin_button: flutter_signin_button:
dependency: "direct main" dependency: "direct main"
description: description:

1
justMUSIC/pubspec.yaml
Unescape View File

@ -40,6 +40,7 @@ dependencies:
gradiantbutton: ^0.0.1 gradiantbutton: ^0.0.1
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
dev_dependencies: dev_dependencies:
flutter_test: flutter_test:

Write Preview
Loading…
Cancel
Save