From 21ec181456d3ef03031bd15101aa03203556eb22 Mon Sep 17 00:00:00 2001 From: xue Date: Sat, 29 Jun 2024 05:31:04 +0300 Subject: [PATCH 01/15] refactor: Update login page layout and form padding --- lib/pages/login/login.dart | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/lib/pages/login/login.dart b/lib/pages/login/login.dart index 3f72822..254b5c7 100644 --- a/lib/pages/login/login.dart +++ b/lib/pages/login/login.dart @@ -30,16 +30,15 @@ class LoginScreenState extends ConsumerState { return Scaffold( body: SafeArea( child: Center( - child: SizedBox( - width: 350, + child: SingleChildScrollView( child: Padding( - padding: const EdgeInsets.all(16.0), + padding: const EdgeInsets.all(40.0), child: Form( child: Column( mainAxisSize: MainAxisSize.min, children: [ Container( - margin: const EdgeInsets.all(55), + margin: const EdgeInsets.all(25), padding: const EdgeInsets.all(5), child: Image.asset( platformBrightness == Brightness.dark From 64369d27d074cfa423a93461be55ceb27c5151f3 Mon Sep 17 00:00:00 2001 From: xue Date: Sat, 29 Jun 2024 05:33:28 +0300 Subject: [PATCH 02/15] feat: Invert the status bar color based on the platform brightness --- lib/pages/login/login.dart | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/lib/pages/login/login.dart b/lib/pages/login/login.dart index 254b5c7..459405e 100644 --- a/lib/pages/login/login.dart +++ b/lib/pages/login/login.dart @@ -1,5 +1,6 @@ import 'package:appwrite/enums.dart'; import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; @@ -27,6 +28,22 @@ class LoginScreenState extends ConsumerState { final authNotifier = ref.read(authProvider.notifier); + // Invert the status bar color based on the platform brightness + SystemUiOverlayStyle overlayStyle; + if (platformBrightness == Brightness.dark) { + overlayStyle = SystemUiOverlayStyle.light.copyWith( + statusBarColor: Colors.transparent, + statusBarIconBrightness: Brightness.light, + ); + } else { + overlayStyle = SystemUiOverlayStyle.dark.copyWith( + statusBarColor: Colors.transparent, + statusBarIconBrightness: Brightness.dark, + ); + } + + SystemChrome.setSystemUIOverlayStyle(overlayStyle); + return Scaffold( body: SafeArea( child: Center( From a5c1a59879f7c1923b2b7e8959fa88146fb7c9ef Mon Sep 17 00:00:00 2001 From: xue Date: Sat, 29 Jun 2024 05:44:36 +0300 Subject: [PATCH 03/15] refactor: Update login page layout and form padding --- lib/pages/login/login.dart | 192 +++++++++++++++++++------------------ 1 file changed, 100 insertions(+), 92 deletions(-) diff --git a/lib/pages/login/login.dart b/lib/pages/login/login.dart index 459405e..5d251ab 100644 --- a/lib/pages/login/login.dart +++ b/lib/pages/login/login.dart @@ -47,110 +47,118 @@ class LoginScreenState extends ConsumerState { return Scaffold( body: SafeArea( child: Center( - child: SingleChildScrollView( - child: Padding( - padding: const EdgeInsets.all(40.0), - child: Form( - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Container( - margin: const EdgeInsets.all(25), - padding: const EdgeInsets.all(5), - child: Image.asset( - platformBrightness == Brightness.dark - ? "assets/images/langx-white.png" - : "assets/images/langx-dark.png", - ), - ), - const SizedBox(height: 25), - dInput( - label: "Email", - controller: emailController, - ), - const SizedBox(height: 16), - dInput( - label: "Password", - controller: passwordController, - obscureText: true, - ), - const SizedBox(height: 35), - dButton( - text: "Login", - onPress: () async { - await authNotifier.login( - email: emailController.text, - password: passwordController.text, - context: context, - ); - }, - ), - const SizedBox(height: 16), - TextButton( - onPressed: () { - // Navigate to registration page - }, - child: const Text('Not a member yet? SIGN UP'), - ), - const SizedBox(height: 8), - TextButton( - onPressed: () { - // Navigate to forgot password page - }, - child: const Text('Forgot password?'), - ), - const SizedBox(height: 16), - Row( - mainAxisAlignment: MainAxisAlignment.center, + child: Padding( + padding: const EdgeInsets.all( + 20.0), // Optional padding for better spacing + child: Card( + child: SingleChildScrollView( + child: Padding( + padding: const EdgeInsets.all(40.0), + child: Form( + child: Column( + mainAxisSize: MainAxisSize.min, children: [ - IconButton( - icon: SvgPicture.asset( - 'assets/images/google_icon.svg', - width: 40, - height: 40, + Container( + margin: const EdgeInsets.all(25), + padding: const EdgeInsets.all(5), + child: Image.asset( + platformBrightness == Brightness.dark + ? "assets/images/langx-white.png" + : "assets/images/langx-dark.png", ), - onPressed: () async { - await authNotifier.oAuthLogin( - provider: OAuthProvider.google, + ), + const SizedBox(height: 25), + dInput( + label: "Email", + controller: emailController, + ), + const SizedBox(height: 16), + dInput( + label: "Password", + controller: passwordController, + obscureText: true, + ), + const SizedBox(height: 35), + dButton( + text: "Login", + onPress: () async { + await authNotifier.login( + email: emailController.text, + password: passwordController.text, context: context, ); }, ), - const SizedBox(width: 30), - IconButton( - icon: SvgPicture.asset( - 'assets/images/facebook_icon.svg', - width: 40, - height: 40, - ), - onPressed: () async { - await authNotifier.oAuthLogin( - provider: OAuthProvider.facebook, - context: context, - ); + const SizedBox(height: 16), + TextButton( + onPressed: () { + // Navigate to registration page }, + child: const Text('Not a member yet? SIGN UP'), ), - const SizedBox(width: 30), - IconButton( - icon: SvgPicture.asset('assets/images/apple_icon.svg', - width: 40, height: 40), - onPressed: () async { - await authNotifier.oAuthLogin( - provider: OAuthProvider.apple, - context: context, - ); + const SizedBox(height: 8), + TextButton( + onPressed: () { + // Navigate to forgot password page }, + child: const Text('Forgot password?'), + ), + const SizedBox(height: 16), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + IconButton( + icon: SvgPicture.asset( + 'assets/images/google_icon.svg', + width: 40, + height: 40, + ), + onPressed: () async { + await authNotifier.oAuthLogin( + provider: OAuthProvider.google, + context: context, + ); + }, + ), + const SizedBox(width: 30), + IconButton( + icon: SvgPicture.asset( + 'assets/images/facebook_icon.svg', + width: 40, + height: 40, + ), + onPressed: () async { + await authNotifier.oAuthLogin( + provider: OAuthProvider.facebook, + context: context, + ); + }, + ), + const SizedBox(width: 30), + IconButton( + icon: SvgPicture.asset( + 'assets/images/apple_icon.svg', + width: 40, + height: 40), + onPressed: () async { + await authNotifier.oAuthLogin( + provider: OAuthProvider.apple, + context: context, + ); + }, + ), + ], + ), + const SizedBox(height: 30), + TextButton( + onPressed: () { + // Show introduction + }, + child: const Text('SHOW INTRO'), ), ], ), - const SizedBox(height: 30), - TextButton( - onPressed: () { - // Show introduction - }, - child: const Text('SHOW INTRO'), - ), - ], + ), ), ), ), From dd234d2b7128559a6947d9f2629a209d9e3d789d Mon Sep 17 00:00:00 2001 From: xue Date: Sat, 29 Jun 2024 05:50:11 +0300 Subject: [PATCH 04/15] refactor: Update login page image size constraints --- lib/pages/login/login.dart | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/pages/login/login.dart b/lib/pages/login/login.dart index 5d251ab..851da7e 100644 --- a/lib/pages/login/login.dart +++ b/lib/pages/login/login.dart @@ -61,6 +61,8 @@ class LoginScreenState extends ConsumerState { Container( margin: const EdgeInsets.all(25), padding: const EdgeInsets.all(5), + constraints: const BoxConstraints( + maxWidth: 300, maxHeight: 300), child: Image.asset( platformBrightness == Brightness.dark ? "assets/images/langx-white.png" From 3c24150f865c9f0e59546e28fa777200d61e8669 Mon Sep 17 00:00:00 2001 From: xue Date: Sat, 29 Jun 2024 06:26:22 +0300 Subject: [PATCH 05/15] refactor: Update login page layout and form padding --- lib/pages/login/login.dart | 85 ++++++++++++++++++++++++++++---------- 1 file changed, 63 insertions(+), 22 deletions(-) diff --git a/lib/pages/login/login.dart b/lib/pages/login/login.dart index 851da7e..f3d0df8 100644 --- a/lib/pages/login/login.dart +++ b/lib/pages/login/login.dart @@ -48,8 +48,7 @@ class LoginScreenState extends ConsumerState { body: SafeArea( child: Center( child: Padding( - padding: const EdgeInsets.all( - 20.0), // Optional padding for better spacing + padding: const EdgeInsets.all(20.0), child: Card( child: SingleChildScrollView( child: Padding( @@ -59,7 +58,7 @@ class LoginScreenState extends ConsumerState { mainAxisSize: MainAxisSize.min, children: [ Container( - margin: const EdgeInsets.all(25), + margin: const EdgeInsets.all(10), padding: const EdgeInsets.all(5), constraints: const BoxConstraints( maxWidth: 300, maxHeight: 300), @@ -92,20 +91,6 @@ class LoginScreenState extends ConsumerState { }, ), const SizedBox(height: 16), - TextButton( - onPressed: () { - // Navigate to registration page - }, - child: const Text('Not a member yet? SIGN UP'), - ), - const SizedBox(height: 8), - TextButton( - onPressed: () { - // Navigate to forgot password page - }, - child: const Text('Forgot password?'), - ), - const SizedBox(height: 16), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ @@ -139,9 +124,10 @@ class LoginScreenState extends ConsumerState { const SizedBox(width: 30), IconButton( icon: SvgPicture.asset( - 'assets/images/apple_icon.svg', - width: 40, - height: 40), + 'assets/images/apple_icon.svg', + width: 40, + height: 40, + ), onPressed: () async { await authNotifier.oAuthLogin( provider: OAuthProvider.apple, @@ -151,12 +137,67 @@ class LoginScreenState extends ConsumerState { ), ], ), - const SizedBox(height: 30), + const SizedBox(height: 16), + Column( + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const Text( + 'Not a member yet?', + style: TextStyle( + fontSize: 14, + fontStyle: FontStyle.italic, + ), + ), + TextButton( + onPressed: () { + // Navigate to registration page + }, + child: const Text( + 'Sign Up', + style: TextStyle( + fontSize: 16, + ), + ), + ), + ], + ), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const Text( + 'Forgot password?', + style: TextStyle( + fontSize: 14, + fontStyle: FontStyle.italic, + ), + ), + TextButton( + onPressed: () { + // Navigate to forgot password page + }, + child: const Text( + 'Reset It', + style: TextStyle( + fontSize: 16, + ), + ), + ), + ], + ), + ], + ), TextButton( onPressed: () { // Show introduction }, - child: const Text('SHOW INTRO'), + child: const Text( + 'Show Intro', + style: TextStyle( + fontSize: 16, + ), + ), ), ], ), From 4042cfd4f4264977601e08dcdb13d2c2cd1f3479 Mon Sep 17 00:00:00 2001 From: xue Date: Sat, 29 Jun 2024 06:35:19 +0300 Subject: [PATCH 06/15] refactor: Update login page layout and form padding --- lib/pages/login/login.dart | 66 +++++++++++++++++++++++--------------- 1 file changed, 40 insertions(+), 26 deletions(-) diff --git a/lib/pages/login/login.dart b/lib/pages/login/login.dart index f3d0df8..754dc77 100644 --- a/lib/pages/login/login.dart +++ b/lib/pages/login/login.dart @@ -143,21 +143,28 @@ class LoginScreenState extends ConsumerState { Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - const Text( - 'Not a member yet?', - style: TextStyle( - fontSize: 14, - fontStyle: FontStyle.italic, + const Expanded( + flex: 7, + child: Text( + 'Not a member yet?', + textAlign: TextAlign.left, + style: TextStyle( + fontSize: 14, + fontStyle: FontStyle.italic, + ), ), ), - TextButton( - onPressed: () { - // Navigate to registration page - }, - child: const Text( - 'Sign Up', - style: TextStyle( - fontSize: 16, + Expanded( + flex: 5, + child: TextButton( + onPressed: () { + // Navigate to registration page + }, + child: const Text( + 'Sign Up', + style: TextStyle( + fontSize: 16, + ), ), ), ), @@ -166,21 +173,28 @@ class LoginScreenState extends ConsumerState { Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - const Text( - 'Forgot password?', - style: TextStyle( - fontSize: 14, - fontStyle: FontStyle.italic, + const Expanded( + flex: 7, + child: Text( + 'Forgot password?', + textAlign: TextAlign.left, + style: TextStyle( + fontSize: 14, + fontStyle: FontStyle.italic, + ), ), ), - TextButton( - onPressed: () { - // Navigate to forgot password page - }, - child: const Text( - 'Reset It', - style: TextStyle( - fontSize: 16, + Expanded( + flex: 5, + child: TextButton( + onPressed: () { + // Navigate to forgot password page + }, + child: const Text( + 'Reset It', + style: TextStyle( + fontSize: 16, + ), ), ), ), From 9db7504e39184294c265ab41493f83ea3533c4c8 Mon Sep 17 00:00:00 2001 From: xue Date: Sat, 29 Jun 2024 06:46:08 +0300 Subject: [PATCH 07/15] refactor: Add Discord login button to the login page --- assets/images/apple_icon.svg | 19 ++++++++++++++++++- assets/images/discord_icon.svg | 18 ++++++++++++++++++ assets/images/facebook_icon.svg | 28 +++++++++++++++++++++++++++- assets/images/google_icon.svg | 26 +++++++++++++++++++++++++- lib/pages/login/login.dart | 26 ++++++++++++++++++++------ 5 files changed, 108 insertions(+), 9 deletions(-) create mode 100644 assets/images/discord_icon.svg diff --git a/assets/images/apple_icon.svg b/assets/images/apple_icon.svg index ac57839..4002235 100644 --- a/assets/images/apple_icon.svg +++ b/assets/images/apple_icon.svg @@ -1 +1,18 @@ - \ No newline at end of file + + + + + \ No newline at end of file diff --git a/assets/images/discord_icon.svg b/assets/images/discord_icon.svg new file mode 100644 index 0000000..ad44519 --- /dev/null +++ b/assets/images/discord_icon.svg @@ -0,0 +1,18 @@ + + + + + \ No newline at end of file diff --git a/assets/images/facebook_icon.svg b/assets/images/facebook_icon.svg index bc109f4..396c96b 100644 --- a/assets/images/facebook_icon.svg +++ b/assets/images/facebook_icon.svg @@ -1 +1,27 @@ - \ No newline at end of file + + + + + + \ No newline at end of file diff --git a/assets/images/google_icon.svg b/assets/images/google_icon.svg index 8310b5d..be34103 100644 --- a/assets/images/google_icon.svg +++ b/assets/images/google_icon.svg @@ -1 +1,25 @@ - \ No newline at end of file + + + + + + + \ No newline at end of file diff --git a/lib/pages/login/login.dart b/lib/pages/login/login.dart index 754dc77..6032682 100644 --- a/lib/pages/login/login.dart +++ b/lib/pages/login/login.dart @@ -94,11 +94,25 @@ class LoginScreenState extends ConsumerState { Row( mainAxisAlignment: MainAxisAlignment.center, children: [ + IconButton( + icon: SvgPicture.asset( + 'assets/images/discord_icon.svg', + width: 30, + height: 30, + ), + onPressed: () async { + await authNotifier.oAuthLogin( + provider: OAuthProvider.discord, + context: context, + ); + }, + ), + const SizedBox(width: 30), IconButton( icon: SvgPicture.asset( 'assets/images/google_icon.svg', - width: 40, - height: 40, + width: 30, + height: 30, ), onPressed: () async { await authNotifier.oAuthLogin( @@ -111,8 +125,8 @@ class LoginScreenState extends ConsumerState { IconButton( icon: SvgPicture.asset( 'assets/images/facebook_icon.svg', - width: 40, - height: 40, + width: 30, + height: 30, ), onPressed: () async { await authNotifier.oAuthLogin( @@ -125,8 +139,8 @@ class LoginScreenState extends ConsumerState { IconButton( icon: SvgPicture.asset( 'assets/images/apple_icon.svg', - width: 40, - height: 40, + width: 30, + height: 30, ), onPressed: () async { await authNotifier.oAuthLogin( From b7108e90ad221c77e4f2c56924dee9c2dbe505a1 Mon Sep 17 00:00:00 2001 From: xue Date: Sat, 29 Jun 2024 06:58:22 +0300 Subject: [PATCH 08/15] refactor: Add OAuth buttons to the login page --- .../dfault_buttons.dart | 0 .../dfault_input.dart | 0 lib/components/atomic/oauth_button.dart | 46 +++++++++++++++++++ lib/pages/login/login.dart | 39 +++++----------- 4 files changed, 58 insertions(+), 27 deletions(-) rename lib/components/{dfault_framework/dfault_material => atomic}/dfault_buttons.dart (100%) rename lib/components/{dfault_framework/dfault_material => atomic}/dfault_input.dart (100%) create mode 100644 lib/components/atomic/oauth_button.dart diff --git a/lib/components/dfault_framework/dfault_material/dfault_buttons.dart b/lib/components/atomic/dfault_buttons.dart similarity index 100% rename from lib/components/dfault_framework/dfault_material/dfault_buttons.dart rename to lib/components/atomic/dfault_buttons.dart diff --git a/lib/components/dfault_framework/dfault_material/dfault_input.dart b/lib/components/atomic/dfault_input.dart similarity index 100% rename from lib/components/dfault_framework/dfault_material/dfault_input.dart rename to lib/components/atomic/dfault_input.dart diff --git a/lib/components/atomic/oauth_button.dart b/lib/components/atomic/oauth_button.dart new file mode 100644 index 0000000..95447b3 --- /dev/null +++ b/lib/components/atomic/oauth_button.dart @@ -0,0 +1,46 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; + +class OAuthButton extends StatelessWidget { + final String assetPath; + final VoidCallback onPressed; + + const OAuthButton( + {required this.assetPath, required this.onPressed, Key? key}) + : super(key: key); + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: onPressed, + child: Container( + height: 50, + width: 50, + decoration: BoxDecoration( + color: const Color(0xFFF2F2F2), + borderRadius: BorderRadius.circular(4), + boxShadow: const [ + BoxShadow( + offset: Offset(0, 1), + color: Color(0x4C3C4043), + blurRadius: 2, + ), + BoxShadow( + color: Color(0x26283C40), + offset: Offset(0, 1), + blurRadius: 3, + spreadRadius: 1, + ), + ], + ), + child: Center( + child: SvgPicture.asset( + assetPath, + width: 25, + height: 25, + ), + ), + ), + ); + } +} diff --git a/lib/pages/login/login.dart b/lib/pages/login/login.dart index 6032682..5845311 100644 --- a/lib/pages/login/login.dart +++ b/lib/pages/login/login.dart @@ -8,8 +8,9 @@ import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:langx_flutter/providers/auth_provider.dart'; // Component Imports -import 'package:langx_flutter/components/dfault_framework/dfault_material/dfault_buttons.dart'; -import 'package:langx_flutter/components/dfault_framework/dfault_material/dfault_input.dart'; +import 'package:langx_flutter/components/atomic/dfault_buttons.dart'; +import 'package:langx_flutter/components/atomic/dfault_input.dart'; +import 'package:langx_flutter/components/atomic/oauth_button.dart'; class LoginScreen extends ConsumerStatefulWidget { const LoginScreen({super.key}); @@ -90,16 +91,12 @@ class LoginScreenState extends ConsumerState { ); }, ), - const SizedBox(height: 16), + const SizedBox(height: 30), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - IconButton( - icon: SvgPicture.asset( - 'assets/images/discord_icon.svg', - width: 30, - height: 30, - ), + OAuthButton( + assetPath: 'assets/images/discord_icon.svg', onPressed: () async { await authNotifier.oAuthLogin( provider: OAuthProvider.discord, @@ -108,12 +105,8 @@ class LoginScreenState extends ConsumerState { }, ), const SizedBox(width: 30), - IconButton( - icon: SvgPicture.asset( - 'assets/images/google_icon.svg', - width: 30, - height: 30, - ), + OAuthButton( + assetPath: 'assets/images/google_icon.svg', onPressed: () async { await authNotifier.oAuthLogin( provider: OAuthProvider.google, @@ -122,12 +115,8 @@ class LoginScreenState extends ConsumerState { }, ), const SizedBox(width: 30), - IconButton( - icon: SvgPicture.asset( - 'assets/images/facebook_icon.svg', - width: 30, - height: 30, - ), + OAuthButton( + assetPath: 'assets/images/facebook_icon.svg', onPressed: () async { await authNotifier.oAuthLogin( provider: OAuthProvider.facebook, @@ -136,12 +125,8 @@ class LoginScreenState extends ConsumerState { }, ), const SizedBox(width: 30), - IconButton( - icon: SvgPicture.asset( - 'assets/images/apple_icon.svg', - width: 30, - height: 30, - ), + OAuthButton( + assetPath: 'assets/images/apple_icon.svg', onPressed: () async { await authNotifier.oAuthLogin( provider: OAuthProvider.apple, From 82052dca9dd057163602f948e4eef96280955f69 Mon Sep 17 00:00:00 2001 From: xue Date: Sat, 29 Jun 2024 07:01:02 +0300 Subject: [PATCH 09/15] refactor: flutter analyzer --- lib/components/atomic/oauth_button.dart | 8 +++++--- lib/pages/login/login.dart | 1 - 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/lib/components/atomic/oauth_button.dart b/lib/components/atomic/oauth_button.dart index 95447b3..2b1af40 100644 --- a/lib/components/atomic/oauth_button.dart +++ b/lib/components/atomic/oauth_button.dart @@ -5,9 +5,11 @@ class OAuthButton extends StatelessWidget { final String assetPath; final VoidCallback onPressed; - const OAuthButton( - {required this.assetPath, required this.onPressed, Key? key}) - : super(key: key); + const OAuthButton({ + required this.assetPath, + required this.onPressed, + super.key, + }); @override Widget build(BuildContext context) { diff --git a/lib/pages/login/login.dart b/lib/pages/login/login.dart index 5845311..8376f60 100644 --- a/lib/pages/login/login.dart +++ b/lib/pages/login/login.dart @@ -1,7 +1,6 @@ import 'package:appwrite/enums.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; -import 'package:flutter_svg/flutter_svg.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; // Providers Import From c1a9743415645ad8557738fe3b13b27d51b29af3 Mon Sep 17 00:00:00 2001 From: xue Date: Sat, 29 Jun 2024 07:21:42 +0300 Subject: [PATCH 10/15] refactor: Update OAuthButton to support dark mode and Apple icon color --- lib/components/atomic/oauth_button.dart | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/lib/components/atomic/oauth_button.dart b/lib/components/atomic/oauth_button.dart index 2b1af40..19a5395 100644 --- a/lib/components/atomic/oauth_button.dart +++ b/lib/components/atomic/oauth_button.dart @@ -13,13 +13,17 @@ class OAuthButton extends StatelessWidget { @override Widget build(BuildContext context) { + Brightness platformBrightness = MediaQuery.of(context).platformBrightness; + final bool isDarkMode = platformBrightness == Brightness.dark; + final bool isAppleIcon = assetPath.contains('apple_icon'); + return GestureDetector( onTap: onPressed, child: Container( height: 50, width: 50, decoration: BoxDecoration( - color: const Color(0xFFF2F2F2), + color: isDarkMode ? const Color(0xFF131314) : Colors.white, borderRadius: BorderRadius.circular(4), boxShadow: const [ BoxShadow( @@ -40,6 +44,12 @@ class OAuthButton extends StatelessWidget { assetPath, width: 25, height: 25, + colorFilter: isAppleIcon + ? ColorFilter.mode( + isDarkMode ? Colors.white : Colors.black, + BlendMode.srcIn, + ) + : null, ), ), ), From c87133a3b18cd86bebd8230f026b232d90a26d64 Mon Sep 17 00:00:00 2001 From: xue Date: Sat, 29 Jun 2024 07:32:09 +0300 Subject: [PATCH 11/15] refactor: Add OAuth buttons for Discord, Google, Facebook, and Apple to the login page --- lib/pages/login/login.dart | 78 +++++++++++++++++++++----------------- 1 file changed, 43 insertions(+), 35 deletions(-) diff --git a/lib/pages/login/login.dart b/lib/pages/login/login.dart index 8376f60..aaa8699 100644 --- a/lib/pages/login/login.dart +++ b/lib/pages/login/login.dart @@ -94,44 +94,52 @@ class LoginScreenState extends ConsumerState { Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - OAuthButton( - assetPath: 'assets/images/discord_icon.svg', - onPressed: () async { - await authNotifier.oAuthLogin( - provider: OAuthProvider.discord, - context: context, - ); - }, + Flexible( + child: OAuthButton( + assetPath: 'assets/images/discord_icon.svg', + onPressed: () async { + await authNotifier.oAuthLogin( + provider: OAuthProvider.discord, + context: context, + ); + }, + ), ), - const SizedBox(width: 30), - OAuthButton( - assetPath: 'assets/images/google_icon.svg', - onPressed: () async { - await authNotifier.oAuthLogin( - provider: OAuthProvider.google, - context: context, - ); - }, + const Spacer(), // Auto padding between buttons + Flexible( + child: OAuthButton( + assetPath: 'assets/images/google_icon.svg', + onPressed: () async { + await authNotifier.oAuthLogin( + provider: OAuthProvider.google, + context: context, + ); + }, + ), ), - const SizedBox(width: 30), - OAuthButton( - assetPath: 'assets/images/facebook_icon.svg', - onPressed: () async { - await authNotifier.oAuthLogin( - provider: OAuthProvider.facebook, - context: context, - ); - }, + const Spacer(), // Auto padding between buttons + Flexible( + child: OAuthButton( + assetPath: 'assets/images/facebook_icon.svg', + onPressed: () async { + await authNotifier.oAuthLogin( + provider: OAuthProvider.facebook, + context: context, + ); + }, + ), ), - const SizedBox(width: 30), - OAuthButton( - assetPath: 'assets/images/apple_icon.svg', - onPressed: () async { - await authNotifier.oAuthLogin( - provider: OAuthProvider.apple, - context: context, - ); - }, + const Spacer(), // Auto padding between buttons + Flexible( + child: OAuthButton( + assetPath: 'assets/images/apple_icon.svg', + onPressed: () async { + await authNotifier.oAuthLogin( + provider: OAuthProvider.apple, + context: context, + ); + }, + ), ), ], ), From 32c65dd60eefbcb06a2af2a3c68f95916591c030 Mon Sep 17 00:00:00 2001 From: xue Date: Sat, 29 Jun 2024 07:41:48 +0300 Subject: [PATCH 12/15] refactor: Adjust spacing and padding for OAuth buttons on login page --- lib/pages/login/login.dart | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/lib/pages/login/login.dart b/lib/pages/login/login.dart index aaa8699..881ef1c 100644 --- a/lib/pages/login/login.dart +++ b/lib/pages/login/login.dart @@ -92,9 +92,13 @@ class LoginScreenState extends ConsumerState { ), const SizedBox(height: 30), Row( - mainAxisAlignment: MainAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment + .spaceEvenly, // Adjusts spacing evenly between items children: [ - Flexible( + Padding( + padding: const EdgeInsets.symmetric( + horizontal: + 4.0), // Adjust horizontal padding as needed child: OAuthButton( assetPath: 'assets/images/discord_icon.svg', onPressed: () async { @@ -105,8 +109,10 @@ class LoginScreenState extends ConsumerState { }, ), ), - const Spacer(), // Auto padding between buttons - Flexible( + Padding( + padding: const EdgeInsets.symmetric( + horizontal: + 4.0), // Adjust horizontal padding as needed child: OAuthButton( assetPath: 'assets/images/google_icon.svg', onPressed: () async { @@ -117,8 +123,10 @@ class LoginScreenState extends ConsumerState { }, ), ), - const Spacer(), // Auto padding between buttons - Flexible( + Padding( + padding: const EdgeInsets.symmetric( + horizontal: + 4.0), // Adjust horizontal padding as needed child: OAuthButton( assetPath: 'assets/images/facebook_icon.svg', onPressed: () async { @@ -129,8 +137,10 @@ class LoginScreenState extends ConsumerState { }, ), ), - const Spacer(), // Auto padding between buttons - Flexible( + Padding( + padding: const EdgeInsets.symmetric( + horizontal: + 4.0), // Adjust horizontal padding as needed child: OAuthButton( assetPath: 'assets/images/apple_icon.svg', onPressed: () async { From 723a762a34c31243ac05a06c651c131634e648c0 Mon Sep 17 00:00:00 2001 From: xue Date: Sat, 29 Jun 2024 07:45:59 +0300 Subject: [PATCH 13/15] refactor: Added BoxConstraints to login card fro wide screens --- lib/pages/login/login.dart | 332 +++++++++++++++++++------------------ 1 file changed, 168 insertions(+), 164 deletions(-) diff --git a/lib/pages/login/login.dart b/lib/pages/login/login.dart index 881ef1c..43eba62 100644 --- a/lib/pages/login/login.dart +++ b/lib/pages/login/login.dart @@ -49,187 +49,191 @@ class LoginScreenState extends ConsumerState { child: Center( child: Padding( padding: const EdgeInsets.all(20.0), - child: Card( - child: SingleChildScrollView( - child: Padding( - padding: const EdgeInsets.all(40.0), - child: Form( - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Container( - margin: const EdgeInsets.all(10), - padding: const EdgeInsets.all(5), - constraints: const BoxConstraints( - maxWidth: 300, maxHeight: 300), - child: Image.asset( - platformBrightness == Brightness.dark - ? "assets/images/langx-white.png" - : "assets/images/langx-dark.png", - ), - ), - const SizedBox(height: 25), - dInput( - label: "Email", - controller: emailController, - ), - const SizedBox(height: 16), - dInput( - label: "Password", - controller: passwordController, - obscureText: true, - ), - const SizedBox(height: 35), - dButton( - text: "Login", - onPress: () async { - await authNotifier.login( - email: emailController.text, - password: passwordController.text, - context: context, - ); - }, - ), - const SizedBox(height: 30), - Row( - mainAxisAlignment: MainAxisAlignment - .spaceEvenly, // Adjusts spacing evenly between items - children: [ - Padding( - padding: const EdgeInsets.symmetric( - horizontal: - 4.0), // Adjust horizontal padding as needed - child: OAuthButton( - assetPath: 'assets/images/discord_icon.svg', - onPressed: () async { - await authNotifier.oAuthLogin( - provider: OAuthProvider.discord, - context: context, - ); - }, - ), + child: ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: 600), // Set your desired maximum width here + child: Card( + child: SingleChildScrollView( + child: Padding( + padding: const EdgeInsets.all(40.0), + child: Form( + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Container( + margin: const EdgeInsets.all(10), + padding: const EdgeInsets.all(5), + constraints: const BoxConstraints( + maxWidth: 300, maxHeight: 300), + child: Image.asset( + platformBrightness == Brightness.dark + ? "assets/images/langx-white.png" + : "assets/images/langx-dark.png", ), - Padding( - padding: const EdgeInsets.symmetric( - horizontal: - 4.0), // Adjust horizontal padding as needed - child: OAuthButton( - assetPath: 'assets/images/google_icon.svg', - onPressed: () async { - await authNotifier.oAuthLogin( - provider: OAuthProvider.google, - context: context, - ); - }, + ), + const SizedBox(height: 25), + dInput( + label: "Email", + controller: emailController, + ), + const SizedBox(height: 16), + dInput( + label: "Password", + controller: passwordController, + obscureText: true, + ), + const SizedBox(height: 35), + dButton( + text: "Login", + onPress: () async { + await authNotifier.login( + email: emailController.text, + password: passwordController.text, + context: context, + ); + }, + ), + const SizedBox(height: 30), + Row( + mainAxisAlignment: MainAxisAlignment + .spaceEvenly, // Adjusts spacing evenly between items + children: [ + Padding( + padding: const EdgeInsets.symmetric( + horizontal: + 4.0), // Adjust horizontal padding as needed + child: OAuthButton( + assetPath: 'assets/images/discord_icon.svg', + onPressed: () async { + await authNotifier.oAuthLogin( + provider: OAuthProvider.discord, + context: context, + ); + }, + ), ), - ), - Padding( - padding: const EdgeInsets.symmetric( - horizontal: - 4.0), // Adjust horizontal padding as needed - child: OAuthButton( - assetPath: 'assets/images/facebook_icon.svg', - onPressed: () async { - await authNotifier.oAuthLogin( - provider: OAuthProvider.facebook, - context: context, - ); - }, + Padding( + padding: const EdgeInsets.symmetric( + horizontal: + 4.0), // Adjust horizontal padding as needed + child: OAuthButton( + assetPath: 'assets/images/google_icon.svg', + onPressed: () async { + await authNotifier.oAuthLogin( + provider: OAuthProvider.google, + context: context, + ); + }, + ), ), - ), - Padding( - padding: const EdgeInsets.symmetric( - horizontal: - 4.0), // Adjust horizontal padding as needed - child: OAuthButton( - assetPath: 'assets/images/apple_icon.svg', - onPressed: () async { - await authNotifier.oAuthLogin( - provider: OAuthProvider.apple, - context: context, - ); - }, + Padding( + padding: const EdgeInsets.symmetric( + horizontal: + 4.0), // Adjust horizontal padding as needed + child: OAuthButton( + assetPath: 'assets/images/facebook_icon.svg', + onPressed: () async { + await authNotifier.oAuthLogin( + provider: OAuthProvider.facebook, + context: context, + ); + }, + ), ), - ), - ], - ), - const SizedBox(height: 16), - Column( - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const Expanded( - flex: 7, - child: Text( - 'Not a member yet?', - textAlign: TextAlign.left, - style: TextStyle( - fontSize: 14, - fontStyle: FontStyle.italic, - ), - ), + Padding( + padding: const EdgeInsets.symmetric( + horizontal: + 4.0), // Adjust horizontal padding as needed + child: OAuthButton( + assetPath: 'assets/images/apple_icon.svg', + onPressed: () async { + await authNotifier.oAuthLogin( + provider: OAuthProvider.apple, + context: context, + ); + }, ), - Expanded( - flex: 5, - child: TextButton( - onPressed: () { - // Navigate to registration page - }, - child: const Text( - 'Sign Up', + ), + ], + ), + const SizedBox(height: 16), + Column( + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const Expanded( + flex: 7, + child: Text( + 'Not a member yet?', + textAlign: TextAlign.left, style: TextStyle( - fontSize: 16, + fontSize: 14, + fontStyle: FontStyle.italic, ), ), ), - ), - ], - ), - Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const Expanded( - flex: 7, - child: Text( - 'Forgot password?', - textAlign: TextAlign.left, - style: TextStyle( - fontSize: 14, - fontStyle: FontStyle.italic, + Expanded( + flex: 5, + child: TextButton( + onPressed: () { + // Navigate to registration page + }, + child: const Text( + 'Sign Up', + style: TextStyle( + fontSize: 16, + ), + ), ), ), - ), - Expanded( - flex: 5, - child: TextButton( - onPressed: () { - // Navigate to forgot password page - }, - child: const Text( - 'Reset It', + ], + ), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const Expanded( + flex: 7, + child: Text( + 'Forgot password?', + textAlign: TextAlign.left, style: TextStyle( - fontSize: 16, + fontSize: 14, + fontStyle: FontStyle.italic, ), ), ), - ), - ], - ), - ], - ), - TextButton( - onPressed: () { - // Show introduction - }, - child: const Text( - 'Show Intro', - style: TextStyle( - fontSize: 16, + Expanded( + flex: 5, + child: TextButton( + onPressed: () { + // Navigate to forgot password page + }, + child: const Text( + 'Reset It', + style: TextStyle( + fontSize: 16, + ), + ), + ), + ), + ], + ), + ], + ), + TextButton( + onPressed: () { + // Show introduction + }, + child: const Text( + 'Show Intro', + style: TextStyle( + fontSize: 16, + ), ), ), - ), - ], + ], + ), ), ), ), From 25373a6522a7c25c135b543ad662cd08b2f026bd Mon Sep 17 00:00:00 2001 From: xue Date: Sat, 29 Jun 2024 08:11:23 +0300 Subject: [PATCH 14/15] refactor: Added toastification package --- pubspec.lock | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++ pubspec.yaml | 1 + 2 files changed, 57 insertions(+) diff --git a/pubspec.lock b/pubspec.lock index 73d3d3d..44116dd 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -113,6 +113,14 @@ packages: url: "https://pub.dev" source: hosted version: "7.0.0" + equatable: + dependency: transitive + description: + name: equatable + sha256: c2b87cb7756efdf69892005af546c56c0b5037f54d2a88269b4f347a505e3ca2 + url: "https://pub.dev" + source: hosted + version: "2.0.5" fake_async: dependency: transitive description: @@ -137,6 +145,14 @@ packages: url: "https://pub.dev" source: hosted version: "7.0.0" + fixnum: + dependency: transitive + description: + name: fixnum + sha256: "25517a4deb0c03aa0f32fd12db525856438902d9c16536311e76cdc57b31d7d1" + url: "https://pub.dev" + source: hosted + version: "1.1.0" flutter: dependency: "direct main" description: flutter @@ -232,6 +248,14 @@ packages: url: "https://pub.dev" source: hosted version: "4.0.2" + iconsax_flutter: + dependency: transitive + description: + name: iconsax_flutter + sha256: "95b65699da8ea98f87c5d232f06b0debaaf1ec1332b697e4d90969ec9a93037d" + url: "https://pub.dev" + source: hosted + version: "1.0.0" leak_tracker: dependency: transitive description: @@ -376,6 +400,14 @@ packages: url: "https://pub.dev" source: hosted version: "2.2.1" + pausable_timer: + dependency: transitive + description: + name: pausable_timer + sha256: "6ef1a95441ec3439de6fb63f39a011b67e693198e7dae14e20675c3c00e86074" + url: "https://pub.dev" + source: hosted + version: "3.1.0+3" petitparser: dependency: transitive description: @@ -421,6 +453,14 @@ packages: url: "https://pub.dev" source: hosted version: "1.10.0" + sprintf: + dependency: transitive + description: + name: sprintf + sha256: "1fc9ffe69d4df602376b52949af107d8f5703b77cda567c4d7d86a0693120f23" + url: "https://pub.dev" + source: hosted + version: "7.0.0" stack_trace: dependency: transitive description: @@ -469,6 +509,14 @@ packages: url: "https://pub.dev" source: hosted version: "0.7.0" + toastification: + dependency: "direct main" + description: + name: toastification + sha256: "5e751acc2fb5b8d008138dac255d62290fde4e5a24824f29809ac098c3dfe395" + url: "https://pub.dev" + source: hosted + version: "2.0.0" typed_data: dependency: transitive description: @@ -557,6 +605,14 @@ packages: url: "https://pub.dev" source: hosted version: "3.1.1" + uuid: + dependency: transitive + description: + name: uuid + sha256: "814e9e88f21a176ae1359149021870e87f7cddaf633ab678a5d2b0bff7fd1ba8" + url: "https://pub.dev" + source: hosted + version: "4.4.0" vector_graphics: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index b49acb6..7bd2afe 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -39,6 +39,7 @@ dependencies: appwrite: ^12.0.4 flutter_dotenv: ^5.1.0 flutter_riverpod: ^2.5.1 + toastification: ^2.0.0 dev_dependencies: flutter_test: From 43a7cb416d0bd18a93d3024efac19a5cd08a4d87 Mon Sep 17 00:00:00 2001 From: xue Date: Sat, 29 Jun 2024 08:11:45 +0300 Subject: [PATCH 15/15] refactor: Integrate toastification package for displaying error messages instead of ScaffoldMessenger --- lib/main.dart | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/lib/main.dart b/lib/main.dart index 0397ffa..7750e4a 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,6 +1,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_dotenv/flutter_dotenv.dart'; +import 'package:toastification/toastification.dart'; // Themes Import import 'package:langx_flutter/theme.dart'; @@ -39,11 +40,14 @@ class Main extends ConsumerWidget { builder: (context) { WidgetsBinding.instance.addPostFrameCallback((_) { if (authNotifier.errorMessage != null) { - ScaffoldMessenger.of(context).showSnackBar( - SnackBar(content: Text(authNotifier.errorMessage!)), + toastification.show( + context: context, + type: ToastificationType.error, + title: Text(authNotifier.errorMessage!), + autoCloseDuration: const Duration(seconds: 3), + alignment: Alignment.topCenter, ); - authNotifier - .clearErrorMessage(); // Clear the error message after displaying it + authNotifier.clearErrorMessage(); } });