changes for fully responsive design with flutterUtil

pull/14/head
Lucas Delanier 2 years ago
parent 71aed188ba
commit 675a74facb

@ -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" />

@ -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(

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

@ -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';
@ -24,291 +25,678 @@ class _LoginScreenState extends State<LoginScreen> {
return GestureDetector( return GestureDetector(
onTap: () => FocusManager.instance.primaryFocus?.unfocus(), onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
child: Scaffold( child: Scaffold(
resizeToAvoidBottomInset: false, resizeToAvoidBottomInset: false,
backgroundColor: bgColor, backgroundColor: bgColor,
body: Align( body: LayoutBuilder(
child: SizedBox( builder: (context, constraints) {
height: double.infinity, if (constraints.maxHeight >= 740) {
width: 600, return Align(
child: Column( child: SizedBox(
mainAxisAlignment: MainAxisAlignment.center, height: double.infinity,
children: [ width: 600,
Expanded( child: Column(
child: Padding( mainAxisAlignment: MainAxisAlignment.center,
padding: EdgeInsets.only(left: 40, right: 40), children: [
child: Form( Expanded(
key: _formKey, child: Padding(
child: Column( padding:
crossAxisAlignment: CrossAxisAlignment.center, EdgeInsets.only(left: 40, right: 40),
children: [ child: Form(
Expanded( key: _formKey,
flex: 5,
child: Padding(
padding: EdgeInsets.only(bottom: 60),
child: Column( child: Column(
mainAxisAlignment: crossAxisAlignment:
MainAxisAlignment.end, CrossAxisAlignment.center,
children: [ children: [
Text( Flexible(
"Te revoilà!", flex: 5,
style: child: Padding(
GoogleFonts.plusJakartaSans( padding:
color: Colors.white, EdgeInsets.only(bottom: 60),
fontWeight: child: Column(
FontWeight.w600, mainAxisAlignment:
fontSize: 38), MainAxisAlignment.end,
), children: [
SizedBox( Text(
height: 10, "Te revoilà!",
), style: GoogleFonts
SizedBox( .plusJakartaSans(
width: 230, color:
child: Text( Colors.white,
"Bon retour parmis nous tu nous as manqué!", fontWeight:
style: FontWeight
GoogleFonts.plusJakartaSans( .w600,
color: Colors.white, fontSize: 38.h),
fontWeight: ),
FontWeight.w400, SizedBox(
fontSize: 20), height: 10,
textAlign: TextAlign.center, ),
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:
" Sinscire",
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( child: Column(
crossAxisAlignment: crossAxisAlignment:
CrossAxisAlignment.end, CrossAxisAlignment.center,
children: [ children: [
TextFormField( Flexible(
validator: (value) { flex: 2,
if (value == null || child: Padding(
value.isEmpty) { padding:
return 'TODO'; EdgeInsets.only(bottom: 30),
} child: Column(
return null; mainAxisAlignment:
}, MainAxisAlignment.end,
cursorColor: primaryColor, children: [
keyboardType: Text(
TextInputType.emailAddress, "Te revoilà!",
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 style: GoogleFonts
.plusJakartaSans( .plusJakartaSans(
color: color:
Colors.white, Colors.white,
fontWeight: fontWeight:
FontWeight FontWeight
.bold), .w600,
fontSize: 38.h),
), ),
), SizedBox(
Container( height: 10,
width: 100, ),
height: 1, SizedBox(
color: Color(0xFF3D3D3D), width: 230,
), child: Text(
], "Bon retour parmis nous tu nous as manqué!",
), style: GoogleFonts
SizedBox(height: defaultPadding), .plusJakartaSans(
SignInButton( color: Colors
Buttons.Google, .white,
text: "Login with Google", fontWeight:
onPressed: () {}, FontWeight
.w400,
fontSize: 20.h),
textAlign:
TextAlign.center,
),
),
],
),
), ),
Padding( ),
padding: Expanded(
EdgeInsets.only(top: 20), flex: 4,
child: RichText( child: Column(
textAlign: TextAlign.center, crossAxisAlignment:
text: TextSpan( CrossAxisAlignment.end,
text: 'Pas encore inscrit?', children: [
style: GoogleFonts TextFormField(
.plusJakartaSans( validator: (value) {
color: Colors.white, if (value == null ||
fontWeight: value.isEmpty) {
FontWeight.w400, return 'TODO';
fontSize: 13), }
children: <TextSpan>[ return null;
TextSpan( },
text: " Sinscire", cursorColor: primaryColor,
style: GoogleFonts keyboardType:
.plusJakartaSans( TextInputType
fontSize: 13, .emailAddress,
fontWeight: style: GoogleFonts
FontWeight .plusJakartaSans(
.w400, color:
primaryColor),
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 1,
color: 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:
" Sinscire",
style: GoogleFonts.plusJakartaSans(
fontSize:
13,
fontWeight:
FontWeight
.w400,
color:
primaryColor)),
],
),
),
)
], ],
), ),
), ))
) ],
], ))))
), ],
)) )),
], );
)))) }
], },
)), )));
),
));
} }
} }

@ -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:

@ -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:

Loading…
Cancel
Save