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>
</value>
</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">
<value>
<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/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_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/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" />

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

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

37
justMUSIC/lib/main.dart
Unescape View File

@ -1,6 +1,8 @@
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/welcome_screen.dart';
void main() {
runApp(const MyApp());
@ -13,21 +15,26 @@ class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: const LoginScreen(),
return ScreenUtilInit(
builder: (context, child) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: const WellcomeScreen(),
);
},
designSize: Size(390, 844),
);
}
}

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

@ -1,5 +1,6 @@
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';
@ -24,291 +25,678 @@ class _LoginScreenState extends State<LoginScreen> {
return GestureDetector(
onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
child: Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: bgColor,
body: 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: [
Expanded(
flex: 5,
child: Padding(
padding: EdgeInsets.only(bottom: 60),
resizeToAvoidBottomInset: false,
backgroundColor: bgColor,
body: LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxHeight >= 740) {
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(
mainAxisAlignment:
MainAxisAlignment.end,
crossAxisAlignment:
CrossAxisAlignment.center,
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,
Flexible(
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.h),
),
SizedBox(
height: 10,
),
SizedBox(
width: 230.w,
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)),
),
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: [
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:
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)),
],
),
),
)
],
),
))
],
),
),
),
Expanded(
flex: 4,
))))
],
)),
);
} 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.end,
CrossAxisAlignment.center,
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',
Flexible(
flex: 2,
child: Padding(
padding:
EdgeInsets.only(bottom: 30),
child: Column(
mainAxisAlignment:
MainAxisAlignment.end,
children: [
Text(
"Te revoilà!",
style: GoogleFonts
.plusJakartaSans(
color:
Colors.white,
fontWeight:
FontWeight
.bold),
.w600,
fontSize: 38.h),
),
),
Container(
width: 100,
height: 1,
color: Color(0xFF3D3D3D),
),
],
),
SizedBox(height: defaultPadding),
SignInButton(
Buttons.Google,
text: "Login with Google",
onPressed: () {},
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,
),
),
],
),
),
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,
),
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:
primaryColor)),
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
.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)),
],
),
),
)
],
),
),
)
],
),
))
],
))))
],
)),
),
));
))
],
))))
],
)),
);
}
},
)));
}
}

7
justMUSIC/pubspec.lock
Unescape View File

@ -83,6 +83,13 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
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:
dependency: "direct main"
description:

1
justMUSIC/pubspec.yaml
Unescape View File

@ -40,6 +40,7 @@ dependencies:
gradiantbutton: ^0.0.1
smooth_corner: ^1.1.0
flutter_signin_button: ^2.0.0
flutter_screenutil: ^5.7.0
dev_dependencies:
flutter_test:

Write Preview
Loading…
Cancel
Save