From 675a74facbb408c9a02b7d6ac979e46e54c6c9fe Mon Sep 17 00:00:00 2001 From: Lucas Delanier Date: Sat, 15 Jul 2023 17:12:57 +0200 Subject: [PATCH] changes for fully responsive design with flutterUtil :sparkles: --- .idea/libraries/Dart_Packages.xml | 8 + justMUSIC/lib/components/login_button.dart | 5 +- justMUSIC/lib/main.dart | 37 +- justMUSIC/lib/screens/login_screen.dart | 922 +++++++++++++++------ justMUSIC/pubspec.lock | 7 + justMUSIC/pubspec.yaml | 1 + 6 files changed, 696 insertions(+), 284 deletions(-) diff --git a/.idea/libraries/Dart_Packages.xml b/.idea/libraries/Dart_Packages.xml index a4019a6..05ad340 100644 --- a/.idea/libraries/Dart_Packages.xml +++ b/.idea/libraries/Dart_Packages.xml @@ -86,6 +86,13 @@ + + + + + + @@ -331,6 +338,7 @@ + diff --git a/justMUSIC/lib/components/login_button.dart b/justMUSIC/lib/components/login_button.dart index fd82842..badf09f 100644 --- a/justMUSIC/lib/components/login_button.dart +++ b/justMUSIC/lib/components/login_button.dart @@ -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 { ), ), 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( diff --git a/justMUSIC/lib/main.dart b/justMUSIC/lib/main.dart index 4ad7860..335e2c1 100644 --- a/justMUSIC/lib/main.dart +++ b/justMUSIC/lib/main.dart @@ -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), ); } } diff --git a/justMUSIC/lib/screens/login_screen.dart b/justMUSIC/lib/screens/login_screen.dart index 8676ef7..128ea86 100644 --- a/justMUSIC/lib/screens/login_screen.dart +++ b/justMUSIC/lib/screens/login_screen.dart @@ -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 { 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( - 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)), + ], + ), + ), + ) ], ), - ), - ) - ], - ), - )) - ], - )))) - ], - )), - ), - )); + )) + ], + )))) + ], + )), + ); + } + }, + ))); } } diff --git a/justMUSIC/pubspec.lock b/justMUSIC/pubspec.lock index 9975bfb..30c8c75 100644 --- a/justMUSIC/pubspec.lock +++ b/justMUSIC/pubspec.lock @@ -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: diff --git a/justMUSIC/pubspec.yaml b/justMUSIC/pubspec.yaml index 381fbc8..7a33469 100644 --- a/justMUSIC/pubspec.yaml +++ b/justMUSIC/pubspec.yaml @@ -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: